Skip to main content
SiteIndex

Developer

Color Contrast Checker Documentation

Use the free Color Contrast Checker →

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

What does it do?

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

How does it work?

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.

When to use it
  • 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.
Inputs and outputs
Input
Text, files, or values entered in the browser, depending on the tool.
Output
A result shown in the browser that can be reviewed or copied where supported.
Limitations
  • Checks colors under WCAG 2 contrast-ratio thresholds; it is not APCA or a full accessibility audit.
  • Alpha inputs are composited over white before checking. This does not model translucent layers over your actual background.
  • Large-text classification must match the real font size/weight, not the tool preview.
Privacy and data handling

Inputs for this browser-side tool are processed locally and are not sent to SiteIndex. Normal page analytics may still be collected as described in the Privacy Policy. Read the Privacy Policy.

How to use it

  1. Enter text and background colors as 3/4/6/8-digit HEX, rgb(), hsl(), or CSS color names, or use the labeled pickers.
  2. Read the ratio and normal/large-text AA and AAA results.
  3. Swap colors to compare the reverse combination and test the actual design context.

Related tools

Color ConverterLearn moreCSS Gradient GeneratorLearn moreBorder Radius GeneratorLearn more