Contrast Ratio Batch Tester

Add as many foreground/background color pairs as you need and instantly see the contrast ratio, WCAG level (AAA/AA/AA Large/FAIL), and a live preview for each combination. Ideal for design system audits, testing an entire color scale, or reviewing a client's brand palette all at once.

WCAG 1.4.3 — Contrast (Minimum) & 1.4.6 — Contrast (Enhanced)

AA: ≥4.5:1 normal text, ≥3:1 large text (18pt+ or 14pt bold) · AAA: ≥7:1 normal text · AA Large: ≥3:1 (passes only for large text)

Total pairs

Pass (any level)

Pass AA+

Pass AAA

Preview	Ratio	Level
Sample text Aa	14.63:1	AAA
Sample text Aa	5.47:1	AA
Sample text Aa	5.93:1	AA
Sample text Aa	2.56:1	FAIL
Sample text Aa	4.83:1	AA
Sample text Aa	8.15:1	AAA

Quick Reference

AAA

≥7:1

Enhanced — normal text

≥4.5:1

Minimum — normal text

AA Large

≥3:1

Large text (18pt+)

FAIL

<3:1

Does not pass any level

Why This Matters

Testing colors one-by-one is slow and error-prone. Design systems can have dozens of color combinations. A batch tester lets you audit your entire palette in one pass, making it easy to catch failures before they reach production.

How to Use This Tool

1
Review the preloaded pairs
Six common color combinations are loaded by default. Edit any pair by changing the color picker or hex input.
2
Add more pairs
Click "Add pair" to test additional color combinations. Label each pair for easy reference.
3
Check the results
Each row shows the contrast ratio, a live text preview, and the WCAG level (AAA/AA/AA Large/FAIL).
4
Export
Download the full report as CSV for documentation or client deliverables.

Frequently Asked Questions

What is "AA Large"?

AA Large means the contrast ratio is between 3:1 and 4.5:1. This passes WCAG AA only for large text (18pt+ regular or 14pt+ bold). It fails for normal body text.

What contrast ratio do I need for icons?

Non-text elements like icons and UI components require a 3:1 contrast ratio (WCAG 1.4.11 Non-text Contrast). This is the same threshold as "AA Large" in this tool.

Can I test more than the default pairs?

Yes. Click "Add pair" to test as many combinations as you need. There is no limit.

Related Tools

Contrast Checker

Check WCAG 2.1/2.2 contrast ratios for text and UI components. Supports AA and AAA levels with live preview.

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Heading Analyzer

Paste your HTML and visualize the heading hierarchy. Detect skipped levels, missing H1s, and structural issues.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.