Color Contrast Checker

Test foreground and background color combinations for WCAG 2.1 accessibility.

Foreground (Text)

Background

Contrast Ratio

21.0:1

WCAG AA Pass

WCAG AAA Pass

WCAG AA Pass

WCAG AAA Pass

The quick brown fox

Accessible design ensures that everyone, including those with visual impairments, can easily read and interact with your content.

1
Select a Foreground color (usually your text color).
2
Select a Background color.
3
The tool calculates the contrast ratio instantly (e.g., 21.0:1 is maximum).
4
Check the AA and AAA results to see if they meet accessibility standards.

📖 Want to learn more?

Read our in-depth guide: tips, best practices, FAQs, and real-world examples.

WCAG AA requires a ratio of at least <strong>4.5:1</strong> for normal text.
WCAG AAA (highest level) requires at least <strong>7.0:1</strong>.
Large text (18pt+) is easier to read, so it has more lenient requirements (3.0:1 for AA).