Color Contrast & Accessibility: A WCAG Basics Guide

If text is hard to read against its background, you lose readers — and fail accessibility standards. Color contrast is one of the easiest wins in web design.

What is contrast ratio?

It's a number from 1:1 (no contrast) to 21:1 (black on white) that measures how different two colors are in brightness.

WCAG guidelines

• 4.5:1 — minimum for normal text (AA)
• 7:1 — enhanced, for AAA
• 3:1 — acceptable for large text (AA)

Check your colors

Use our Color Contrast Checker to test any text and background and see AA/AAA pass or fail. Building a palette? Try the Color Converter and Palette Generator.