How the WCAG ratio is calculated
Each channel is first linearised: values under 0.03928 are divided by 12.92, the rest go through ((v + 0.055) / 1.055)^2.4. That undoes the sRGB gamma curve so the numbers match physical light. Relative luminance is then 0.2126R + 0.7152G + 0.0722B — green dominates because the eye is most sensitive to it. The ratio is (L_light + 0.05) / (L_dark + 0.05), giving a scale from 1:1 for identical colours to 21:1 for black on white.
The hex to RGB converter handles the same job in a slightly different way.
What the thresholds mean
WCAG 2.1 level AA asks for 4.5:1 on normal text and 3:1 on large text (18pt, or 14pt bold). Level AAA raises those to 7:1 and 4.5:1. Icons, form borders and focus indicators fall under a separate 3:1 non-text rule. If a pairing fails, the quickest fix is usually to darken the foreground — try the tint and shade generator to find the nearest passing step of your brand colour.
When you need something similar but not identical, the colour palette generator is there.
What the ratio does not cover
Contrast is only one part of legibility. Very thin fonts, text over photographs and colour-only status cues can still fail real users at a passing ratio. Never rely on hue alone to carry meaning, and re-check anything you place over a gradient at both ends of the ramp.
Frequently asked questions
- What is the contrast of #767676 on white?
- 4.5:1 — exactly the WCAG AA minimum for normal body text, so it passes AA but fails AAA.
- What ratio do I need?
- 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for normal text at AAA.
- Does the order of the two colours matter?
- No. The formula always divides the lighter luminance by the darker, so swapping them gives the same ratio.
- Is grey on white ever safe?
- Only down to about #767676 on pure white. Anything lighter drops below 4.5:1 for body copy.
- Does a passing ratio help colour-blind readers?
- Partly — contrast and colour blindness are separate problems. A red and green pairing can hit 7:1 and still be indistinguishable to someone with deuteranopia, so never let hue alone carry meaning; add a label, icon or underline. Everything you type stays in your browser and is never uploaded.