← All Tools

Color Contrast Checker

Check WCAG 2.1 contrast ratios and get accessible color suggestions

Ad 728x90
Foreground (Text Color)

Tip: Your browser's color picker may include an eyedropper tool

r31
g41
b55
Background Color

Tip: Your browser's color picker may include an eyedropper tool

r255
g255
b255

Preview

The quick brown fox jumps over the lazy dog (24px Bold)

The quick brown fox jumps over the lazy dog (18px - Large Text)

The quick brown fox jumps over the lazy dog (16px - Normal Text)

The quick brown fox jumps over the lazy dog (12px - Small Text)

Sample Link

Contrast Ratio

14.68 : 1

Excellent

WCAG Compliance

LevelLarge Text (18pt+)Normal Text
AAPass ✓Pass ✓
AAAPass ✓Pass ✓

Common Color Pairs

WCAG Color Contrast Checker & Accessibility Validator

Verify that your text and background color combinations meet WCAG 2.1 accessibility standards. Check contrast ratios for both AA (minimum 4.5:1 for normal text) and AAA (enhanced 7:1) compliance levels. Essential for web developers, designers, and anyone building inclusive digital experiences.

Poor color contrast is one of the most common web accessibility failures, affecting millions of users with low vision, color blindness, or age-related visual impairment. Many jurisdictions now require WCAG compliance by law, making contrast checking a critical part of the design and development workflow.

Get instant pass/fail results with specific contrast ratios, plus smart suggestions for the nearest compliant color alternatives when your current choices fail. Test large text, small text, and UI component contrast requirements separately. All calculations happen in your browser.

Frequently Asked Questions

What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define contrast ratio as the relative luminance difference between foreground and background colors. A ratio of 4.5:1 is required for normal text at AA level, while 7:1 is needed for AAA. Large text (18pt or 14pt bold) has a lower threshold of 3:1 for AA.
What is the difference between AA and AAA compliance?
AA is the minimum level recommended for most web content and requires a contrast ratio of at least 4.5:1 for normal text. AAA is the highest level and requires 7:1, providing better readability for users with low vision. Most regulations reference AA as the standard to meet.
How do I fix a failing contrast ratio?
Increase the lightness difference between your text and background colors. You can darken the text, lighten the background, or both. This tool provides automatic suggestions that maintain your original hue while adjusting lightness to meet the target ratio.
Does this checker work for dark mode designs?
Yes. The contrast ratio formula is the same regardless of whether you are designing for light or dark mode. Simply enter your dark background as the background color and your light text as the foreground color. The WCAG requirements remain identical.
Are my color choices saved between sessions?
Yes. Your foreground and background color selections are automatically saved in your browser's local storage. When you return, the tool restores your last-used colors so you can pick up right where you left off. No account or sign-up is needed.