Color contrast and WCAG thresholds
If the contrast between text and its background is too low, people with low vision, colour vision deficiencies or a glare-filled phone screen can't read it. The Web Content Accessibility Guidelines (WCAG) put a number on this: the contrast ratio, which runs from 1:1 (identical colours) to 21:1 (black on white).
How the ratio is calculated
Each colour is converted to its relative luminance, a measure of perceived brightness from 0 (black) to 1 (white). The sRGB channels are linearised first, then weighted to match how sensitive the eye is to each one: green counts for about 72%, red 21% and blue 7%. The ratio is then:
(L1 + 0.05) / (L2 + 0.05)where L1 is the lighter colour. The order you enter the colours in doesn't change the result, which is why the swap button only changes the preview.
The WCAG thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | n/a |
Large text is defined as 18 point (24px) or 14 point bold (about 18.66px). The 3:1 rule for non-text content (success criterion 1.4.11) covers information needed to identify interface components and graphical objects. See the W3C text contrast guidancefor the definitions and exceptions. A passing color pair does not establish compliance for a whole page.
Fixing a colour that fails
The quickest fix is usually to darken the darker colour or lighten the lighter one while keeping the hue, so the palette still looks like your brand. The suggestion helper does exactly that: it walks the lightness up and down and stops at the first value that passes the level you picked. A ratio is never rounded up, so 4.49:1 is a fail for AA normal text even though it is close.
Limits of the ratio
The ratio ignores font weight, size beyond the large-text cut-off, and anti-aliasing, so thin fonts can still be hard to read at a passing ratio. It also handles very dark colour pairs poorly. Treat the result as a minimum and check the preview with your actual typeface.
