Color Contrast Checker

1. 01Enter a text colorPick a color or type a HEX code for your text.
2. 02Enter a background colorPick a color or type a HEX code for the background it sits on.
3. 03Read the resultThe exact contrast ratio and AA/AAA pass or fail results for normal and large text appear instantly.

• Checking a specific design color pairBefore finalizing a text and background color combination, confirm it meets the accessibility contrast level you are targeting.
• Choosing between two similar shadesCompare the exact ratio of two candidate colors to see which one clears the threshold you need.
• Documenting accessibility decisionsGet the precise numeric ratio to reference in a design system or accessibility audit note.

• Black text on white#000000 on #FFFFFF has a contrast ratio of 21:1 — the maximum possible — and passes every level.
• A mid-gray that just passes AA#767676 on white has a ratio of about 4.54:1 — it passes AA for normal text, but falls short of the 7:1 needed for AAA normal text.
• A lighter gray that only works as large text#949494 on white has a ratio of about 3.03:1 — it passes AA for large text (which only needs 3:1), but fails AA for normal text (which needs 4.5:1).

The ratio is calculated using the WCAG relative luminance formula for each color, then combined as (lighter luminance + 0.05) ÷ (darker luminance + 0.05). This produces a ratio between 1:1 (no contrast, identical colors) and 21:1 (maximum contrast, pure black on pure white). This is the same calculation defined by WCAG 2.x's contrast success criteria.

WCAG 1.4.3 (Contrast, Level AA — the widely used baseline) requires at least 4.5:1 for normal text and at least 3:1 for large text. WCAG 1.4.6 (Contrast, Level AAA — a stricter, enhanced level) requires at least 7:1 for normal text and at least 4.5:1 for large text. "Large text" is defined by WCAG as at least 18pt, or at least 14pt if bold (roughly 24px, or about 19px bold, at a typical 16px root size).

This tool checks the text contrast ratio between exactly two colors you provide, against the WCAG AA and AAA text-contrast success criteria. It does not check non-text UI element contrast (like icons, borders, or focus indicators, covered by a separate WCAG criterion), and passing this check for one color pair does not mean an entire page or website is WCAG compliant — a real accessibility review covers many other criteria beyond color contrast.

What is a good contrast ratio?

For most body text, WCAG AA requires at least 4.5:1. For large text (18pt+, or 14pt+ bold), 3:1 is enough for AA. AAA is a stricter, optional enhanced level: 7:1 for normal text and 4.5:1 for large text.

What counts as "large text" under WCAG?

At least 18pt (about 24px), or at least 14pt bold (about 19px bold) at a typical 16px root font size.

Does passing AA here mean my whole website is accessible?

No. This tool only checks the text contrast ratio for the two colors you entered. A full accessibility review covers many other criteria beyond color contrast alone.

What is the difference between AA and AAA?

AA is the widely used baseline level most sites target. AAA is a stricter, optional enhanced level with higher contrast requirements, not expected of every page.

Does this check non-text elements like icons or borders?

No. This tool checks text contrast only. Non-text UI component contrast is a separate WCAG criterion this tool does not evaluate.

Is my data saved?

No. Everything is calculated in your browser; nothing is sent to a server.