Contrast Checker
Check WCAG 2.2 AA and AAA contrast. Part of AI color system tool.
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.
How it works
Enter a foreground color
Paste a hex code or use the color picker.
Enter a background color
The contrast ratio updates instantly.
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
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.
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.
FAQ
Frequently asked questions
The checker uses WCAG 2.2, which is the version most accessibility laws reference. Ratios are calculated using the relative luminance formula defined in the spec, so results match what auditors and automated tools like axe and Lighthouse report.
AA is the minimum standard required by most accessibility laws and requires 4.5:1 for normal text and 3:1 for large text. AAA is a stricter target at 7:1 and 4.5:1, used by government and healthcare products. Aim for AA across the product and AAA on critical content like body copy.
WCAG sets a lower contrast threshold for large text because larger characters are easier to read at low contrast. Large text is defined as 18pt and up, or 14pt and up if bold. The same color pair can clear the 3:1 large-text threshold while failing the 4.5:1 normal-text threshold.
Yes. WCAG 2.2 requires non-text contrast of at least 3:1 for icons, form borders, focus rings, and any graphical element needed to understand the UI. Use the same checker, compare the component color against its adjacent background, and aim for 3:1 or higher.
This checks one pair.
Paletta validates your entire color system against WCAG. Every shade, every combination.