Light grey text on a white background is the signature look of a certain kind of modern web design, and it is the single most common accessibility failure measured on real websites. It is also trivially fixable.
What the ratio measures
WCAG defines a contrast ratio between two colours based on their relative luminance, a measure of perceived brightness that weights the colour channels according to how sensitive human vision is to each:
L = 0.2126 R + 0.7152 G + 0.0722 B
(with each channel first linearised from its sRGB value)
Green contributes over 70% of perceived brightness; blue contributes about 7%. This is why pure blue text on black is hard to read despite looking like a strong colour difference, there is almost no luminance difference.
The ratio is then:
(L_lighter + 0.05) / (L_darker + 0.05)
It ranges from 1:1 (identical colours) to 21:1 (pure black on pure white).
The thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥18.66px bold, or ≥24px) | 3:1 | 4.5:1 |
| UI components, graphics, focus indicators | 3:1 | , |
AA is the level referenced by most accessibility legislation, including the European Accessibility Act and the standards used for public sector procurement in many countries. AAA is a goal, not usually a requirement.
Note the third row: it was added in WCAG 2.1 and is widely missed. Input borders, toggle states, icons that convey meaning and focus rings all need 3:1 against their surroundings. A form field with a barely-visible border technically fails even if its label is perfectly readable.
What is exempt
- Disabled controls. No requirement, though a disabled control nobody can see is still poor design.
- Purely decorative graphics that convey no information.
- Logos and brand names as they appear.
- Text that is part of a photograph.
Fixing a palette without redesigning it
Adjust lightness, not hue. Contrast is a luminance relationship. Take your brand colour and darken it for text use while keeping the same hue and saturation, the palette still reads as the same brand, and the text passes. Working in HSL or LCH makes this a one-value change.
Body text at #767676 or darker on white. That is roughly the lightest neutral grey that reaches 4.5:1 against pure white. Anything lighter fails for body copy. #999999, a very popular choice for "secondary" text, comes in at about 2.8:1 and fails clearly.
Do not rely on colour alone. A red border on an invalid field is invisible to a substantial number of users. Add an icon or text. This is a separate WCAG criterion from contrast and is failed just as often.
Check both themes. A palette tuned for a light theme frequently fails in dark mode, where the relationship inverts and mid-greys that worked against white are now too close to a dark background.
Test text over images. A caption over a photograph passes or fails depending on the pixels behind it. Use a scrim, a semi-transparent overlay, rather than hoping.
Where automated checking stops
An automated checker reliably catches contrast failures. It cannot tell you whether your alt text is meaningful, whether the tab order makes sense, or whether a control is operable by keyboard. Contrast is the part of accessibility that is measurable, which is precisely why there is no excuse for failing it.
Checking as you design
Pick colours and see the ratio immediately rather than auditing at the end, when changing a palette means changing a design system. The contrast checker shows the ratio and the AA/AAA verdict for any pair, and the colour converter moves between HEX, RGB and HSL so you can adjust lightness without disturbing the hue you actually chose.