Secure & Private (Zero Data Retention)
Free Access • No Sign-Up
WCAG 2.1 & APCA Color Contrast Checker
Verify digital accessibility compliance across WCAG 2.1 AA/AAA criteria and the WCAG 3.0 Advanced Perceptual Contrast Algorithm (APCA). Includes full Color Vision Deficiency (CVD) simulation, auto-fix accessible luminance adjuster, and clipboard reporting.
rgb(17, 17, 17)
rgb(255, 255, 255)
Headline Typography (24px Bold)
This paragraph represents standard body text rendered at 16px with regular font weight. Readable digital typography requires sufficient photometric luminance contrast against the background plane.
Caption & Secondary Text: Small print, legal notices, and footnote metadata (13px).
Standard Text Hyperlink
WCAG 2.1 CONTRAST
16.1 : 1
Superb Contrast
WCAG 3.0 APCA SCORE
Lc 106.2
All Text Sizes Pass
AA NORMAL TEXT (≥4.5)
PASS
AAA NORMAL TEXT (≥7.0)
PASS
LARGE TEXT (≥3.0)
PASS
UI COMPONENTS (≥3.0)
PASS
Color Vision Deficiency (CVD) Perception Simulation
Simulates how this specific color pair is perceived by individuals with congenital dichromacy and monochromacy.
PROTANOPIA (Red-Blind)
Sample Text
DEUTERANOPIA (Green-Blind)
Sample Text
TRITANOPIA (Blue-Blind)
Sample Text
ACHROMATOPSIA (Monochrome)
Sample Text
Photometric Derivation & Contrast Mathematics
WCAG 2.1 relative luminance calculation transforms gamma-compressed sRGB channels to linear CIE 1931 photopic luminance space:
Contrast Ratio = (L_lighter + 0.05) / (L_darker + 0.05)
The constant +0.05 compensates for ambient room illumination and display flare (the Weber-Fechner law of visual psychophysics). WCAG 3.0 APCA extends this by incorporating power laws for spatial frequency (glyph stroke width) and polarity (dark-mode light text on dark backgrounds causes optical irradiation in human astigmatism).
5 Fatal Traps in UI Color Contrast & Accessibility
1. The Placeholder Text Opacity Trap
Setting input placeholders to color: #a0aec0 or using opacity: 0.4 on dark text over white yields contrast ratios of 2.1:1 to 2.8:1. This is the single most common accessibility lawsuit trigger under ADA Title III and EN 301 549. Over 40% of users over 55 fail to locate or read faint form fields.
2. The Symmetrical Polarity Fallacy (Dark Mode Irradiation)
Assuming that inverted colors (e.g. swapping #111111 on #ffffff to #ffffff on #111111) yield identical perceptual contrast. In reality, human ocular lenses suffer from irradiation: bright glyphs on pitch-black backgrounds visually bloom and blur outward, making thin white fonts harder to parse than black fonts on white.
3. The Disabled State Exemption Abuse
While WCAG technically exempts inactive components from strict 4.5:1 ratios, rendering disabled buttons in #e2e8f0 with #94a3b8 text produces an unreadable gray rectangle. Users cannot distinguish between an intentionally disabled action, an unloaded asset, or a rendering glitch.
4. The Red-Green Color Reliance (Deuteranopia Blindness)
Conveying success and error states solely using green (#10b981) and red (#ef4444) text without secondary geometric icons or status badges. Approximately 8% of biological males possess deuteranopia or protanopia, causing red and green to collapse into identical brownish-olive wavelengths.
5. The Thin-Weight Font Anti-Aliasing Degradation
Validating color contrast mathematically using a solid pixel model, but then implementing the typography at font-weight: 100 (Ultra Light) or font-weight: 200. Subpixel anti-aliasing dilutes thin font stems with surrounding background pixels, dropping real on-screen optical contrast below 2.5:1.
Frequently Asked Questions
What is the difference between WCAG AA and AAA contrast requirements?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt / 24px or 14pt / 18.66px bold) and graphical UI components. WCAG AAA represents the enhanced level, demanding 7:1 for normal text and 4.5:1 for large text to accommodate users with moderate low vision.
How does WCAG define "Large Text"?
Large text is defined as text that is at least 18 points (typically 24 pixels) or 14 points (typically 18.66 pixels) if rendered with a bold font weight (font-weight: 700 or greater). Because larger glyph stems cover more retina area, the minimum threshold drops from 4.5:1 to 3:1.
Why does WCAG add 0.05 to the luminance values?
The 0.05 offset represents ambient optical flare and screen reflectance under standard room lighting conditions. Without this offset, pure black (L = 0) would result in mathematical division by zero or infinite contrast ratios that do not reflect human perceptual reality.
How does WCAG 3.0 APCA differ from WCAG 2.1?
APCA (Advanced Perceptual Contrast Algorithm) models human foveal cone response and cortical spatial frequency. Unlike WCAG 2.1, APCA is polarity-sensitive (treating dark-on-light differently from light-on-dark) and adjusts required lightness contrast based directly on font size and font weight.
Can text with 4.5:1 contrast still be hard to read?
Yes. If the font weight is ultra-thin, if letter spacing (kerning) is cramped, or if the background has visual texture, noise, or gradients, reading comprehension plummets despite meeting the mathematical color ratio. Contrast is only one dimension of accessible typography.