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
contrast
3 articles on contrast.
Contrast is a measurement, not an opinion
Contrast is the one part of color work that has a number attached, which makes it the part most worth measuring instead of arguing about. WCAG's ratio runs from 1:1 to 21:1 and is computed from relative luminance — a weighted sum of the linearised channels, where green counts for 72% and blue for 7%. That weighting surprises people, and it explains why yellow text on white is hopeless while blue text on white is fine.
The thresholds are 4.5:1 for body text, 3:1 for large text and for the non-text parts of a control that convey its boundary or state. They are floors, not targets. Text at exactly 4.5:1 is legible in good conditions and tiring over a long article; the comfortable range for extended reading starts closer to 7:1.
Where the ratio misleads is at the extremes. It has no concept of font weight, and it treats the two polarities as equivalent when the eye does not — light text on a dark background needs measurably more separation than the reverse to feel equally solid. APCA models both. Where the two disagree, the disagreement is usually the interesting part.
All 3 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.
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 contrast
- WCAG Contrast CheckerThe ratio, the grades, and the nearest passing color.
- APCA Contrast CalculatorThe model behind WCAG 3, which knows dark mode exists.
- Contrast GridEvery pair in your palette, checked at once.
- Readable Text FinderGiven this background, what text color actually works?
- Accessible Palette BuilderBuild the palette from the contrast requirement backwards.