カラーコントラストチェッカー

What this tool does

Compare two solid colors and show the WCAG 2 contrast ratio for normal and large text. Designers checking a button label against its background use it before they ship the pair. Black on white is 21:1, and a photograph behind the text is outside the calculation.

How to use

1. Pick a foreground color and a background color, or type HEX values.
2. Read the contrast ratio and the AA/AAA results for normal and large text.
3. Swap the colors if you need the inverse pair.

Examples

• Black on white

  The ratio is 21:1, which meets every listed WCAG contrast criterion.

• Similar greys

  A pair such as #777777 on #999999 fails normal-text AA because the ratio is well below 4.5:1.

How it works

The tool uses WCAG 2 relative luminance. A pass means the pair meets the selected WCAG contrast criterion. Contrast is only one part of accessibility. Font size, weight, spacing and keyboard access still matter. The checker does not claim a design is universally accessible.

Limitations

The result is the WCAG 2 contrast ratio of two colors the parser can read. A pass is not a full accessibility audit. Font size is not read from a stylesheet, and a color the parser rejects produces no ratio.

See the disclaimer for what these tools do not cover.

FAQ

Is the Color Contrast Checker free?

Yes. Checking a foreground and background pair against WCAG contrast ratios is free, with no account.

Does a pass mean my UI is accessible?

No. It only means that color pair meets that contrast threshold. Other requirements still apply.

Which ratios are AA and AAA?

Normal text uses 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 for AA and 4.5:1 for AAA. The page marks each of those four results separately.

Does a background photo count?

No. The ratio uses the two solid colors you enter. A photograph behind the text, or a translucent layer, is outside the calculation.