Contrast ratio is a number from 1:1 (no difference, such as white on white) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) use it to decide whether text and interface parts are readable enough.
The numbers to remember
| Level | Normal text | Large text | UI parts and icons |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | n/a |
AA is the level most laws, procurement rules and accessibility policies point to. "Large text" means at least 18 point (about 24 px) regular, or 14 point (about 18.66 px) bold. "UI parts" means things like input borders, focus rings and meaningful icons, which should reach 3:1 against their neighbours.
How the ratio is calculated
Each colour is converted to a relative luminance between 0 (black) and 1 (white), using a formula that weights green most, red less and blue least, after undoing the screen's gamma curve. The ratio is then:
(lighter + 0.05) / (darker + 0.05)
You do not need to calculate it by hand. The tool does it for any pair of colours, and also accepts HEX, rgb() and hsl() values.
A famous near miss
Mid-grey #777777 on white has a ratio of about 4.48:1. That looks like 4.5, but the requirement is a minimum, so it fails AA for normal text. Move one step darker to #767676 and it passes at about 4.54:1. The checker shows the truncated value for this reason, rather than rounding up to a pass it has not earned.
Why it matters beyond compliance
Low contrast hurts people with low vision, colour-vision differences and ageing eyes, but also anyone reading a phone in sunlight or on a cheap screen. Grey placeholder text and pale buttons are the usual offenders.
How to fix a failing pair
- Darken the text or lighten the background, not both a little. A single decisive change keeps the design cleaner.
- Keep the hue, change the lightness. A darker version of your brand blue is usually acceptable, and the checker suggests the closest colour that reaches your target.
- For text over images, add a solid or semi-transparent panel behind the text, and check the contrast against the panel.
- Do not rely on colour alone. Add underlines to links and icons or text to errors.
What the number does not tell you
Passing the ratio does not guarantee comfortable reading. Very thin fonts, tiny sizes, or tightly packed text can still be hard to read at 7:1. Treat the ratio as a minimum, then look at the page at real size.