What the contrast ratio measures
The ratio compares the relative brightness of two colours, from 1:1 (identical) to 21:1 (black on white). It is the single number accessibility rules are built on, because it predicts quite well who can read a piece of text — including people with low vision, older eyes, or a phone in bright sunlight.
The thresholds
- 4.5:1 — AA for normal text. The level most organisations are required to meet.
- 3:1 — AA for large text (24px, or 18.66px bold), and for icons, borders and form controls.
- 7:1 — AAA for normal text, and 4.5:1 for large text.
- Logos and decorative text are exempt, as is text that is part of a photograph.
How to use the checker
- Type or pick the two colours. Hex, short hex and rgb() are all accepted.
- Read the ratio and the four badges underneath — the preview shows the same pair at real sizes.
- Press "Fix the text colour" to have the text colour moved just far enough to reach 4.5:1.
Where sites usually fail
- Grey placeholder text in form fields — often around 2:1.
- Light grey body text on white, a favourite of minimal designs.
- Coloured buttons with white labels: a mid-tone brand colour rarely reaches 4.5:1.
- Text sitting on a photo, where the contrast changes from one part of the image to the next.
Beyond the ratio
Passing the number is the floor, not the goal. Thin fonts at small sizes are hard to read even at 7:1, and pure black on pure white can feel harsh. Check your choices on a real phone outdoors — the test no formula replaces.
Frequently asked questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text or interface elements to meet WCAG AA. AAA asks for 7:1 and 4.5:1 respectively.
What counts as large text?
24px and above, or 18.66px and above if it is bold. Below that, the 4.5:1 rule applies.
Does the rule apply to disabled buttons and logos?
No. Disabled controls and logotypes are exempt under WCAG, though making them readable anyway is usually the better choice.