Color Contrast Checker
BetaCheck if your text and background color combination passes WCAG accessibility guidelines.
- Free
- No sign-up
- Runs in your browser
- Works on mobile
Color Contrast Checker at a glance
- Input
- Foreground and Background Colors
- Output
- Contrast Ratio and WCAG Compliance Status
- Privacy
- Everything happens on your device. Nothing is uploaded.
- Price
- Free, no account, no watermark.
How to use Color Contrast Checker
- 1Enter a text color (foreground) and a background color.
- 2The tool instantly calculates the contrast ratio between the two colors.
- 3It displays whether the combination passes or fails WCAG AA and AAA standards for normal and large text.
Features
- Live contrast ratio calculation.
- WCAG AA and AAA compliance status.
- Accepts HEX, RGB, or HSL color formats.
- Visual preview of text on the chosen background.
Color Contrast Checker FAQ
What is WCAG?
WCAG stands for Web Content Accessibility Guidelines. It is a set of standards to make web content more accessible to people with disabilities, including visual impairments.
What is a good contrast ratio?
WCAG AA requires a ratio of at least 4.5:1 for normal text and 3.1:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
Why does contrast matter?
High contrast ensures that text is legible and readable for everyone, especially users with low vision or color blindness.
Related tools
More developer toolsLast updated