Developertools

Color Contrast Checker

Check foreground and background HEX colors against WCAG 2.1 contrast ratios for normal and large text.

Color Contrast Checker workspace

Normal text sample — can you read this clearly?

Large text sample

—Ratio
—AA normal
—AA large
—AAA normal
—AAA large

Hoe te gebruiken

Enter foreground and background HEX values, Check contrast, and read the ratio plus AA/AAA results for normal and large text.

Voorbeeld

Large text means 18 pt regular or 14 pt bold under WCAG. This page reports the ratio and pass/fail flags only.

Invoer

#000000 on #ffffff

Uitvoer

Ratio 21:1, passes AA and AAA for normal and large text

Hoe het werkt

Relative luminance follows WCAG 2.1 sRGB. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) with the lighter luminance on top. Thresholds are 4.5 and 3 for AA, 7 and 4.5 for AAA.

Veelvoorkomende fouten

  • An invalid HEX was refused Use three- or six-digit hex with an optional leading #.
  • You expected APCA scores This tool implements WCAG 2.1 contrast only.
  • UI component contrast was needed Non-text UI uses a 3:1 rule; treat AA large as a guide and read WCAG for components.

Beperkingen

This does not simulate color blindness or measure contrast on images. Alpha and CSS color() spaces are not parsed.

Privacy

The text you paste is processed in your browser. PepsTools does not receive it, store it, or send it to another service.

Vragen

What is a passing AA normal score?

A contrast ratio of at least 4.5:1 for normal text.