Color Accessibility Checker
Test a HEX color against light and dark backgrounds to see its WCAG contrast ratio, pass/fail status, and the safer text color option.
#000000Against white
3.68:1Aa
Accessible sample text
Against black
5.71:1Aa
Accessible sample text
All processing happens locally in your browser — nothing is stored or sent to any server.
How to Check Color Accessibility
- Enter a HEX color code or choose a color with the picker.
- Compare the color against white and black backgrounds.
- Use the contrast ratio and pass/fail indicators to check readability.
- Pick the better text color before using the color in your UI or design system.
About WCAG Color Contrast
Good color contrast is essential for accessibility. Low-contrast text is harder to read for users with low vision, color-vision deficiencies, poor screen quality, bright ambient light, or simply older eyes — which means the audience affected by poor contrast is much larger than just users with formal disability classifications. Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency.
The Web Content Accessibility Guidelines (WCAG) define mathematical contrast ratios derived from relative luminance — a measure of perceived brightness weighted for human eye sensitivity. WCAG 2.1 AA (the most commonly required level) sets two thresholds: 4.5:1 for body text and 3:1 for large or bold text. AAA (the strictest level) raises these to 7:1 and 4.5:1 respectively. Many jurisdictions — the EU's European Accessibility Act, the US ADA, and Section 508 — now require AA conformance for public-facing sites.
This tool tests any HEX color against pure white and pure black, the two endpoints of the contrast space. If your color fails both, it cannot be used as text anywhere. If it passes one, you know which mode (light or dark) it belongs in. All calculations run instantly in your browser using the WCAG-defined luminance formula. No data leaves your device.
Frequently Asked Questions
What contrast ratio passes WCAG for normal text? ▼
WCAG AA requires a contrast ratio of at least 4.5:1 for normal-sized text (typically below 18pt or 14pt bold). This ensures the text remains readable for users with mild to moderate vision impairments. The stricter WCAG AAA standard requires 7:1 for normal text.
What passes for large text? ▼
Large text (18pt or larger, or 14pt and bold) needs a minimum ratio of 3:1 for WCAG AA, or 4.5:1 for AAA. The reasoning: larger characters are inherently easier to distinguish, so the contrast threshold can be lower without harming readability.
Why test on white and black backgrounds? ▼
White and black are the two most common UI backgrounds, and they bracket the contrast space. If a color fails on both, it cannot work as text anywhere; if it passes on one, you know which dark/light mode it suits. Testing both also confirms the color works in both light and dark themes.
Can I use the browser color picker? ▼
Yes. The tool includes a native HTML color input so you can pick any color visually instead of typing HEX codes. The picker integrates with your OS color tools, including eyedroppers in Chrome and Safari that let you sample colors from anywhere on screen.
Is the calculation private? ▼
Yes. All contrast calculations run in your browser using JavaScript. No colors, design data, or analytics about your specific tests are sent to any server.
How is contrast ratio calculated? ▼
The contrast ratio is computed using relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's. Luminance is derived from the gamma-corrected RGB values weighted for human eye sensitivity (red 0.2126, green 0.7152, blue 0.0722). Pure white-on-black gives 21:1, the maximum possible.
Why does my "passing" color still look hard to read? ▼
WCAG ratios are minimum thresholds, not optimal targets. Real-world readability depends on font weight, antialiasing, screen quality, ambient light, and user vision. A 4.51:1 ratio technically passes AA but leaves no margin for error. For body text, target 7:1 or higher when possible.
What are the WCAG levels A, AA, and AAA? ▼
WCAG defines three conformance levels: Level A is the minimum (must meet), AA is the standard for most public sites and required by EU/US accessibility law, and AAA is the strictest (gold standard, often impractical for entire sites but recommended for critical content). Most accessibility audits target AA conformance.