Color Contrast Checker
Verify WCAG 2.2 AA/AAA compliance and APCA readability scores instantly. Get intelligent fix suggestions, simulate color vision deficiencies, and export accessible color pairs for development.
Closest: darkslategray
Closest: white
Aa
The quick brown fox jumps over the lazy dog.
WCAG Contrast Ratio
14.63:1
APCA Lightness Contrast
Lc +101.4
Excellent — preferred for body text
Full Compliance Report
8/8 passingLive UI Preview
The quick brown fox jumps over the lazy dog. This text demonstrates readability at the selected contrast level.
Heading Example
Supporting subtitle text below heading
Card Title
Card description text with lower emphasis.
Alert title
This is a notification message with supporting text.
Developer Export
:root {
--color-text: #1e293b;
--color-background: #ffffff;
}Typography Tester
The quick brown fox jumps over the lazy dog.
Classification
Normal Text
WCAG AA
PASS (4.5:1)
APCA
Pass (body)
APCA Font-Size Lookup
Green cells are font size + weight combinations that pass at the current contrast level. Click a cell to test it.
| Size | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| 12px | |||||||||
| 14px | |||||||||
| 16px | |||||||||
| 18px | |||||||||
| 20px | |||||||||
| 24px | |||||||||
| 28px | |||||||||
| 32px | |||||||||
| 36px | |||||||||
| 48px | |||||||||
| 60px | |||||||||
| 72px | |||||||||
| 96px |
Values show minimum |Lc| needed. Based on APCA Bronze conformance (Myndex, working draft). — = not permitted at any contrast.
Color Vision Simulation
Aa
Normal Vision
Trichromatic
14.6:1
Aa
Protanopia
No red cones (~1% males)
15.4:1
Aa
Deuteranopia
No green cones (~5% males)
15.7:1
Aa
Tritanopia
No blue cones (rare)
13.3:1
Aa
Achromatopsia
Total color blindness
14.7:1
Recent & Favorites
Color pairs you check will appear here
Understanding Color Contrast
WCAG 2.2 Standards
The Web Content Accessibility Guidelines define minimum contrast ratios to ensure text is readable by people with low vision. AA is the legal standard in most jurisdictions; AAA is the gold standard.
APCA (Next Generation)
The Advanced Perceptual Contrast Algorithm is a candidate for WCAG 3.0. It accounts for text polarity and better handles dark mode, saturated colors, and real-world display conditions.
Why Contrast Matters
Low contrast is the most common accessibility violation, affecting 83.9% of the top million websites. Good contrast benefits everyone — including users in bright sunlight, aging users, and the 8% of males with color vision deficiency.
Normal vs Large Text
Large text (24px+ or 18.66px bold) requires only 3:1 for AA because larger characters have thicker strokes and wider proportions, making them easier to read at lower contrast levels.
UI Components
WCAG 2.2 requires 3:1 contrast for non-text UI elements — buttons, form inputs, icons, and interactive controls. This is separate from text contrast requirements.
Common Mistakes
Light gray text on white (#999 on #fff = 2.85:1), placeholder text that fails contrast, colored buttons with white text that barely passes, and relying on color alone to convey state.
Frequently Asked Questions
What is the minimum contrast ratio for web accessibility?
WCAG 2.2 Level AA requires 4.5:1 for normal text, 3:1 for large text (18px+ or 14px bold), and 3:1 for UI components. Level AAA raises these to 7:1 and 4.5:1 respectively. These ratios ensure readability for users with 20/40 vision.
Should I use WCAG or APCA for my project?
Use WCAG 2.2 for legal compliance and regulatory requirements — it is the current enforceable standard. Use APCA as an additional quality check, especially for dark mode interfaces and saturated brand colors where WCAG can be misleading. Our tool shows both so you can make informed decisions.
How does color blindness affect contrast perception?
About 8% of males and 0.5% of females have some form of color vision deficiency. The most common types (protanopia and deuteranopia) affect red-green discrimination. While contrast ratio calculations use luminance (not hue), certain color combinations that appear distinct to trichromats may look identical to CVD users.