+Calculator+

Color Contrast Checker

Check WCAG 2.1 contrast between two colors. Get the contrast ratio and AA/AAA pass status for normal text, large text, and UI components.

Color contrast checker

Normal text sample. The quick brown fox jumps over the lazy dog.

Large text sample (18pt+ or 14pt+ bold).

Small text sample for body copy and captions.

Contrast ratio

5.47:1Best pass: AA

Foreground luminance 0.1418, background luminance 1.0000.

Normal text AA
Body text under 18pt
>= 4.5:1
Normal text AAA
Strictest body text
>= 7:1
Large text AA
18pt+ or 14pt+ bold
>= 3:1
Large text AAA
Strictest large text
>= 4.5:1
UI and graphics
Icons, borders, focus rings
>= 3:1

Frequently Asked Questions about the Color Contrast Checker

What is a WCAG contrast ratio?
It is the relative luminance ratio between two colors, from 1:1 (identical) to 21:1 (black on white). WCAG 2.1 uses it to judge whether text and UI elements are readable for people with low vision.
What is the difference between AA and AAA?
AA is the standard target for most public websites: 4.5:1 for normal text, 3:1 for large text. AAA is the stricter level: 7:1 for normal text, 4.5:1 for large text. AAA is required for some government and accessibility-first sites.
What counts as large text?
WCAG defines large text as 18pt and above, or 14pt and above when bold. That maps to roughly 24px regular or 19px bold in CSS. Large text gets lower contrast thresholds because bigger glyphs are easier to read at low contrast.
Why does the checker also report a UI level?
WCAG 2.1 success criterion 1.4.11 requires a 3:1 contrast for non-text elements like form borders, icons, focus rings, and chart strokes. The UI line tells you whether your colors are safe for those graphical objects, not just text.
Why does contrast ratio matter for accessibility?
Low contrast makes content unreadable for users with low vision, color blindness, aging eyes, or screens in bright sunlight. Meeting the WCAG thresholds is also a legal requirement in many countries (ADA in the US, EAA in the EU) for public-facing digital products.