Contrast Calculator
Check color contrast for WCAG accessibility online for free. Calculate contrast ratio, test AA/AAA compliance and simulate color blindness.
Colors to Test
Contrast Ratio
Excellent! Passes all WCAG levels
Small Text
4.5:1
Large Text
3:1
Small Text
7:1
Large Text
4.5:1
Text Preview
This is an example of small text (14px). Accessibility is important.
Medium text (18px) with normal font
Large Text (24px Bold)
Color Blindness Simulation
About Contrast and Accessibility
Color contrast is fundamental to web accessibility. Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Adequate contrast ensures your content is readable for all users.
WCAG Levels
- AA Small Text: Minimum ratio of 4.5:1 for normal text (smaller than 18px or 14px bold)
- AA Large Text: Minimum ratio of 3:1 for large text (18px+ or 14px+ bold)
- AAA Small Text: Minimum ratio of 7:1 for normal text - most stringent level
- AAA Large Text: Minimum ratio of 4.5:1 for large text - most stringent level
Types of Color Blindness
Deuteranopia (green-blind) and protanopia (red-blind) are the most common types. Tritanopia (blue-blind) is rarer. Testing your colors with simulations helps ensure your design works for everyone.
Accessibility Tips
Never rely solely on color to convey information - also use icons, text, or patterns. Test your design with different color blindness simulations. Use contrast tools during development, not just at the end.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) are web accessibility guidelines. They define minimum contrast requirements for readability.