🌗 Contrast Checker for WCAG Color Accessibility

What is the Color Contrast Checker?

A contrast checker answers one practical question: can people actually read this text? Color contrast is the difference in perceived brightness between text and its background. The Web Content Accessibility Guidelines (WCAG) express it as a ratio that ranges from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white). The higher the ratio, the easier the text is to read, especially for people with low vision or color vision deficiencies. Good contrast also helps everyone reading in bright sunlight, on a cheap screen, or while glancing quickly at a phone.

The ratio a contrast checker reports is not a simple comparison of hex values. WCAG first converts each color to its relative luminance, a number that models how bright the human eye perceives it. Each red, green, and blue channel is scaled to a 0 to 1 range, linearized with a gamma curve, and then weighted, with green counting most and blue least because the eye is most sensitive to green. The contrast ratio is then (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 the darker one. The 0.05 term accounts for ambient screen glare, which is why even black on white tops out at 21:1 rather than infinity.

WCAG sets two thresholds that this contrast checker evaluates for you. Level AA, the common legal and practical baseline, requires 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter at 7:1 for normal and 4.5:1 for large text. Large text is defined as 18pt (about 24px) and larger, or 14pt (about 18.66px) bold and larger, since bigger glyphs stay legible at lower contrast. A separate rule, WCAG 1.4.11, requires 3:1 for meaningful non-text elements such as icons, input borders, and focus rings. Logos and purely decorative text are exempt from all of these.

A common point of confusion that a contrast checker clears up is that contrast is symmetric: swapping the text and background colors gives the exact same ratio, because the formula always puts the lighter luminance on top. So the tool tells you whether a pair is readable, not which color should be the text. That design choice is yours, and the live preview helps you decide which arrangement looks right. This matters because contrast is one of the most cited issues in real accessibility audits, and automated scanners like Lighthouse and axe flag it aggressively.

Why accessibility standards insist on this rather than leaving it to taste: contrast failures disproportionately affect an aging audience. Roughly one in twelve men has some form of color vision deficiency, and low-contrast gray-on-gray interfaces are effectively unreadable for many older users whose lenses transmit less light. A good contrast checker turns a subjective argument about whether text looks fine into a single measured number that a whole team, and any legal reviewer, can agree on. Using the contrast checker early in the design process is far cheaper than retrofitting an entire color system after an audit fails.

Finally, remember that passing a contrast checker is necessary but not sufficient for readable text. WCAG contrast ignores font weight, letter spacing, anti-aliasing, and text over busy photographs, all of which affect real legibility. Treat the ratio as a hard floor, not a ceiling: pairs that clear AA comfortably (say 7:1 or better) give you headroom for hover states, translucency, and imperfect displays. The contrast checker gives you the objective measurement, and your judgment supplies the rest.

When to use it

• Checking whether your website body text meets WCAG AA before launch or an accessibility audit.
• Choosing a button text color that stays legible against a brand background color.
• Validating a design system palette so every text-on-surface pairing passes a known threshold.
• Fixing a specific contrast failure flagged by Lighthouse, axe, or a manual accessibility review.
• Verifying that icons, input borders, and focus rings meet the 3:1 non-text UI requirement.
• Comparing candidate link and hover colors so states stay readable, not just the default text.

How to use the Color Contrast Checker

1. Enter the foreground (text) color as a hex value, or use the color picker.
2. Enter the background color the same way.
3. Read the contrast ratio shown at the top of the results.
4. Check the AA and AAA pass or fail badges for normal and large text.
5. If a pairing fails, darken the text or lighten the background and recheck until it passes.

Formula & method

Worked examples

WCAG contrast ratio requirements by level and text size

What counts as "large text" under WCAG

Common gray-on-white pairings and where they pass

Common mistakes to avoid

• Comparing hex numbers instead of luminance. Contrast is not the numeric gap between hex codes. Two colors can have similar hex values but very different perceived brightness. Always use the luminance-based ratio, which is what this contrast checker computes.
• Assuming all text needs 4.5:1. Large text only needs 3:1 for AA. Headings and big labels can use lower contrast than body copy, which gives more design freedom without failing the guideline.
• Forgetting hover, focus, and disabled states. A pairing that passes at rest can fail when a link turns a lighter shade on hover or when placeholder text is dimmed. Check every state with the contrast checker, not just the default one.
• Ignoring contrast on icons and form borders. WCAG 1.4.11 requires 3:1 for meaningful non-text elements like icons, input outlines, and focus rings, not just text. A pretty but faint border can still be a failure.
• Testing text over an image with a single color. Photos and gradients have many luminance values. A contrast checker only measures two flat colors, so add a solid overlay or text shadow and test against the lightest patch behind the text.
• Treating a bare pass as safe. A ratio of exactly 4.5:1 has no margin for cheap screens, sunlight, or anti-aliasing. Aim comfortably above the threshold, ideally 7:1 for body text, so real-world conditions do not push it into failure.

Glossary

Contrast ratio

A number from 1:1 to 21:1 describing the luminance difference between two colors. Higher means more readable.

Relative luminance

A 0 to 1 value modeling how bright the human eye perceives a color, after gamma correction and channel weighting.

WCAG

Web Content Accessibility Guidelines, the international standard for making web content usable by people with disabilities.

Level AA

The mid tier of WCAG conformance, widely used as the legal and practical baseline for contrast.

Level AAA

The enhanced tier of WCAG conformance, requiring 7:1 for normal text and 4.5:1 for large text.

Large text

Text at 18pt and up, or 14pt and up if bold. It qualifies for the lower 3:1 (AA) contrast threshold.

Gamma correction

The nonlinear curve applied to each color channel so stored values match how displays emit and eyes perceive light.

Non-text contrast

WCAG 1.4.11, which requires a 3:1 ratio for meaningful graphics and UI parts like icons, borders, and focus indicators.

Frequently asked questions

Sources

• Understanding Success Criterion 1.4.3: Contrast (Minimum) , W3C Web Accessibility Initiative (2023)
• Relative luminance and contrast ratio definitions , W3C WCAG 2.1 Recommendation (2023)