Entwickler-Tools

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

So geht’s

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

Beispiel

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

Eingabe

#000000 on #ffffff

Ausgabe

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

So funktioniert es

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.

Häufige Fehler

  • 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.

Einschränkungen

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

Datenschutz

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

Fragen

What is a passing AA normal score?

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