Colour contrast: the WCAG and RGAA ratios to meet
Light grey text on a white background is the most common accessibility error on the web. It hinders people with low vision, but also everyone using a phone in bright sunlight. Here are the ratios to meet, how they are calculated and how to fix them without redoing a brand palette.
The ratios to meet
| Element | Level AA | Level AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text: 24 px, or 18.5 px bold | 3:1 | 4.5:1 |
| UI components and graphics: field border, icon, focus | 3:1 | — |
The French RGAA uses the same thresholds in criteria 3.2 (text) and 3.3 (components and graphics). Logos, purely decorative text and disabled components have no threshold.
How the ratio is calculated
The ratio compares the relative luminance of the two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter one. It ranges from 1:1 (two identical colours) to 21:1 (black on white).
- #999999 on white: 2.85:1, not enough for text.
- #767676 on white: 4.54:1, the lightest grey that passes for body text.
- #595959 on white: 7:1, level AAA.
Common pitfalls
- Placeholder text in fields, often very light grey: it is text and must reach 4.5:1.
- Text over a photo or video: contrast varies from one spot to another.
- Hover and focus states: a button can pass at rest and fail on hover.
- Form field borders too faint to locate the field.
- Dark mode, tested less often than light mode.
- Information conveyed by colour alone: a field in error only turned red, a link only coloured.
Fixing without breaking the brand
- Darken the text colour slightly: a few points of lightness are often enough.
- Keep the brand colour for large headings and colour blocks, with a darker variant for text.
- Add a dark overlay or a solid background under text placed over an image.
- Define colours once, as CSS variables, to fix the whole site at once.
- Add an underline or an icon where colour alone carried the information.
Checking a website’s contrast
An automated test measures the contrast of every text on the page, on desktop and mobile, and lists failing elements with their colours. Ambiguous cases, such as text over an image or a gradient, need a visual check.
Frequently asked questions
- Does placeholder text need enough contrast?
- Yes. It is displayed text: it must reach 4.5:1. It is also better not to use it as the only label.
- Do logos count?
- No. Logos and text that is part of a brand name have no contrast requirement.
- What contrast does a focus indicator need?
- At least 3:1 against the surrounding colours, like any UI component.
- Does good contrast make a site accessible?
- No. It is one criterion out of 106 in the RGAA, but it affects almost every site and is quick to fix.
Test a page of your website
Further reading
- Contrast checkerThe ratio of two colours and the closest one that passes.
- Test a page’s accessibilityFree test on desktop and mobile, no account needed.
- Automated accessibility testing: what it finds and what it missesWhat a robot finds, what it misses and the checks to do by hand.
- RGAA vs WCAG: what’s the difference?WCAG sets the rules; the French RGAA is the method used to check them.