WCAG Colour Contrast Guide: AA vs AAA Ratios
What WCAG contrast ratios mean, the AA and AAA thresholds for text and UI, how the ratio is calculated and how to fix failing colours.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
Low contrast is the most common accessibility failure on the web. Light grey text on white looks elegant on a designer's monitor and is unreadable for many users — in sunlight, on a cheap screen, or with low vision. WCAG gives you a number to test against.
The thresholds (WCAG 2.x)
| Content | AA (usual target) | AAA |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (18pt / 24px, or 14pt bold / about 18.7px bold) | 3 : 1 | 4.5 : 1 |
| UI components and graphics (borders, icons, focus rings) | 3 : 1 | — |
The ratio runs from 1:1 (identical colours) to 21:1 (black on white). Logotypes and purely decorative text are exempt, as are disabled controls.
How the ratio is calculated
- Convert each colour's sRGB channels (0–1) to linear light.
- Compute relative luminance: L = 0.2126 R + 0.7152 G + 0.0722 B.
- Ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05).
Green contributes most to perceived brightness, which is why a mid green can look fine and still fail.
Well-known reference points
| Text on white | Ratio | Result |
|---|---|---|
| #000000 | 21 : 1 | Pass AAA |
| #595959 | 7 : 1 | Pass AAA |
| #767676 | 4.54 : 1 | Pass AA (the lightest grey that passes) |
| #777777 | 4.48 : 1 | Fails AA for normal text |
| #949494 | 3.03 : 1 | Pass for large text and UI only |
| #AAAAAA | 2.32 : 1 | Fail |
Where designs usually fail
- Placeholder text and form hints in pale grey.
- Buttons: white text on a light or mid-tone brand colour.
- Text over images or gradients — test the worst area behind the text.
- Disabled-looking but active links and secondary buttons.
- Charts that rely on colour alone, with similar hues.
- Focus indicators that disappear against the background.
Fixing a failing colour
- Darken the text (on light backgrounds) or lighten it (on dark) until it passes, keeping the same hue so the brand still feels consistent.
- Change the background instead — a darker button with white text.
- Increase size or weight to qualify as large text where the design allows.
- Add a scrim behind text over imagery.
- Don't rely on colour alone to convey meaning — add icons, labels or patterns.
Test it
Enter your text and background colours in the free Colour Contrast Checker. It shows the ratio, pass/fail for AA and AAA across normal text, large text and UI components, a live preview, and the nearest text colour that passes. Accepts HEX, rgb(), hsl() and names. For building the palette in the first place, use the Color Palette Generator and read how to choose a brand colour palette and colour formats explained.
Contrast isn't the whole story
Passing contrast doesn't make a site accessible. Keyboard navigation, visible focus, semantic headings, alt text, form labels, zoom and reflow, and motion preferences matter just as much. Accessibility law and procurement requirements vary by country, but they increasingly point at WCAG 2.1 or 2.2 level AA.
Build it accessible from the start
Retrofitting accessibility is far costlier than designing for it. Pyalm builds fast, accessible, search-ready websites and web apps — see website development or get in touch.