🎨 Design Tools

Color Contrast Checker

Check text/background contrast against WCAG accessibility levels.

Text colour
Background colour
The quick brown fox
Contrast ratio—

Frequently asked questions

For normal-size text, WCAG AA needs a ratio of at least 4.5:1 and AAA needs 7:1. Large text (about 24px, or 19px bold) has lower thresholds of 3:1 for AA and 4.5:1 for AAA. The checker shows all of these at once.

Related Design Tools

Color Palette Generator Generate harmonious colour palettes from a base colour. Box Shadow Generator Design a CSS box-shadow visually and copy the code. Border Radius Generator Round corners independently and copy the CSS. Text Shadow Generator Build a CSS text-shadow with a live preview.