What contrast ratio does WCAG require? 4.5:1 explained
Accessibility audits keep flagging your grey text. Here is exactly which numbers apply, where they come from and how to fix a colour without redesigning everything.
The numbers at a glance
| What | AA (the usual target) | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text: 24px+, or 18.66px+ bold | 3:1 | 4.5:1 |
| UI parts and meaningful graphics (icons, input borders, focus indicators, chart lines) | 3:1 | (no extra level) |
| Disabled controls, pure decoration, logos | No requirement | |
The text rules are WCAG success criteria 1.4.3 (AA) and 1.4.6 (AAA); the 3:1 rule for interface parts is 1.4.11, added in WCAG 2.1. "Large" is defined in points: 18pt, or 14pt bold, which is 24px and about 18.66px in CSS.
Colours that only just pass
| Text on white | Ratio | Normal text AA? |
|---|---|---|
#767676 grey | 4.54:1 | Yes, the lightest neutral grey that passes |
#777777 grey | 4.48:1 | No, by a hair |
#999999 grey | 2.85:1 | No, not even for large text |
#595959 grey | 7.00:1 | Yes, and AAA |
#ff0000 pure red | 4.00:1 | Only for large text |
#0066cc link blue | 5.57:1 | Yes |
Pure red on white failing surprises many people. The eye is far more sensitive to green than to red or blue, so the formula weighs colours very differently, and "bright" colours are not always "light" ones.
How the ratio is worked out
Each colour is turned into a relative luminance between 0 (black) and 1 (white). The sRGB channels are first converted to linear light, then mixed as 0.2126 × R + 0.7152 × G + 0.0722 × B. The ratio is then:
contrast = (lighter luminance + 0.05) / (darker luminance + 0.05)That gives 1:1 for two identical colours and 21:1 for black on white. The 0.05 stands in for the glare of a real screen. Do not round up: 4.499:1 fails 4.5:1. The contrast checker truncates for this reason and, when a pair fails, finds the nearest colour with the same hue that passes.
Fixing a failing colour
- Darken the text, not the brand. Keep the hue and lower the lightness until it passes; in OKLCH this barely changes how the colour feels.
- Mind text on images and gradients. Check against the lightest part behind the text, or add a solid or semi-transparent backing.
- Check hover, focus and dark mode separately. Each state is its own pair of colours.
- Placeholder text counts if it carries information people need.
What about WCAG 3 and APCA?
A newer contrast method called APCA is being explored for the future WCAG 3, which takes font size and weight into account more precisely. It is still a draft. Laws and audits today refer to WCAG 2.1 or 2.2, so 4.5:1 and 3:1 are the numbers to meet.
Questions
Is 4.5:1 required by law?
Many accessibility laws and procurement rules point to WCAG 2.1 or 2.2 level AA, which includes 4.5:1 for normal text. Whether it applies to your site depends on where you are and what kind of organisation you are.
Does contrast apply to placeholder and disabled text?
Disabled controls are exempt. Placeholder text is not exempt when it gives information the user needs, which is one reason to use real labels instead.
What contrast ratio does grey #767676 have on white?
4.54:1, which passes AA for normal text. It is the lightest neutral grey that does; #777777 is 4.48:1 and fails.
Do logos need to meet contrast rules?
No. Text that is part of a logo or brand name is exempt, as is purely decorative text.
Published .