Color Contrast Checker

Check WCAG color contrast ratios between foreground and background colors.

Foreground

Background

The quick brown fox jumps over the lazy dog

0123456789 !@#$%^&*()

21: 1

Contrast Ratio

WCAG AA

✓ Normal (≥4.5)✓ Large (≥3.0)

WCAG AAA

✓ Normal (≥7.0)✓ Large (≥4.5)

How to Use

1
Enter the foreground (text) color and the background color as HEX values or use the color pickers.
2
View the calculated contrast ratio and whether it passes WCAG AA and AAA standards.
3
Adjust colors until the desired accessibility level is achieved.

Calculates contrast ratios using the official WCAG 2.0 relative luminance formula.

Shows pass or fail for both WCAG AA (4.5:1) and AAA (7:1) levels for normal and large text.

Use the visual color picker or enter HEX values to set foreground and background colors.

See a live text preview rendered with your chosen colors to visualize the actual contrast.

AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text.

Using the WCAG 2.0 relative luminance formula that accounts for human perception of different colors.

Color Converter

Convert colors between HEX, RGB, and HSL formats with a visual color picker.

CSS Gradient Generator

Create beautiful CSS gradients with a visual builder.

CSS Box Shadow Generator

Design CSS box shadows with a visual editor.