WCAG Color Contrast Checker
AA/AAA contrast ratio for text and backgrounds
Check WCAG 2.1 AA and AAA color contrast ratios online. Instantly verify text legibility, get accessible color suggestions and test any foreground/background combination. Essential tool for designers building accessible interfaces.
Texto grande (24px bold)
Texto normal (16px) — The quick brown fox jumps over the lazy dog.
Texto pequeño (12px) — verificar accesibilidad en todos los tamaños.
// quick guide
Color contrast is the difference in light between a font (or anything in the foreground) and its background. Web Content Accessibility Guidelines (WCAG) define specific contrast ratios to ensure that text is readable for users with visual impairments or color blindness.
How to use this tool:
- Input the foreground (text) and background colors using hex codes or the color pickers.
- The tool instantly calculates the contrast ratio.
- Check if the combination passes the WCAG AA (minimum) and AAA (enhanced) standards for both normal and large text.
- Use the slider controls to fine-tune the colors and find an accessible match.
// frequently asked questions
What are the WCAG AA and AAA contrast requirements?
For normal text, WCAG AA requires a contrast ratio of at least 4.5:1, while AAA requires 7:1. For large text (18pt+ or 14pt bold), the requirements are relaxed to 3:1 for AA and 4.5:1 for AAA.
What qualifies as large text in accessibility?
Large text is defined as text that is at least 18 points (approx. 24px) in size, or 14 points (approx. 18.6px) in size if it is styled as bold.
Why is contrast checker important for web design?
Good color contrast is essential for readability. Testing your designs against WCAG standards ensures your site is usable for everyone, including those with low vision, color blindness, or users reading in bright sunlight.