Contrast Checker
Check any two colors against WCAG 2.1 AA and AAA standards.
Large text (24px)
Normal text (16px). The quick brown fox jumps over the lazy dog.
Small text (14px). The quick brown fox jumps over the lazy dog.
How it works
- 1
Enter a foreground color
Paste a hex code or use the color picker.
- 2
Enter a background color
The contrast ratio updates instantly.
- 3
Read the WCAG results
Green means pass, red means fail.
What is a contrast checker?
A contrast checker measures the luminance difference between two colors and compares it to the Web Content Accessibility Guidelines (WCAG). WCAG 2.1 defines two conformance levels. Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. UI components and graphical objects need at least 3:1 against adjacent colors.
Contrast ratios range from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Most accessibility laws, including the European Accessibility Act and Section 508, reference WCAG AA as the minimum standard.
Testing contrast during design prevents costly remediation. A contrast checker lets you validate color pairs before they reach production code.
This checks one pair.
Paletta validates your entire color system against WCAG. Every shade, every combination.