Audit a design system
Run every text and background pairing in your tokens against WCAG AA before locking the system. Pair with the shade scale generator for token-level coverage.
Contrast Checker
Check WCAG 2.2 AA and AAA contrast. Part of AI color palette generator.
Quick answer: A contrast checker measures the luminance difference between two colors and compares it to the Web Content Accessibility Guidelines (WCAG).
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.
Contrast ratio
17.06:1
AA · Normal text
Requires 4.5:1
AA · Large text
Requires 3:1
AAA · Normal text
Requires 7:1
AAA · Large text
Requires 4.5:1
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.2 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.
Pair this checker with the hex to RGB converter to lock down your hex codes, run colors through the color blindness simulator to see how they read across vision types, or Pro shade scales and exports to validate full systems instead of one pair at a time.
Common use cases
Spec accessible UI
Verify button labels, links, and form fields meet 4.5:1 before handing off to engineering.
Fix a failing component
Paste the on-brand color and find the closest passing shade so you do not break the palette.
Document an a11y review
Capture pass and fail for each pairing as evidence in your accessibility report.
Frequently asked questions
This checks one pair.
Paletta validates your entire color system against WCAG. Every shade, every combination.