Color Contrast Checker
Normal text ≥ 4.5:1
Large text ≥ 3:1
Normal text ≥ 7:1
Large text ≥ 4.5:1
How to Use
- 1Pick your foreground (text) color using the color picker or type a HEX value.
- 2Pick your background color the same way.
- 3The contrast ratio and WCAG pass/fail results update instantly.
- 4Use the preview area to see how your text looks with the chosen colors.
- 5If contrast is too low, try the suggested foreground colors shown below the badges.
Features
AA and AAA checks for normal and large text.
Ratio updates as you pick colors — no button click needed.
See how your text actually looks against the background.
Get alternative foreground colors that pass AA when current fails.
All calculations are done locally in your browser.
Enter HEX codes or use the native color picker.
Use Cases
FAQ
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What is the minimum contrast ratio for accessibility?
For WCAG 2.1 Level AA, normal text needs a contrast ratio of at least 4.5:1, and large text (18pt / 24px or 14pt bold / 18.67px bold) needs at least 3:1. Level AAA requires higher ratios.
What color formats are supported?
You can enter HEX codes (e.g., #FF5733 or #F73), RGB notation (e.g., rgb(255,87,51)), or use the color pickers for point-and-click selection. Named colors like 'red' or 'navy' are also accepted.
What does WCAG AA vs AAA mean?
WCAG AA is the standard level required by most accessibility laws worldwide (ADA in the US, EN 301 549 in Europe). WCAG AAA is the enhanced level for the highest accessibility, recommended for critical or specialized content such as government services.