Skip to main content
SiteIndex
Home/Developer/Color Contrast Checker
DeveloperReady to use

Color Contrast Checker

Check the contrast ratio between two colors against WCAG AA and AAA accessibility thresholds.

Documentation

Interactive workspace

No account required
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast ratio
14.68:1
AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass
What is Color Contrast Checker?

Check the contrast ratio between two colors against WCAG AA and AAA accessibility thresholds.

How it works

SiteIndex computes the relative luminance of your foreground and background colors and derives the WCAG contrast ratio, then flags whether it passes AA and AAA thresholds for normal and large text.

Where a network request is required, SiteIndex validates public HTTP/HTTPS targets before making the request.

Common uses
  • Confirm body text meets WCAG AA contrast before shipping a design.
  • Check large heading text against the more lenient AAA large-text threshold.
  • Compare a few color pairs to find an accessible combination.
Limitations
  • Results depend on the browser, network, input, and external service involved.
  • This tool is informational and does not replace specialist diagnostics or professional advice.
FAQ
What ratio counts as passing?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.

Related tools

Color Converter
Utilities
CSS Gradient Generator
Developer
Border Radius Generator
Developer