Text over images, and the scrim that makes it work
A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one.
Tag
accessibility
4 articles on accessibility.
Color accessibility, in practice
Color accessibility is mostly one question asked repeatedly: can someone who is not you, on hardware that is not yours, in a room you have never been in, read this? The standards exist because the honest answer is usually no, and because designers are the worst possible judges of their own work — you already know what the text says.
WCAG 2.2 answers it with a contrast ratio, a single number derived from the relative luminance of two colors. It is a blunt instrument. It ignores font size below a threshold, ignores font weight almost entirely, and treats a hairline serif at 24px as equivalent to a bold sans at 24px. APCA, the model drafted for WCAG 3, weights those things properly and reports polarity — light-on-dark and dark-on-light are not symmetric to the human eye, and the older ratio pretends they are.
Neither model is a substitute for the other yet. WCAG 2.2 is what conformance is measured against and what an audit will cite; APCA is what will tell you why a technically-passing combination still looks weak. Run both, and when they disagree, believe APCA about appearance and WCAG about compliance.
All 4 articles
APCA and the end of the contrast ratio
WCAG 3 replaces the 4.5:1 ratio with a model that knows dark mode exists. Here is what changes and what to do about it now.
Color blindness is a design constraint, not an edge case
Around one in twelve men cannot distinguish some of the color pairs in your interface. That is not an accessibility footnote, it is a larger group than Safari users.
What the 4.5:1 rule actually measures
Everyone knows the number. Far fewer know what it is computing, where it is wrong, and why passing it does not mean your text is readable.
Tools for accessibility
- WCAG Contrast CheckerThe ratio, the grades, and the nearest passing color.
- APCA Contrast CalculatorThe model behind WCAG 3, which knows dark mode exists.
- Accessible Palette BuilderBuild the palette from the contrast requirement backwards.
- Contrast GridEvery pair in your palette, checked at once.
- Readable Text FinderGiven this background, what text color actually works?