How the ratio is worked out
The contrast ratio compares how much light each colour appears to give off, a quantity WCAG calls relative luminance. Each RGB channel is first scaled to the 0 to 1 range and linearised, undoing the gamma curve screens apply, and the three channels are then weighted by how sensitive human eyes are to them: green counts for about 71% of perceived brightness, red about 21% and blue only about 7%. That single luminance number per colour feeds one small formula:
The 0.05 terms account for ambient light reflecting off a real screen, and they are why the scale tops out at 21:1 for black on white, (1 + 0.05) ÷ (0 + 0.05), rather than infinity. The order of the colours makes no difference: dark text on a light background scores exactly the same as the reverse. This tool implements the full WCAG calculation, including the linearisation step that many quick approximations skip, so its ratios match what accessibility auditors will measure.
What the numbers mean in practice
WCAG sets two levels. AA, the level most organisations target and the one accessibility regulations usually point to, requires 4.5:1 for normal text and 3:1 for large text, meaning at least 18 point (about 24 pixels), or 14 point bold. AAA raises those targets to 7:1 and 4.5:1. Some real pairs to calibrate your eye:
Fixing a failing pair
When a combination falls short, resist the urge to change the hue. Contrast is almost entirely a lightness problem, so darken the text or lighten the background and the colour's character survives. Because green dominates perceived brightness, colours that lean green need to be darkened more than you might expect before white text works on them, while deep blues pass with white text surprisingly easily. If a brand colour sits in the awkward middle band where neither black nor white text passes, the honest fixes are a darker tint of the brand colour for backgrounds or restricting that colour to large headings, where 3:1 will do.
Two habits keep you out of trouble. First, check text over the lightest and darkest parts of any image or gradient it sits on, not the average, because the ratio only protects readers if it holds everywhere. Second, never let colour be the only signal: links need underlines and error states need icons or wording, so the design still works for readers who cannot distinguish the hues at all. Contrast is one strand of the Web Content Accessibility Guidelines rather than the whole story, and the full text at w3.org is the place to check edge cases such as text over images, logos and disabled controls, which have their own rules.
Frequently asked questions
What contrast ratio does my text need?
For WCAG level AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For the stricter AAA level, the targets rise to 7:1 for normal text and 4.5:1 for large text. Ratios run from 1:1 (identical colours) to 21:1 (black on white).
What counts as large text?
Text of at least 18 point, which is about 24 CSS pixels, or bold text of at least 14 point, about 18.5 pixels. Everything smaller is normal text and needs the higher ratio. Headings often qualify as large; body copy almost never does.
What is the difference between AA and AAA?
They are conformance levels in the Web Content Accessibility Guidelines. AA is the level most organisations aim for and the one usually referenced in accessibility regulations. AAA is stricter and helps more people, particularly those with low vision, but is not always achievable across an entire site.
Why does my light grey text keep failing?
Because its luminance is too close to a white background. On pure white, #767676 is the lightest grey that still reaches 4.5:1, and popular greys like #999999 fall well short. Darkening the text a little usually fixes it without changing the design's character.
Does contrast only apply to text?
No. WCAG also requires a ratio of at least 3:1 for user interface components and meaningful graphics at level AA, covering things like input borders, icons and chart lines. Purely decorative elements and disabled controls are exempt.