Color Contrast Checker
How it Works
Select both a foreground and a background color. You can either enter hex color codes or use the color selector tool. The color input allows you to fine-tune your choices using the eye dropper tool. Once you've made your selections, the “WCAG Compliance Information” chart will display if your color combination meets accessibility standards.
| Element Type | AA | AAA |
|---|---|---|
| Small Text | Fail | Fail |
| Large Text | Fail | Fail |
Quote n. 19
What the world needs is more geniuses with humility, there are so few of us left.
Oscar Levant
What is color contrast?
This tool follows the Web Content Accessibility Guidelines (WCAG), which provide recommendations for improving web accessibility, including guidelines for color contrast. There are two levels of contrast ratio standards:
- Level AA: Requires a minimum contrast ratio of 4.5:1 for regular text, and 3:1 for large text (18pt or larger) or bold text.
- Level AAA: Requires a minimum contrast ratio of 7:1 for regular text, and 4.5:1 for large or bold text.
Adhering to these standards ensures your website is more accessible to users with visual impairments, including those with low vision or color blindness. For more details, check the official documentation.
Learn more