WCAG Contrast Checker (Batch)
Test multiple color pairs against WCAG AA/AAA contrast requirements at once — get a pass/fail matrix for your entire palette
| Label | Foreground | Background | Preview | Ratio | AA N | AA L | AAA N | AAA L | |
|---|---|---|---|---|---|---|---|---|---|
Aa sample | 21.00 | ||||||||
Aa sample | 3.68 | ||||||||
Aa sample | 4.39 | ||||||||
Aa sample | 2.54 | ||||||||
Aa sample | 3.76 |
WCAG 2.1 thresholds: AA Normal ≥ 4.5:1, AA Large ≥ 3:1 (text ≥ 18pt or 14pt bold), AAA Normal ≥ 7:1, AAA Large ≥ 4.5:1.
All calculations run in your browser. Export a CSV report for your design system audit.
WCAG Contrast Checker — Batch Test Color Pairs
Test multiple color pairs against WCAG 2.1 AA and AAA contrast requirements at once. Paste foreground and background colors to get an instant pass/fail matrix showing which combinations meet accessibility standards for normal text, large text, and UI components.
How to use the batch contrast checker
- 1
Paste your colors
Enter foreground colors (text, icons) in the left column and background colors in the right column. Use HEX (#3B82F6), RGB (rgb(59, 130, 246)), or HSL (hsl(217, 91%, 60%)) format.
- 2
Review the matrix
The tool calculates contrast ratios for every foreground/background pair and shows pass/fail status for WCAG AA normal text (4.5:1), AA large text (3:1), and AAA normal text (7:1).
- 3
Fix failures
For failing pairs, darken the foreground or lighten the background until the ratio meets your target level. See our complete guide for strategies.
- 4
Export results
Copy the matrix or take a screenshot to share with your team or include in accessibility documentation.
WCAG contrast requirements
AA Normal Text (4.5:1)
Minimum standard for body text under 18pt or under 14pt bold. Required by ADA, Section 508, and most accessibility laws.
AA Large Text (3:1)
Minimum for headings and large UI text 18pt+ or 14pt+ bold. Lower threshold because larger text is easier to read.
AAA Normal Text (7:1)
Enhanced standard for text-heavy sites, documentation, legal content, and products serving users with low vision.
UI Components (3:1)
WCAG 2.1 requirement for form borders, focus indicators, icon buttons, and graphical objects that convey information.
Common contrast failures and fixes
Light gray on white: #999999 on #FFFFFF is 2.85:1 and fails AA. Darken to #767676 (4.54:1) for AA or #595959 (7.0:1) for AAA.
Brand colors on white: Many vibrant colors like #3B82F6 (Tailwind blue-500) fail AA normal text at 3.15:1. Use for large text only, or darken to #1E40AF (blue-700, 7.04:1) for body text.
Link colors: Links must meet contrast against their background AND be distinguishable from surrounding text (underline, bold, icon). #60A5FA on white is 2.13:1 and fails — use #2563EB (5.14:1) with underline.
Form input borders: #E5E7EB (gray-200) on white is 1.19:1 and fails the 3:1 UI component requirement. Use #6B7280 (gray-500, 4.76:1) or darker.
Building a contrast-safe palette
Start with a base hue and generate shades at different lightness levels. For a white background, you need L ≤ 40% in HSL for AA normal text and L ≤ 30% for AAA. For dark mode, use L ≤ 20% for backgrounds and L ≥ 80% for body text.
Test your entire palette with this batch checker to identify which pairs are safe for normal text, large text, or fail entirely. Adjust lightness values until you have enough compliant combinations for your design system.
FAQ
What is a contrast ratio?
The relative luminance of the lighter color divided by the darker color, from 1:1 (no contrast) to 21:1 (black on white). WCAG requires 4.5:1 for normal text and 3:1 for large text and UI components.
How do I calculate contrast ratio?
Use this tool — paste your colors and get instant ratios. The formula uses relative luminance from sRGB values and is complex to calculate by hand.
What's the difference between AA and AAA?
AA is the minimum legal standard (4.5:1 normal text, 3:1 large text). AAA is enhanced (7:1 normal, 4.5:1 large) for text-heavy sites and users with low vision.
Do disabled buttons need to meet contrast?
No — inactive UI components are exempt from WCAG. But best practice is to aim for 3:1 even for disabled states to avoid confusion.
What about gradients?
Contrast is measured against the least contrasting part of the gradient. If any part fails, the entire combination fails. Add a semi-transparent overlay to ensure minimum contrast across the gradient.
📖 Complete Guide
Read our WCAG Contrast Checker Guide for detailed examples, safe color pairs, dark mode strategies, and how to fix every common contrast failure.
Continue Exploring
Other Accessibility Tools you might like...
Color Blind Simulator
See how your images and colors appear to people with different types of color blindness (protanopia, deuteranopia, tritanopia, achromatopsia)
Screen Reader Preview
Preview how your HTML will be announced by screen readers — see the accessible name, role, and reading order for each element
Focus Order Visualizer
Visualize the keyboard tab order of any HTML — see exactly where focus lands and spot accessibility issues with tabindex and hidden elements