Design · 3 min read ·
Color contrast and WCAG: how to make text easy to read
What a 4.5:1 contrast ratio means, which text needs AA or AAA, and quick fixes for the color pairs that fail most often.
Light grey text on white looks elegant in a design file and is hard to read on a phone in sunlight, for older eyes or for people with low vision. The Web Content Accessibility Guidelines (WCAG) turn “readable” into a number you can check.
The contrast ratio
Contrast is a ratio from 1:1 (the same color) to 21:1 (black on white). It is based on relative luminance, how bright each color looks to the eye, with green counting most and blue least. That is why yellow text on white is almost invisible while blue on white reads well.
The thresholds
Normal text Large text
AA (minimum) 4.5:1 3:1
AAA (enhanced) 7:1 4.5:1
Large text = at least 24px, or 18.66px boldAA is the level most accessibility laws and policies refer to, so treat it as the minimum. AAA is worth aiming for in long reading text. Icons, input borders and focus rings that carry meaning need at least 3:1 under WCAG 2.1.
Pairs that often fail
Grey placeholder text, white text on bright brand colors such as orange, yellow or light green, and text over photos. The margins can be tiny: #777777 on white is about 4.48:1, just below AA, while #767676 is about 4.54:1 and passes.
Quick fixes
Darken the text or the background a step or two rather than changing the hue; small changes in lightness move the ratio a lot. Make labels on bright buttons large and bold, or use dark text instead of white. On photos, put a dark overlay behind the text.
Contrast isn’t the only color rule
WCAG also says color must not be the only way information is shown. A form field marked invalid only by a red border, or a chart that tells lines apart only by color, fails people with color blindness, about 1 in 12 men. Add an icon, a text label, a pattern or a different line style.
Dark mode
The same ratios apply on dark backgrounds. Pure white text on pure black reaches 21:1 but can look harsh and make letters seem to glow for some readers; a light grey on a very dark grey still passes AA easily and is more comfortable for long reading. Check both themes, because a pair that passes in light mode often fails once the colors are inverted.
Text on images and gradients
On a photo or a gradient the background changes behind every letter. Measure the contrast against the lightest part of the background that sits behind the text, not the average. A semi-transparent dark layer or a solid band behind the text makes the result predictable.
What comes next
The draft of WCAG 3 explores a new contrast method called APCA, which takes font size and weight into account more precisely. It is still a draft: laws and audits today refer to WCAG 2.1 and 2.2, so the 4.5:1 and 3:1 thresholds remain the ones to meet.
Check a pair
The 4Dev Color Contrast Checker shows the ratio for any text and background color, with a live preview and a pass or fail for AA and AAA, for normal and large text. The calculation uses the WCAG 2 formula and runs in your browser.