Color Contrast Checker

Check WCAG accessibility contrast ratios

Color Settings
Sample Text
Results
Click "Check Contrast" to see results

🔧 Related Tools

What is Color Contrast?

Color contrast refers to the difference in luminance between text (foreground) and its background. Proper contrast ensures that text is readable by people with visual impairments, including those with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for accessibility compliance.

This tool calculates the contrast ratio between two colors and determines if it meets WCAG standards for normal text (AA: 4.5:1, AAA: 7:1) and large text (AA: 3:1, AAA: 4.5:1).

All processing is done locally in your browser – your color choices never leave your device.

How to Use

Step 1: Enter text color (foreground) using HEX, RGB, or color picker.
Step 2: Enter background color using HEX, RGB, or color picker.
Step 3: Click "Check Contrast" to calculate the ratio.
Step 4: See if the combination passes WCAG AA or AAA standards.
Step 5: Copy the results using the "Copy Results" button.

The sample text preview updates to show your chosen colors.

Examples

Black on White: #000000 on #FFFFFF → Ratio 21:1 ✅ AAA Pass
Gray on White: #888888 on #FFFFFF → Ratio 3.0:1 ❌ Fails AA
Dark Blue on Light Blue: #0000FF on #ADD8E6 → Ratio 4.2:1 ✅ AA Pass

Who Uses Color Contrast Checkers?

  • Web Designers – ensuring accessible designs.
  • UI/UX Designers – creating inclusive interfaces.
  • Front-End Developers – implementing accessible styles.
  • Accessibility Specialists – auditing websites.
  • Product Managers – meeting compliance standards.

Pro Tips

  • WCAG AA is the legal standard for many organizations.
  • Large text (18pt or 14pt bold) has lower contrast requirements.
  • Test both normal and large text for comprehensive accessibility.
  • Use the color pickers for visual color selection.
  • Save accessible color combinations for your design system.

Frequently Asked Questions

What is the WCAG contrast ratio?
WCAG defines minimum contrast ratios: AA requires 4.5:1 for normal text, AAA requires 7:1. Large text (18pt+) has lower requirements.
How is contrast ratio calculated?
The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are relative luminances of the lighter and darker colors.
What if my color is not in HEX?
You can enter colors as HEX (#RRGGBB), RGB (rgb(0,0,0)), or use the color picker.
Does it work with transparent colors?
This tool requires opaque colors. For transparency, you need to know the underlying background color.
Is my data sent to a server?
No, all calculations happen locally in your browser.
What about color blindness?
This tool checks luminance contrast, which benefits all users, including those with color blindness.
Can I use this for mobile apps?
Yes, contrast guidelines apply to all digital interfaces, including mobile apps and software.