How to Use the Color Contrast Checker
Our WCAG color contrast checker helps designers and developers ensure their color choices meet accessibility standards. Simply pick your foreground (text) and background colors, and instantly see the contrast ratio along with WCAG 2.1 compliance results.
Step-by-Step Instructions
- Select your foreground (text) color using the color picker or enter a hex code
- Select your background color using the color picker or enter a hex code
- View the contrast ratio and WCAG compliance badges instantly
- Check the live preview to see how text looks with your chosen colors
- Use the swap button to reverse foreground and background
- If failing AA, use the suggestions to find a compliant color
Why Color Contrast Matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Poor color contrast makes content difficult or impossible to read for these users, as well as for people with low vision or those viewing screens in bright sunlight.
Understanding WCAG Levels
WCAG 2.1 defines three conformance levels: A (minimum), AA (standard), and AAA (enhanced). Most accessibility laws and guidelines require AA compliance. The contrast requirements differ based on text size and weight.
Tips for Accessible Color Design
- Never rely on color alone to convey information
- Test your designs with grayscale to check contrast without color
- Use dark text on light backgrounds or light text on dark backgrounds
- Avoid pure red/green combinations which are problematic for color-blind users
- Consider using patterns or icons alongside color coding