WCAG Color Contrast Checker

Ensure your website is readable and accessible for everyone. Instantly check your text and background color combinations against WCAG 2.1 guidelines.

Preview Text

This is some sample text to demonstrate the color contrast. You can use it to see how readable your color combination is.

This is larger, bold text (18pt).

Contrast Ratio
2.33
WCAG 2.1 Results

Normal Text

AAFail
AAAFail

Large Text (18pt+ or 14pt+ bold)

AAFail
AAAFail

How Our Contrast Checker Works

  1. 1
    Enter Your Colors: Input the foreground (text) and background colors using their HEX codes (e.g., #FFFFFF). You can also use the handy color picker to select them visually.
  2. 2
    See Instant Results: The tool immediately calculates the contrast ratio and shows you a live preview of how your text will look.
  3. 3
    Review Compliance: We provide clear "Pass" or "Fail" indicators for WCAG AA and AAA levels for both normal and large text, so you know exactly where you stand.

Why Accessibility Matters

Reach a Wider Audience

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. By ensuring high contrast, you make your content usable for them, as well as for people with low vision or age-related vision loss.

Improve User Experience for All

Good contrast isn't just for people with visual impairments. It improves readability for everyone, especially in non-ideal conditions like on a dim screen, in bright sunlight, or when multitasking. Clear content is good business.

Understanding the WCAG Ratings

Level AA (The Standard)

  • Normal Text: Requires a contrast ratio of at least 4.5:1.
  • Large Text (18pt+ or 14pt+ bold): Requires a ratio of at least 3:1.

This is the goal for most websites and applications. It provides enough contrast for users with moderate low vision or color blindness to read content without assistive technology.

Level AAA (Enhanced)

  • Normal Text: Requires a contrast ratio of at least 7:1.
  • Large Text (18pt+ or 14pt+ bold): Requires a ratio of at least 4.5:1.

This level provides enhanced accessibility, making content readable for a wider audience, including those with more significant vision loss. While not always required, achieving AAA is a best practice for sites focused on accessibility.

Frequently Asked Questions

What is color contrast and why is it important?

Color contrast is the difference in brightness between a foreground color (like text or a button) and its background. It's crucial for readability. High contrast ensures that people with visual impairments, such as color blindness or low vision, can perceive and interact with your content effectively.

Are logos and incidental text required to meet these standards?

No, the WCAG guidelines provide exceptions for text that is part of a logo or brand name, as well as text that is purely decorative or part of an inactive UI component (like a disabled button). However, all informative text should meet the contrast requirements.

How can I fix a low contrast ratio?

If your color combination fails, you need to increase the difference in luminance. You can make the light color lighter (closer to white) or the dark color darker (closer to black). Use our tool's live preview to experiment until you find a combination that both passes the accessibility test and aligns with your design aesthetic.

100% Private and Secure

This contrast checker runs entirely in your browser. No data, colors, or information is sent to our servers. Your work remains completely private to you.