Light grey text on a white background looks elegant in a design file and becomes unreadable on a phone in sunlight. The WCAG contrast ratio turns "is this readable?" into a number you can test — and many accessibility laws and audits use it.
What the contrast ratio is
The ratio compares the relative luminance (perceived brightness) of two colours. It runs from 1:1 — identical colours — to 21:1, black on white. The higher the number, the easier the text is to read, especially for people with low vision or colour-vision deficiency.
The WCAG thresholds
| Check | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Icons, borders, UI controls | 3:1 | — |
Large text means at least 18pt (24px), or 14pt (about 18.66px) bold. Most body text is "normal", so 4.5:1 is the number to remember.
The thresholds are exact
A ratio of 4.49:1 fails AA — there's no rounding up. A classic example is grey on white: #777777 on white is about 4.48:1 and fails, while #767676 is about 4.54:1 and passes. The difference is invisible to the eye but decides the audit.
A few more reference points on a white background:
- #595959 — about 7:1, passes AAA for normal text
- #94A3B8 (a popular light slate) — about 2.56:1, fails even for large text
- White text on #2563EB (a typical blue button) — about 5.17:1, passes AA
How to check your colours
- Open the Color Contrast Checker.
- Enter the text colour and background colour as hex codes, or pick them with the colour pickers.
- Read the ratio and the pass/fail results for normal text, large text and UI elements at AA and AAA.
- Check the live preview of normal text, large text and a button in your colours.
- If AA fails, apply the suggested closest text colour that reaches 4.5:1 — or use Swap colours to test the reverse.
The displayed ratio is rounded down, so a near-miss never looks like a pass.
Fixing a colour that fails
- Darken the text, not the whole palette. A slightly darker shade of the same hue often passes while keeping the brand feel.
- Change the background if the text colour is fixed by branding.
- Make it large text. A heading at 24px only needs 3:1.
- Watch placeholder and disabled text — they're the most common failures.
FAQ
What about semi-transparent colours? Check the colour as it actually appears: blend it with the background first and test the result.
Is contrast enough for accessibility? No. Don't use colour alone to convey meaning — add text, icons or patterns so colour-blind users get the same information.
Do I need AAA? Most standards and laws reference AA. Aim for AAA on long reading content where you can.
Try it now
Test your palette with the free Color Contrast Checker. Need to convert colour formats first? Use the Color Converter.