How the contrast ratio is calculated
WCAG 2.x defines contrast through relative luminance. Each 8-bit RGB channel is divided by 255, then linearized: values at or below 0.03928 are divided by 12.92, and larger values become ((c + 0.055) / 1.055)2.4. Luminance is the weighted sum L = 0.2126 R + 0.7152 G + 0.0722 B, which reflects how much more sensitive the eye is to green than to blue. The ratio is then (L1 + 0.05) / (L2 + 0.05), with L1 the lighter color. It ranges from 1:1 (identical colors) to 21:1 (black on white). The checker accepts 3- or 6-digit hex values and works out the ratio live.
WCAG thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means 18 pt (24 px) or bigger, or 14 pt (about 18.66 px) or bigger in bold. WCAG also asks for 3:1 on user-interface components such as input borders and icons that carry meaning (criterion 1.4.11), though this tool reports only the four text results.
Worked examples
These ratios were verified with the same formula the tool uses:
#1f2937on white: L = 0.0215 against 1.0, so (1.05) / (0.0715) = 14.68:1. It passes everything, including AAA.#767676on white: 4.54:1, the lightest neutral gray that still passes AA for body text.#777777on white: 4.48:1. One hex step lighter, and it fails AA for normal text.- White on
#3b82f6, a popular bright blue: 3.68:1. It fails AA for normal button text but passes for large text. - White on
#2563eb, a darker blue: 5.17:1. It passes AA for normal text.
Common mistakes and edge cases
- Rounding up. The tool shows up to two decimals, but the 4.5 threshold is exact. A true 4.497 displays as 4.5 yet is still a failure, so check the badge, not just the number.
- Placeholder and disabled text. Placeholders are still text and must meet 4.5:1. Inactive controls are exempt, but a placeholder that vanishes into a field is a common complaint.
- Text over images or gradients. The checker compares two flat colors. For a gradient, test the text against the worst-case point behind it.
- Color alone. Contrast does not replace non-color cues. A red error and a green success of equal luminance look identical to many color-blind users.
- Dark mode. Check both themes; a gray that passes on white often fails on dark stone.
To find replacement colors, build options with the color palette generator and convert between formats with the color converter.