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.

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.

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.

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.

WCAG Contrast Checker

Check the contrast ratio between two colors. Pass/fail verdict for WCAG AA and AAA at every text size.

Foreground

Background

Result

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

What is this for?

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.

When to use it

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.

How it works

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.

Contrast thresholds

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.

Common gotchas

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.