Accessibility tool

Color Contrast Checker

Compare foreground and background colors, calculate the contrast ratio, and check common WCAG thresholds before a design reaches production.

FreeNo accountRuns in your browserWCAG contrast checks
Readable interface textThis preview uses your selected color pair.

Understand the result

Why contrast matters

Low contrast makes text and controls harder to perceive, especially on mobile screens, dim displays, bright environments, and for people with low vision. Contrast checks should happen before a design system reaches production rather than after accessibility problems are reported.

How to read the result

WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text. AAA is stricter at 7:1 for normal text and 4.5:1 for large text. Meaningful non-text interface components have a separate 3:1 contrast requirement.

Test the actual interface colors

Use the exact foreground and background values from the component you are reviewing. Test important states separately, including hover, focus, disabled, error, and selected states where color communicates information.

What a contrast score does not prove

A passing pair does not prove the whole page is accessible. Font size, background images, focus indicators, keyboard order, motion, form labels, semantic structure, and screen-reader behavior still need review.