About the Color Contrast Checker
The Color Contrast Checker measures the contrast ratio between a text color and a background color and tells you whether the combination meets the WCAG 2.1 accessibility guidelines (AA and AAA, for normal and large text). Good contrast makes your content readable for everyone, including people with low vision. Pick two colors and see a live sample plus pass/fail results.
How to use
- Choose your text (foreground) and background colors.
- Read the contrast ratio and the live text sample.
- Check the AA / AAA pass or fail badges for normal and large text.
- Adjust the colors until you reach the level you need.
Common uses
- Meeting WCAG accessibility requirements.
- Designing readable text and UI.
- Auditing brand colors for accessibility.
- Choosing accessible link and button colors.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18pt (24px) regular, or 14pt (18.66px) bold, and larger.