WCAG Contrast Checker

The 4.5:1 rule and when it applies

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background so people with low vision, colour-blindness, or those in bright glare conditions can still read your content reliably. This tool computes the exact contrast ratio between any two colours (ranging from 1:1 for identical colours to 21:1 for pure black on pure white) and tells you whether your pair passes WCAG 2.1 Level AA or AAA. It does this separately for normal text, large text, and UI components, using the W3C luminance formula without shortcuts.

Picking colours that pass

• Checking whether your brand colour on a white or coloured card meets accessibility standards before shipping.
• Picking button text or link colours that pass AA against a dark or brand-coloured background.
• Auditing a design system's colour tokens, one by one, before integrating them into code.
• Justifying a colour-change request to a stakeholder or designer with a concrete, objective pass/fail verdict.
• Testing chart elements, icons, and focus rings for sufficient contrast against their backgrounds.
• Verifying that hover, focus, and disabled states of interactive components still meet thresholds.

The luminance formula under the hood

• Enter or pick colours. Input hex codes, RGB, or click the colour pickers to choose your foreground (text/element) and background colours.
• We compute luminance. The tool converts each colour to relative luminance using the sRGB formula defined in WCAG 2.1 (not a simple average).
• Calculate the ratio. We find the ratio of the lighter colour's luminance to the darker one's, always giving you a number between 1 and 21.
• Compare to thresholds. We check your ratio against the three WCAG 2.1 requirements and show you pass or fail for AA and AAA at each text size category.

AA and AAA thresholds by element type

• Normal text (under 18pt or under 14pt bold): 4.5:1 for AA, 7:1 for AAA.
• Large text (18pt or larger, or 14pt bold or larger): 3:1 for AA, 4.5:1 for AAA.
• UI components and graphics (buttons, icons, focus rings, form borders, data visualisation elements): 3:1 for AA only. No AAA level defined for this category.

Traps between the spec and the screen

• Large text is larger than you think. 18pt is roughly 24px. 14pt bold is roughly 19px bold. Body copy at 16px does not qualify as large text — it still needs 4.5:1 to pass AA.
• Backgrounds matter. The ratio is computed between specific pixel colours. If your text sits over a photograph or gradient, measure against the actual average background colour at that location, not a generic one.
• 4.5:1 is a floor, not a goal. Comfortable reading, especially for body text and users with astigmatism, usually requires 7:1 or higher. Aim above the minimum.
• State changes count. If your button passes AA at rest but fails on :hover, :focus, or :active, that is a real accessibility bug. Test every state.
• Transparency complicates things. If your foreground colour has alpha blending, calculate against the actual rendered colour composited over the background, not the original hex value.
• WCAG 2.1 is the legal standard. APCA (Accessible Perceptual Contrast Algorithm), proposed for WCAG 3, uses different maths. Use this tool's WCAG 2.1 results when meeting EN 301 549, ADA, or AA conformance claims.

Walking through a check

The default #222222 text on a #FFFFFF background scores a contrast ratio of about 15.9:1 — past every threshold. The tool checks it against WCAG AA (4.5:1 for normal text, 3:1 for large) and AAA (7:1 / 4.5:1) and marks each Pass or Fail. Change the text to #999999 and the ratio falls to about 2.85:1, which now fails AA for body text. Hit Swap to flip foreground and background — the ratio is identical either way.

Large text, symmetric ratios, and APCA

What counts as "large" text? WCAG defines it as 18pt and up, or 14pt and up if bold. Large text only needs 3:1 at AA because thicker, taller letterforms stay legible at lower contrast than body copy.

Why is the ratio the same after I swap the colours? The formula is symmetric — (lighter + 0.05) / (darker + 0.05) — so the order of foreground and background never changes the number. Swap only changes which colour you're actually styling as the text.

If it passes 4.5:1, is my design accessible? Contrast is necessary, not sufficient. A pass says nothing about colour-blind-safe hue pairs, visible focus states, or text sitting over a busy photo. It clears one specific criterion, not accessibility as a whole.

Is this the current WCAG maths? Yes — it's the WCAG 2.x relative-luminance ratio that almost every legal and compliance target still cites. WCAG 3's APCA model computes contrast differently and is still in draft, so 2.x AA remains the number to hit today.

Dark mode and dynamic themes

If your site supports dark mode, every colour pair needs checking twice — once for the light theme and once for the dark theme. A text colour that passes AA on white may fail badly on a dark grey background. Test both directions before shipping a theme toggle, and pay extra attention to secondary text colours (captions, placeholders, disabled labels) that often sit right at the threshold.