Design

Check if your colors are actually readable.

Test any foreground-background pair against WCAG 2.1 AA and AAA contrast requirements.

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (24px bold)

Contrast ratio 21:1
AA Normal text (≥ 4.5:1)
—
AA Large text (≥ 3:1)
—
AAA Normal text (≥ 7:1)
—
AAA Large text (≥ 4.5:1)
—
AA UI components (≥ 3:1)
—

What is a contrast ratio?

A contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum ratios so that text remains readable for people with low vision or color deficiencies.

For AA compliance, normal body text needs at least a 4.5:1 ratio. Large text (18pt+ or 14pt+ bold) gets a lower bar at 3:1 because bigger glyphs are easier to distinguish. AAA is stricter: 7:1 for normal text, 4.5:1 for large. Non-text UI elements like icons, borders, and form controls need at least 3:1 against their adjacent colors.

Paste your hex codes above or use the color pickers. Results update instantly. Share the URL to send your exact color pair to a teammate.

Building a new site? We can help.

Let's talk →