Contrast ratios are the part of accessible colour that can be automated, which is why they get all the attention and why they are treated as the whole job.
What the checker does not catch
- Red and green as the only difference between two states. Roughly one in twelve men cannot rely on that distinction, and it is the most common signalling pair in software.
- Focus indicators that pass against the background but not against the component they outline.
- Charts where the legend is the only way to map a colour to a series.
- Text over an image, where the ratio depends on which part of the photograph is behind it.
Cheap fixes
Pair colour with a second channel — an icon, a label, a pattern, a position. A red border plus a warning icon plus text reading "invalid" works for everyone, and costs nothing extra to build. Grayscale the interface in DevTools as a five-second test: if you cannot tell what state something is in, neither can a good number of your users.



Tags:
2 Comments
Leave a comment
Sign in to leave a comment.
Signing in is unavailable right now.







Lotte Jansen
February 6, 2024The grayscale test is now part of our design review. It takes seconds and catches things a full audit misses.
Muhammed Senussi
AuthorFebruary 6, 2024It is also persuasive in a way that a report is not. Showing a stakeholder their own dashboard in grayscale ends the discussion about whether this matters.