Color Contrast Checker

What this tool does

Color Contrast Checker is a free in-browser WCAG 2.x validator. Type a foreground and a background color — any of HEX, RGB, HSL, HSV — and instantly see the contrast ratio (e.g. 4.51:1) along with pass-or-fail badges for the four WCAG levels: AA normal (4.5:1), AA large text (3:1), AAA normal (7:1), and AAA large (4.5:1). A live preview shows actual rendered text in both sizes so you can verify the ratio visually, not just numerically. All math runs locally; nothing is uploaded.

How to use

1. Enter the foreground (text) color in the top input, in any of HEX / RGB / HSL / HSV.
2. Enter the background color below it. The contrast ratio updates instantly.
3. Read the four WCAG badges. Green = passes that level; red = fails. The live preview shows what the pair looks like in real text.

Who it's for

• Designers Validate every text/background pair in a mockup against WCAG AA before handing off to engineering. Catch failures before they ship.
• Front-end engineers Sanity-check CSS color pairs at component review time. The ratio tells you immediately whether a tweak still passes.
• Accessibility specialists Audit a site's color palette one pair at a time, or copy values from a screenshot when DevTools is unavailable.
• Product managers Verify a designer's color choice meets the accessibility standard your company committed to in the marketing copy.
• Educators Demonstrate WCAG contrast requirements in a workshop or course — the live preview makes the abstract rules tangible.

What you get

• Four-grade output — AA normal, AA large, AAA normal, AAA large, each with pass/fail badge.
• Live text preview — actual rendered text in both 16px and 24px on the actual background so you can see what the ratio means.
• Any input format — HEX, RGB, HSL, HSV; the parser handles whichever you have.
• Swap button — flip foreground and background in one click to test the inverse pair.
• Shareable URL — encode both colors so a teammate sees the same contrast result.

WCAG accuracy

Contrast ratios follow the official WCAG 2.x formula: (L1 + 0.05) / (L2 + 0.05) where L1/L2 are relative luminances. The luminance calculation uses the standard linearized sRGB → relative luminance formula from W3C Accessibility Guidelines, identical to what Lighthouse and axe DevTools use. Results match WebAIM Contrast Checker to the third decimal.

Frequently asked questions

What is a good WCAG contrast ratio?

WCAG 2.x defines four thresholds. AA (the legal-minimum standard most regulations require): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (the enhanced standard): 7:1 for normal, 4.5:1 for large. Aim for AA at minimum; AAA when accessibility is a primary product value (medical, government, education).

What counts as 'large text'?

Per WCAG, text is large when it's at least 18pt (24px at 96 DPI) regular weight, or at least 14pt (18.5px) bold weight. Anything smaller is 'normal text' and held to the stricter threshold. Headings usually qualify as large; body copy doesn't.

Why are my numbers slightly different from another contrast checker?

If they match WebAIM / Lighthouse / axe to the third decimal, you're getting the canonical WCAG calculation. Other tools may use rounding shortcuts (e.g. integer luminance) that drift in the first or second decimal — those are bugs, not legitimate alternatives.

Does this account for color blindness?

Contrast ratio alone doesn't model color blindness — two colors with great contrast can still be hard to distinguish for protanopia or deuteranopia. Pair this checker with a color-blindness simulator (Stark, Coblis, or Chrome DevTools' rendering panel) for full accessibility coverage.

What about non-text contrast (icons, UI components)?

WCAG 2.1 added a separate 3:1 minimum for graphical objects and user-interface components (button borders, icon edges, etc.). Use the same checker — the ratio is the same calculation. Just remember the threshold is 3:1 across the board for non-text elements.