Color contrast is the accessibility issue designers control most directly, and one of the most common reasons a site fails an audit. The WCAG color contrast requirements come down to two numbers: a 4.5:1 ratio for normal text and a 3:1 ratio for large text, icons, and interface components. Hit those and you have cleared one of the easiest failures to avoid.
This guide explains exactly when each threshold applies, how the ratio is actually calculated (it is not a brightness difference you can eyeball), and a fast workflow to test and fix failures in your existing palette without throwing out your brand colors. The same rules are the legal baseline in the EU: the European Accessibility Act points to WCAG 2.2 Level A and AA via EN 301 549, and contrast sits squarely inside it.
The two numbers that matter: 4.5:1 and 3:1
WCAG sets contrast thresholds under the Perceivable principle, the first of WCAG's four principles (Perceivable, Operable, Understandable, Robust). Two Level AA success criteria do the work:
- 1.4.3 Contrast (Minimum) — text and images of text need 4.5:1 against their background. This is the default for body copy, captions, labels, and links.
- 1.4.11 Non-text Contrast — user interface components and meaningful graphics need 3:1. This covers button borders, form field outlines, focus indicators, toggle states, chart segments, and icons that convey information.
The one exception inside 1.4.3 is large text, which only needs 3:1. Larger glyphs have thicker strokes, so they stay legible at lower contrast. "Large" has a precise definition that trips people up constantly, so it gets its own section below.
What is exempt: disabled (inactive) controls, pure decoration, logos and brand names, and text that is incidental in an image (like a street sign in a stock photo). Placeholder text is not exempt — if users read it, it must pass.
What counts as 'large text' (the 18pt / 14pt bold rule)
Large text qualifies for the easier 3:1 threshold when it is at least 18pt (24px) regular, or 14pt (18.66px) bold. The bold weight lowers the size bar because heavier strokes cover more pixels.
The catch for designers working in px: WCAG defines the boundary in points, and 1pt = 1.333px at standard density. So a 24px heading in a regular weight is large; a 23px one is not. A 19px bold subhead is large; an 18px bold one sits right on the line (14pt = 18.66px), so round up to be safe. When you are deciding whether a headline can use a softer gray, check the computed px size first — not how big it looks on your high-res display.
How the contrast ratio is actually calculated
A contrast ratio is not the difference between two colors — it is a *ratio* of their relative luminance, running from 1:1 (identical) up to 21:1 (pure black on pure white). The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 the darker one's.
Relative luminance is not simple brightness. Each sRGB channel is linearized (gamma-corrected) and then weighted: roughly 0.2126 red, 0.7152 green, 0.0722 blue. Green carries by far the most perceptual weight, blue the least. That is why two colors with similar HSL lightness can produce very different ratios, and why a vivid blue link on white often fails while an equally 'bright'-looking green passes.
Two practical consequences. First, opacity lies: text at 60% opacity over a textured or colored background has an effective color you cannot read off your swatches, so always test the rendered result. Second, hue does not earn you contrast — saturating a color does little for luminance. To fix a failure you almost always adjust lightness, not saturation.
How to test contrast
- Design tools — Figma, Sketch, and Adobe XD have built-in or plugin contrast checkers that read your selected layers. Use them while choosing tokens, not as an afterthought.
- Browser DevTools — Chrome and Firefox show the ratio (and an AA/AAA pass mark) in the color picker of the Styles panel, computed against the actual rendered background. This catches problems opacity and overlapping layers hide.
- Standalone checkers — paste two hex values into any WCAG contrast tool to get the ratio and which thresholds it clears.
- Whole-page scans — manual checks miss states and edge cases. Run a free accessibility scan to find contrast failures across a live page at once, then work through the list. Pair it with the accessibility checklist so contrast does not become the only thing you fix.
Test the real states, not just the resting one: hover, focus, visited links, disabled-but-still-readable text, placeholder copy, and text sitting on photos or gradients. Focus indicators in particular fall under the 3:1 rule (1.4.11) and are easy to forget.
How to fix failures without wrecking the design
Because luminance is driven by lightness, the quickest fix is to darken a foreground (or lighten a background) until it passes, keeping the hue you want. A few targeted moves:
- Body text: that fashionable light gray (#999 on white is only about 2.85:1) almost never passes. #767676 hits exactly 4.5:1 on white — treat it as your lightest usable gray for normal text.
- Brand-color buttons: if white label text on your brand fill fails, darken the fill by one step in your scale rather than switching to black text. Keep the brand recognizable while clearing 4.5:1.
- Links and accents: saturated mid-blues often miss on white. Drop the lightness a notch; you usually recover contrast with a barely perceptible hue shift.
- Borders and inputs: a 1px hairline border at #E5E5E5 won't reach 3:1. Darken it, or pair a lighter border with a clear focus state that does pass.
- Don't rely on color alone: error states, required fields, and chart legends need a non-color cue (icon, label, pattern) too — a separate WCAG requirement that contrast fixes don't cover.
Bake the passing values into your design tokens and component library once, and every screen inherits compliant contrast by default. That is far cheaper than reworking colors page by page after an audit. For the underlying success criteria in plain English, see the WCAG 2.2 reference and the dedicated color contrast requirements guide.