About Color Accessibility Checker
Tests foreground/background color pairs against WCAG 2.1 contrast ratio requirements. Reports pass/fail for AA and AAA compliance at both normal and large text sizes. Includes a palette testing panel with common color sets and a suggestion engine that generates compliant color variations by adjusting lightness in 10% increments.
- Calculates contrast ratio using the W3C relative luminance formula with sRGB gamma correction
- Reports WCAG AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) pass/fail
- Large text threshold: 18px+ or 14px+ bold, matching WCAG definitions
- Live preview renders sample text with your exact color combination, font size, and weight
- Color suggestion engine generates 20 lighter/darker variations and filters for AA compliance
- Save up to 10 color pair tests for side-by-side comparison; export full report as JSON
Frequently Asked Questions
- What’s the difference between AA and AAA?
- AA requires 4.5:1 contrast for normal text and 3:1 for large text—this is the legal baseline for most accessibility standards. AAA requires 7:1 and 4.5:1 respectively. AAA is harder to hit but recommended for body text on content-heavy sites.
- Does this account for color blindness?
- No. Contrast ratio measures luminance difference, which helps all users, but it doesn’t evaluate distinguishability for specific color vision deficiencies. Use a color blindness simulator alongside this tool for full coverage.
More Web Tools Tools
All Web Tools toolsWeb Tools
URL Parser
Break a URL into its parts — protocol, host, port, path, hash, and a decoded query-parameter table.
Web Tools
Base64 Encoder Decoder
Encode and decode Base64 strings.
Web Tools
Image to Base64 Converter
Convert images to Base64 data URLs for direct embedding in HTML, CSS, or JSON.
Web Tools
CSS Box Shadow Generator
Build and preview CSS box-shadow values with multiple layers, presets, and live preview.