What the Contrast Ratio Means
The WCAG contrast ratio measures how distinguishable two colours are, on a scale from 1 (identical, e.g. white on white) to 21 (black on white). It is computed from the relative luminance of each colour: (L1 + 0.05) / (L2 + 0.05), where luminance itself is a weighted sum of gamma-corrected red, green and blue. The formula deliberately mimics human vision — we are most sensitive to green, least to blue — which is why a bright yellow on white can fail while a dark blue passes easily.
Two thresholds matter. AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. AA is the legal and practical standard — referenced by accessibility laws worldwide — while AAA is the gold standard for critical content. Non-text elements like icons and form borders need 3:1 under WCAG 2.1.
Why 4.5:1 Is the Magic Number
The 4.5:1 threshold was calibrated against real human vision: it roughly compensates for the contrast loss experienced by someone with 20/40 vision, which is common from about age 40 onward. In other words, AA is not about edge cases — it is about your users as they age, use dimmed phone screens in sunlight, or view your site on a cheap low-contrast display. Text that scores 3:1 might look fine to a designer on a calibrated monitor and be genuinely unreadable to a large slice of the audience.
Large text gets a break — but not a free pass
Large text (18pt+/14pt bold+) only needs 3:1 for AA because thicker strokes remain legible at lower contrast. The toggle in the calculator switches the pass/fail badges between the two thresholds so you can check display headlines honestly. But beware: the large-text allowance was designed for headings, not for squeezing body copy through at 3:1 by bumping it to 18px.
Colours That Fool Designers
Certain combinations consistently surprise people. Medium greys on white — #777 on white is about 4.48:1, agonisingly just under AA — are the classic failure. Brand colours are the next: that vibrant orange or cheerful light blue that looks great as a logo often collapses to 2:1 as text. And yellow (#FFD60A, this tool's own accent) on white fails badly, which is exactly why dark themes pair it with near-black text.
The fix is almost always to darken the text colour or lighten the background, not to tweak both randomly. The suggestion engine in the calculator does exactly this: it walks the failing colour toward black or white in small steps until the pair passes, giving you the closest passing colour to your original choice.
A quick reference of common pairs
- Black on white: 21:1 — AAA, the maximum.
- #777777 on white: ~4.48:1 — fails AA for normal text by a hair.
- #767676 on white: ~4.54:1 — the lightest grey that passes AA.
- White on #0E7C5B (deep green): ~5.9:1 — passes AA.
- #FFD60A on #14171C: ~15:1 — AAA, why yellow-on-black works.
- Same colour on itself: 1:1 — always fails.
Testing Whole Palettes, Not Just Pairs
Real interfaces use colours in combination: body text on background, muted text on background, accent text on surface, accent ink on accent fills. A palette can pass its headline pair and still fail everywhere else — muted helper text is the usual casualty, since designers lighten it until it looks elegant and unreadable. The Compare tab in the calculator exists for this: load every text/background pair your design actually uses and check them all at once.
Pay special attention to these frequently-forgotten pairs: placeholder text in inputs, disabled button labels, error text (red on white often fails — dark reds like #B3261E pass, bright reds do not), link colour on body background, and text on coloured badges or chips.
Beyond the Ratio: What Contrast Checkers Miss
- Font weight and size: the ratio ignores both except via the large-text threshold. Thin 12px text at 4.5:1 is technically passing but practically harsh.
- Backgrounds that are not flat: text over images, gradients or video needs a scrim or overlay; the ratio of text to the average background colour is meaningless.
- Dark mode inversions: flipping a palette often breaks pairs that passed in light mode — retest every pair after theming.
- Focus indicators: keyboard focus rings need 3:1 against adjacent colours too, and they are the most commonly failing element in audits.
- Colour alone: contrast is necessary but not sufficient — never encode meaning (like errors) in colour without a text or icon cue.
Designing with Contrast from the Start
The cheapest workflow is to define your palette as tested pairs, not as loose colours. Pick background, then choose text colours that pass against it; pick accent, then choose the ink that sits on it. Document each pair with its ratio in your design tokens. When marketing asks for the light-grey body text, you can answer with a number instead of an opinion. Accessibility stops being a retrofit and becomes a property of the system.
How This Calculator Helps
ContrastLab is a workbench, not a single input: the Calculate tab gives you the live ratio with AA/AAA badges and a large-text toggle, the Compare tab stress-tests your whole palette at once, and the fix suggestions hand you the nearest passing colour when a pair fails. Check early, check every pair, ship text everyone can read.
Contrast in Dark Mode
Dark themes invert the contrast challenge: instead of dark text failing on light backgrounds, light text fails on dark ones. Pure white on near-black passes easily, but designers rarely use pure white — they mute it for aesthetics, and that is where failures creep in. Muted text on dark backgrounds needs the same 4.5:1 discipline: #B8C0CC on #14171C scores about 9.8:1 and passes comfortably, but push the grey lighter or the background lighter and pairs start failing. Always retest every pair after theming — a palette that passes in light mode frequently breaks in dark mode, especially accent colours. This very tool is dark-themed, and every colour in it was checked with the calculator it contains.
Building Contrast into Your Workflow
Manual checking does not scale; automate it. Lint colour tokens in CI with a contrast check, add axe or Lighthouse accessibility audits to your pipeline, and document each design token pair with its ratio so designers choose from pre-approved combinations. When adding a new colour, the workflow is: pick the colour, run it against every background it will sit on, and only then add it to the system. Teams that do this never have contrast regressions, because an untested pair simply cannot ship.
Focus Indicators, Borders and Non-Text Contrast
WCAG 2.1 added a 3:1 requirement for non-text contrast: the visual elements users need to operate the interface — input borders, focus rings, icons, chart lines. These fail constantly because they are designed to be subtle. A light-grey input border on white is often near 1.5:1; keyboard focus rings in pale blue can vanish against white. Test these pairs in the Compare tab just like text: sample the border colour against the background, and the focus colour against adjacent colours. An interface that is readable but unusable by keyboard is only half accessible.
Test with Real Users, Not Just Tools
Automated contrast checks catch formula failures; they cannot catch perception failures. A ratio-passing combination can still feel harsh at small sizes or in bright sunlight, and colour-blind users may struggle with pairs that score well on luminance alone. Complement the numbers with quick usability tests: ask someone over forty to read your body text on a dimmed phone outdoors, and run your palette through a colour-blindness simulator. The calculator gives you the objective floor — human testing tells you whether that floor is comfortable to stand on, and the two together are what accessible design actually requires.