Color Contrast Checker

New

Check text and UI colors against WCAG AA and AAA contrast rules.

How to use the Color Contrast Checker

1Pick a text color and a background color.
2Read the contrast ratio and which WCAG levels pass.
3Use the suggested nearest passing colors.

Frequently asked questions

What contrast ratio do I need?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text and UI components. AAA asks for 7:1 and 4.5:1.

Color Blindness Simulator
New
See images and palettes as people with color vision deficiencies do.
Palette Contrast Grid
New
Test every color pair in a palette for accessible contrast at once.
HTML Accessibility Checker
New
Paste HTML and find missing alt text, labels, heading and ARIA issues.