WCAG Color Contrast Checker Online Free
Verify foreground and background color combinations against WCAG contrast rules. Websites must meet Web Content Accessibility Guidelines (WCAG) to ensure text readability for users with visual impairments.
Your inputs are processed locally in your browser. Nothing is uploaded to any server.
The quick brown fox
Small text sample — 14px body copy
Very small caption text for comparison
Inverted preview
Same colors, inverted
Contrast Ratio
5.47:1
Why You Need a WCAG Color Contrast Checker
Websites must meet Web Content Accessibility Guidelines (WCAG) to ensure text readability for users with visual impairments.
How WCAG Color Contrast Checker Works
The tool calculates relative luminance of foreground and background colors and evaluates contrast ratios against WCAG AA and AAA rules.
When to Use This Tool
Use this to audit website colors, check accessibility compliance, and design readable UI templates.
Step-by-Step Usage
- Input or pick your text (foreground) color.: Input or pick your text (foreground) color.
- Input or pick your background color.: Input or pick your background color.
- Check pass/fail status for AA and AAA accessibility standards.: Check pass/fail status for AA and AAA accessibility standards.
Advantages
- Verifies: Verifies compliance with WCAG AA and AAA standards
- Calculates: Calculates exact contrast ratio scores (e.g., 4.5:1)
- Runs: Runs locally in browser memory securely
Privacy and Safe Usage
Avoid pasting secrets, API keys, private tokens, or credentials into formatting, decoding, or testing tools unless you fully understand how the page processes the data.
Related Tools
Here are some other related utility tools you can explore to streamline your workflows:
FAQs
What is the minimum ratio for WCAG AA?
Normal text requires a contrast ratio of at least 4.5:1, while large text (18pt+) requires at least 3:1.