All Tools/Color Contrast Checker

Color Contrast Checker

New

Ensure your design is accessible and WCAG compliant.

Foreground Color

Background Color

Contrast Ratio0.00:1

AA Normal

Requires 4.5:1FAIL

AA Large

Requires 3.0:1FAIL

AAA Normal

Requires 7.0:1FAIL

AAA Large

Requires 4.5:1FAIL

Live Preview

Large Text (24px/18px bold)

Normal text (16px). The quick brown fox jumps over the lazy dog. Accessibility is essential for a good user experience.

Small text (14px). Make sure your fine print is legible too.

Create beautiful CSS gradients for your backgrounds.

Design soft UI elements with perfect shadows and contrast.