What the ratio actually measures
A contrast ratio runs from 1:1 (identical colors) to 21:1 (black on white) and is computed from the relative luminance of each color — a brightness value weighted for human vision (green counts for ~72% of perceived brightness, blue only ~7%). That weighting is why pure green looks far brighter than pure blue despite both maxing one channel. The thresholds you’re checking against:
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥24px / 19px bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | — |
AA is the level most laws reference (ADA, the European Accessibility Act, Section 508). Full AAA across a whole site is rarely required and often impractical, but it’s worth targeting for critical reading content.
Passing the math isn’t the whole job
Contrast is necessary but not sufficient for readability. A pairing can clear 4.5:1 and still be hard to read because of thin font weights (use ≥400 for body text), small sizes (≥16px for body), or vibrating color combinations like saturated blue on black. Always meet the ratio and eyeball the result on a real screen — ideally more than one, since macOS and Windows render text antialiasing differently.
Handling transparency and brand colors
This checker evaluates opaque colors, so for semi-transparent text or backgrounds, composite the layers first: rgba(0,0,0,0.7) over white resolves to roughly rgb(77 77 77) — check that value. And when a brand color fails, don’t change the brand: reserve it for large text and decorative use (where 3:1 suffices), derive a darker or lighter variant for body text by shifting lightness in HSL while keeping the hue, and record the accessible variant as a design token so it’s reused consistently. The Color Converter helps you derive those compliant shades.