Color contrast checker

Check if your color scheme meet the WCAG 2 AA contrast ratio thresholds

Insert colors

Background color

Foreground color

Color contrast ratio

All text elements must have sufficient contrast between text in the foreground and background colors behind it in accordance with WCAG 2 AA contrast ratio thresholds.

Learn more

How does it work?

Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or for user interface components.

Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.