Dev Tools

Color Contrast Checker

Check your foreground and background colors against WCAG 2.1 AA & AAA standards. Preview color blindness simulations and get suggested fixes.

Quick Answer

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced readability (AAA). Large text (18px+ bold or 24px+ regular) has a lower threshold of 3:1 for AA. Contrast ratio is calculated from the relative luminance of foreground and background colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

The quick brown fox

Normal text (16px) — WCAG requires 4.5:1 for AA

Small text example for readability testing

Contrast Ratio17.06:1
AA NormalPASSmin 4.5:1
AA LargePASSmin 3:1
AAA NormalPASSmin 7:1
AAA LargePASSmin 4.5:1

Color Blindness Simulation

Sample Text

The quick brown fox

Protanopia (red-blind)17.16:1AA

Sample Text

The quick brown fox

Deuteranopia (green-blind)17.18:1AA

Sample Text

The quick brown fox

Tritanopia (blue-blind)15.73:1AA

About This Tool

The Color Contrast Checker is a free online tool that evaluates the contrast ratio between any two colors against the Web Content Accessibility Guidelines (WCAG) 2.1 standards. It helps designers, developers, and content creators ensure their color choices meet legal accessibility requirements and provide a good reading experience for all users, including those with visual impairments.

WCAG 2.1 defines two conformance levels for contrast: Level AA (the minimum required by most accessibility laws, including ADA and Section 508) and Level AAA (the enhanced standard for optimal readability). Normal text must meet 4.5:1 for AA and 7:1 for AAA, while large text (18pt or 14pt bold and above) has relaxed thresholds of 3:1 and 4.5:1 respectively.

Beyond raw contrast ratios, this tool simulates how your color combination appears to people with the three most common types of color blindness: protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind). If your contrast fails, the tool suggests the closest foreground color that would pass, so you can fix accessibility issues without completely redesigning your palette.

All calculations run entirely in your browser. No colors are sent to a server, stored, or logged. The tool is free, requires no signup, and works offline once loaded.

Frequently Asked Questions

What is color contrast ratio and why does it matter?
Color contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (identical colors) to 21:1 (black on white). Higher contrast makes text easier to read, especially for people with low vision or color blindness. WCAG 2.1 sets minimum ratios to ensure web content is accessible to everyone.
What are WCAG 2.1 AA and AAA contrast requirements?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA is stricter: 7:1 for normal text and 4.5:1 for large text. AA is the legal minimum for most accessibility laws; AAA is the gold standard.
How does color blindness affect contrast perception?
Color blindness (color vision deficiency) affects about 8% of men and 0.5% of women. The most common types are protanopia (red-blind) and deuteranopia (green-blind). Colors that appear distinct to people with normal vision may look nearly identical to someone who is color blind, effectively reducing perceived contrast. This tool simulates three common types so you can verify your colors work for everyone.
Is ADA compliance the same as WCAG compliance?
The Americans with Disabilities Act (ADA) does not specify technical standards for websites directly. However, courts have consistently referenced WCAG 2.1 Level AA as the benchmark for digital accessibility under ADA. Meeting WCAG 2.1 AA is widely considered sufficient for ADA compliance in the U.S., and is explicitly required by Section 508 for federal agencies.
Is my data stored or sent to a server?
No. All contrast calculations and color blindness simulations happen entirely in your browser using JavaScript. No data is sent to any server, stored, or logged. The tool works completely offline once the page loads.

You might also like

Tax & Finance

Self-Employment Tax Estimator

Calculate your quarterly SE tax payments and deductions.

⏱ 2 minFinance

Compound Interest Calculator

See how your money grows with compound interest over time.

⏱ 1 minCareer

Freelance Rate Calculator

Find your ideal hourly, daily, and project rates.

⏱ 3 min