WCAG Contrast Checker
Understand WCAG Contrast Checker
Calculates the contrast ratio between a text color and a background color and reports whether it meets WCAG AA and AAA.
How it works
Each color is first converted to relative luminance. The three channels are normalized to 0–1 and linearized — divided by 12.92 below the 0.03928 threshold, otherwise raised through ((c + 0.055) / 1.055)^2.4 — then weighted 0.2126 red, 0.7152 green, 0.0722 blue, because the eye is far more sensitive to green than to blue. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), which runs from 1:1 for identical colors up to 21:1 for black on white. The 0.05 term represents ambient screen flare and is what stops the formula dividing by zero on pure black.
When to use it
- Checking body text against its background before a design system color is locked in
- Finding the darkest gray that still passes on white — #767676 is about 4.54:1, and one shade lighter fails AA
- Auditing placeholder text, disabled states, and helper text, which are where contrast failures usually hide
- Providing evidence for an accessibility audit under WCAG 2.1, EN 301 549, or Section 508
Watch out for
- The threshold depends on the text, not the color. AA needs 4.5:1 for body text but only 3:1 for large text — 18pt (24px), or 14pt (18.66px) when bold. The tool reports both; you choose which one applies.
- Non-text elements have their own rule. Icons, focus rings, input borders, and chart segments need 3:1 under WCAG 1.4.11, which is easy to miss when you are only checking paragraphs.
- Semi-transparent colors cannot be measured directly. A color with alpha must be composited against what is actually behind it first, and the result depends on that backdrop.
- Text over a photograph or a gradient has no single ratio. Test the worst region, or add a solid scrim behind the text.
Not the right tool for: Proving that a palette is usable by people with color vision deficiency. Contrast ratio is a luminance measure — two colors can pass at 7:1 and still be indistinguishable to a deuteranope, so never encode meaning in hue alone.
Frequently Asked Questions
How to check color contrast for accessibility?
Enter your foreground (text) color and background color in HEX or RGB. The tool calculates the contrast ratio using the WCAG 2.1 relative luminance formula and shows a pass/fail result for AA (4.5:1 for normal text) and AAA (7:1). Adjust colors until you pass.
Why is color contrast important for accessibility?
Low contrast makes text hard to read for users with low vision, color blindness, or in bright environments. About 8% of men have some form of color vision deficiency. WCAG contrast requirements ensure content is readable across this wide range of visual abilities and conditions.
What is the minimum contrast ratio for WCAG AA?
WCAG 2.1 AA requires 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Non-text UI components (icons, input borders) need 3:1. Level AAA raises these to 7:1 and 4.5:1. Most legal accessibility standards require AA.
How to Use WCAG Contrast Checker
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.