Mistakes You Might Be Making

In developing or testing applications what I see a lot of teams forget is High Contrast mode, which will ignore some of your CSS in attempt to simplify the application as an accommodation for people who can see and don't need to use a screen reader, they just can't distinguish colors the same way you might.

The three things I see trip people up is overriding outline, using background images or colors as the only way to convey information, and using image text.

Don't Overthink and Override Outlines

Browsers natively provide great outline on every focusable element, let the browsers own this for you as they ensure focus styles are visible and distinct. Their native outlines will also help you catch janky html if not a rectangle or oval and some odd shaped polygon that's likely a symptom of non semantic HTML.

/* the worst thing you can do is override focus styles with */
:focus { outline: none }        

Avoid Purely Visual Styling

CSS background colors and images are great but DO NOT rely solely on them for conveying information, or visual cues. Prioritize functional styling that works even when visual styles are overridden. Windows high contrast mode ignores all background colors and images, it will also make the improper use of dialog especially noticeable, for instance I was helping a team that was using dialogs as the main way to distinguish external content from their content and the bulk of their content was external content. This was bad for many reasons, search, sharing, printing, etc.. but also completely ineffective in high contrast mode for the reasoning behind the decision.

Why Avoid Image Text?

The most common thing I see is a developer used image text because a designer gave them branded text next to a logo as one image with transparent background.

Transparent background sounds great, but IF you can't control or know the background a user will be using [WHICH YOU CAN'T] then you need to have a background in the image to ensure sufficient color contrast, which has it's own issues if you want to simulate transparency with reflow on a gradient header etc...

SVG is a great solution because you can compose the logo as an image or use logo as a background image if the logo can't be rendered in a neutral or alternative colors that work for each white and black backgrounds.

The text can be in text elements that support inheriting colors from CSS or high contrast mode CSS and you can use the custom font to get the same branded font and CSS is pretty amazing you can color the text with gradients or filters found on most image editors and learn new CSS skills. So your customer or designer will see the same text they wanted as it's possible to be inclusive and not compromise some visual vision, which is the number one reason I see some customers not care about accessibility unfortunately, and it's lack of education, they think they have to choose between being visually stunning or accommodating a small minority.

Using native text ensures compatibility with assistive technologies, and adapt to user settings, ensuring readability. Other benefits to converting an image asset a designer gave you to SVG (often they export as SVG if you ask and they are technical) is that now you have something you can make work in dark, light modes as well as users who prefer higher/custom high contrast settings just by using CSS.