Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background and see AA/AAA pass or fail.
Updated June 2026
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).
How to use the Color Contrast Checker (WCAG)
- 1
Enter your colors
Type a foreground (text) hex and a background hex, or use the swatch pickers to choose them visually.
- 2
Read the ratio
The contrast ratio (e.g. 4.7:1) and a live preview update instantly as you change either color.
- 3
Check compliance
The AA and AAA badges show pass or fail for both normal and large text. Adjust colors until it passes.
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
Related tools
Color Picker
Explore any color — variations, harmony and accessibility.
Color Blindness Simulator
Preview how your colors look to color-blind users.
Color Names
Browse named colors with their hex and RGB codes.
Color Palette Generator
Auto-generate balanced color palettes.
CSS Gradient Maker
Build CSS gradients with a live preview.
Palette Creator
Build a color palette from scratch.
Embed this tool
Free to use on your own site — it stays fast and private for your visitors.
Paste this where you want the tool to appear:
<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>