Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background and see AA/AAA pass or fail.
Large text means 18.66px bold or 24px regular and up. WCAG thresholds: AA needs 4.5:1 (normal) / 3:1 (large); AAA needs 7:1 (normal) / 4.5:1 (large).
About this tool
A color contrast checker measures how readable text is against its background using the WCAG contrast ratio. Designers, developers, and accessibility auditors use it to make sure interfaces meet WCAG 2.1 AA and AAA requirements so that people with low vision or color vision deficiency can read content comfortably. This tool computes the ratio instantly as you type two hex colors.
The contrast ratio ranges from 1:1 (no contrast — identical colors) up to 21:1 (black on white). WCAG sets pass thresholds by text size: AA requires at least 4.5:1 for normal text and 3:1 for large text, while the stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. Large text is defined as 18.66px bold or 24px regular and above.
Everything runs locally in your browser — no colors are uploaded or stored. You get the precise ratio, four AA/AAA badges, and a live preview rendering your exact foreground and background so you can judge readability at a glance before shipping a design.
Examples
Input
Foreground #000000 on background #ffffff
Output
21:1 — passes AA and AAA for normal and large text
Pure black on white is the maximum possible contrast ratio.
Input
Foreground #777777 on background #ffffff
Output
4.48:1 — fails AA normal, passes AA large
Just below the 4.5:1 AA threshold for normal text.
Input
Foreground #201b18 on background #f5f1ea
Output
15.15:1 — passes AA and AAA for normal and large text
Common uses
- Designers verifying body text meets WCAG AA contrast before handoff
- Frontend developers checking button and link colors pass accessibility audits
- Accessibility auditors documenting AA/AAA compliance for a design system
- Marketers confirming ad and landing-page copy is readable on brand backgrounds
- Product teams choosing accessible palettes that pass for both normal and large text
- QA engineers spot-checking contrast on new UI components before release
Frequently asked questions
What contrast ratio do I need to pass WCAG?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Large text is 18.66px (14pt) bold or 24px (18pt) regular and larger. It has a lower contrast requirement because bigger glyphs are easier to read.
How is the contrast ratio calculated?
It uses WCAG relative luminance: each color's luminance is computed, then the ratio is (lighter + 0.05) / (darker + 0.05), giving a value between 1:1 and 21:1.
Are my colors uploaded anywhere?
No. All calculations happen locally in your browser. Nothing is sent to a server, logged, or stored.
What's the highest possible contrast ratio?
21:1, which is pure black (#000000) text on a pure white (#ffffff) background. That passes every WCAG level.
Learn more
Embed this tool
Free to use on your own site. It stays fast and private for your visitors.
<iframe src="https://hypercho.com/embed/color-contrast-checker" title="Color Contrast Checker (WCAG) by Hypercho" width="100%" height="560" style="border:1px solid #d8cec3;border-radius:16px;max-width:720px" loading="lazy"></iframe>
<p style="font:13px sans-serif"><a href="https://hypercho.com/tools/color-contrast-checker" target="_blank" rel="noopener">Color Contrast Checker (WCAG)</a> by <a href="https://hypercho.com" target="_blank" rel="noopener">Hypercho</a></p>Related tools
Doing this by hand every week?Hand it to an AI employee.
A free tool handles one job at a time. If your team repeats a workflow like this every day, we'll design, build and run an AI employee that owns it.
Book a strategy call