Tool
Contrast Checker
Ensure your colors are accessible. Check contrast ratios for WCAG AA and AAA compliance with live previews.
Normal Text
Large Text
Large Text Preview
(18pt / 24px normal, or 14pt / 18.66px bold)
Normal Text Preview (Bold)
This is how normal text looks. Good contrast makes content readable for everyone, including people with visual impairments.
About the Contrast Checker
The contrast checker calculates the visual difference between a foreground color (like text) and a background color. It compares this ratio against the Web Content Accessibility Guidelines (WCAG) to ensure your designs are legible for everyone, including users with visual impairments.
Understanding WCAG Guidelines
AA Level (Minimum Acceptable)
This is the global standard for web accessibility. It requires a contrast ratio of at least 4.5:1 for normal text and 3.0:1 for large text (typically 18pt or 14pt bold).
AAA Level (Enhanced)
The strictest standard for web accessibility. It requires a contrast ratio of at least 7.0:1 for normal text and 4.5:1 for large text. Aim for this when designing for audiences with low vision or cognitive disabilities.
How to fix failing contrast
- Darken or lighten the text: The easiest way to improve contrast is to make the foreground color significantly darker (on a light background) or lighter (on a dark background).
- Increase text size: If a color combination fails for normal text but passes for large text, try bumping up your font size to at least 18.66px bold or 24px regular.
- Desaturate colors: Highly saturated, bright colors often clash and create low contrast. Try reducing the saturation to improve legibility.