Low-contrast text is one of the most common accessibility failures on the web. Pale grey on white looks elegant in a design mock-up, but it’s hard to read for people with low vision, colour vision deficiency, older eyes, or anyone using a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) give measurable thresholds, so contrast is one of the few accessibility checks you can verify with a number. Test any pair of colours in our contrast checker.
The WCAG contrast requirements
The current version is WCAG 2.2 (a W3C Recommendation since October 2023); the contrast rules are the same as in WCAG 2.1.
| Success criterion | Level | Applies to | Minimum ratio |
|---|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum) | AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced) | AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast | AA | UI components and graphical objects | 3:1 |
Large text means at least 18 point (24 CSS px) regular, or 14 point (about 18.66 CSS px) bold.
Non-text contrast covers things users need to see to operate the page: input borders, checkbox outlines, icon buttons, focus indicators, and the parts of charts that carry meaning.
What is exempt
- Text in logos and brand names.
- Disabled controls.
- Purely decorative text or images.
- Text that is part of a photo with significant other content.
Placeholder text in form fields is not exempt and often fails.
How the contrast ratio is calculated
The ratio compares the relative luminance (perceived brightness) of two colours:
ratio = (L1 + 0.05) / (L2 + 0.05)where L1 is the lighter colour’s luminance and L2 the darker’s. Luminance runs from 0 (black) to 1 (white), so ratios range from 1:1 (identical colours) to 21:1 (black on white).
Relative luminance is calculated from the sRGB values: each channel is converted to linear light, then weighted as 0.2126 × R + 0.7152 × G + 0.0722 × B. Green dominates because our eyes are most sensitive to it, which is why yellow looks so much lighter than blue at the same saturation.
Examples on a white background
| Text colour | Ratio on #FFFFFF | Normal text AA | AAA |
|---|---|---|---|
| #000000 (black) | 21:1 | Pass | Pass |
| #595959 | 7.0:1 | Pass | Pass |
| #0066CC (blue) | 5.57:1 | Pass | Fail |
| #767676 | 4.54:1 | Pass | Fail |
| #777777 | 4.48:1 | Fail | Fail |
| #FF8800 (orange) | 2.39:1 | Fail | Fail |
White text on #2563EB (a common bright blue) has a ratio of about 5.17:1, so it passes AA for button labels. White on bright orange or yellow almost never passes.
Colour formats: HEX, RGB and HSL
Contrast checkers and design tools accept several formats. They describe the same colours:
| Format | Example | Notes |
|---|---|---|
| HEX | #0066CC |
Two hex digits each for red, green, blue |
| RGB | rgb(0 102 204) |
0–255 per channel |
| HSL | hsl(210 100% 40%) |
Hue (0–360°), saturation, lightness |
HSL is the most useful for fixing contrast: keep the hue and saturation, and lower the lightness until the ratio passes. That keeps the brand colour recognisable. Our colour converter converts between all three formats.
Note that HSL lightness doesn’t correspond directly to perceived luminance. A yellow and a blue with the same HSL lightness have very different contrast ratios, so always check the ratio rather than relying on the lightness value. Newer spaces such as OKLCH are designed to be more perceptually uniform.
Building an accessible palette
- Start with text. Choose your body text and background first; aim for 7:1 or more for long reading.
- Create tints and shades of each brand colour (e.g. 50 to 900 steps) and mark which ones pass 4.5:1 on white and on your dark background.
- Define pairs, not colours. Document “primary-700 on white” as approved for text, “primary-500” for large headings or icons only.
- Check every state: hover, focus, visited links, error messages, disabled.
- Check dark mode separately. Pure white on pure black can cause halation for some readers; off-white on very dark grey is often more comfortable while still passing.
- Don’t rely on colour alone. Links in body text need an underline or other non-colour cue; errors need an icon or text, not just red.
Text on images and gradients
Contrast must be met against the actual background behind the text. For text on photos:
- Add a semi-transparent dark overlay or gradient behind the text.
- Use a solid text background panel.
- Check the lightest part of the image under the text.
Legal context
- UK: public sector websites and apps must meet WCAG 2.2 AA under the Public Sector Bodies Accessibility Regulations. The Equality Act 2010 also applies to service providers generally.
- EU: the European Accessibility Act has applied since 28 June 2025 to many consumer products and services, including e-commerce and banking, using the harmonised standard EN 301 549 (aligned with WCAG 2.1 AA).
- US: the Department of Justice’s ADA Title II rule requires state and local governments to meet WCAG 2.1 AA; in April 2026 the compliance dates were extended to April 2027 (larger entities) and April 2028 (smaller entities). Private businesses face ADA lawsuits in which WCAG is the usual benchmark.
This is a summary, not legal advice.
Common mistakes
- Light grey placeholder and helper text.
- Brand colours used for small text without checking.
- Thin or light font weights, which reduce perceived contrast even when the ratio passes.
- Focus outlines removed or made too faint.
- Checking only the default state, not hover or visited.
Checklist
- Normal text ≥ 4.5:1, large text ≥ 3:1 (AA).
- UI components, focus indicators and meaningful graphics ≥ 3:1.
- Aim for 7:1 for body text where possible (AAA).
- Fix failures by adjusting lightness, keeping hue.
- Test dark mode, hover, focus and text on images.
- Pair colour with another cue for links and errors.
For a related front-end topic, see our favicon sizes guide.