Free Color Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA accessibility standards with live preview.
Part of Yoopla's 445+ free browser tools.
Preview Text (Large)
This is how your regular body text will look with these color choices. Make sure it's readable.
Small text needs higher contrast to remain accessible.
Contrast Ratio
How to Use Color Contrast Checker
- 1
Enter or pick a foreground (text) color.
- 2
Enter or pick a background color.
- 3
The tool calculates the contrast ratio instantly.
- 4
Check WCAG AA and AAA compliance for normal and large text.
Frequently Asked Questions
What is WCAG?▾
WCAG (Web Content Accessibility Guidelines) defines standards for making web content accessible to people with disabilities.
What contrast ratio is needed for AA?▾
4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
What about AAA compliance?▾
7:1 for normal text and 4.5:1 for large text.
Related Tools
Explore the ecosystem around
Color Contrast Checker
Category: Developer Tools
Use this tool as your starting point, then branch into adjacent tools, topic hubs, comparisons, and free alternatives.
Related Tools
Discover other tools that work great with Color Contrast Checker
Color Palette Generator
Generate and export color palettes.
Explore More Tools →Pixel to REM Converter
Convert PX to REM and back.
Explore More Tools →HEX to RGB
Convert HEX color codes to RGB format instantly.
Explore More Tools →JSON Formatter
Beautify and format JSON data instantly online.
Explore More Tools →JSON Validator
Check if your JSON is valid in one click.
Explore More Tools →Base64 Encoder
Convert text to Base64 encoding online for free.
Explore More Tools →Related Articles & Guides
Learn more about using tools effectively
Tool Comparisons
Compare features and choose the right tool
Popular Alternatives
Free alternatives to popular paid tools
Use Cases
Practical use cases with this tool
Best Tools Collections
Curated lists of top-rated tools