Color Contrast Checker

Check the color contrast of your text and background colors according to WCAG 2 guidelines. Ensure accessibility compliance.

Aa
Preview
0.00
-

WCAG AA (Normal Text)

-

WCAG AA (Large Text)

-

WCAG AAA (Normal Text)

-

WCAG AAA (Large Text)

-

Preview

Large Text (18pt+ or 14pt bold)
Normal text. This is standard body text that appears in paragraphs and content areas.
Small text. Use this for captions, footnotes, and supplementary information.

Link copied to clipboard!

Copy the code below and paste it into your website to embed this color contrast checker as a widget.

About Color Contrast Checker

What is WCAG?

WCAG (Web Content Accessibility Guidelines) is a set of recommendations for making web content more accessible to people with disabilities. The guidelines define three levels of conformance: A, AA, and AAA. Level AA is the minimum standard most websites should meet.

Why Color Contrast Matters

Proper color contrast is essential for users with visual impairments, including color blindness, low vision, and those viewing content in challenging lighting conditions. High contrast ensures text is readable by everyone, improving the user experience and accessibility of your website.

Understanding Contrast Ratios

The contrast ratio is calculated using the relative luminance of the foreground and background colors. A ratio of 4.5:1 is required for normal text to meet WCAG AA, while 3:1 is acceptable for large text (18pt+ or 14pt bold). AAA level requires 7:1 for normal text and 4.5:1 for large text.

How to Use This Tool

Getting Started

Enter your background and foreground colors using hex codes, or use the color pickers to select colors visually. The tool will instantly calculate the contrast ratio and show you which WCAG levels your combination meets.

Color Input Methods

  • Hex Code: Enter a hex color code (e.g., #FFFFFF or #FFF)
  • Color Picker: Click the color picker to select a color visually
  • RGB/HSL: View the RGB and HSL values for your selected colors

Saving and Sharing

Click "Save Colors" to save your color combination for later. Use "Copy Link" to share your specific color combination with others via a URL that includes the colors as parameters.

Frequently Asked Questions

What is a good contrast ratio?
For WCAG AA compliance, you need a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. For AAA compliance, aim for 7:1 for normal text and 4.5:1 for large text. Higher ratios are always better for accessibility.
What is considered large text?
Large text is defined as 18 point (24px) or larger, or 14 point (18.66px) bold or larger. This is approximately 18px regular or 14px bold in CSS.
Do I need to meet WCAG AA or AAA?
WCAG AA is the minimum conformance level most websites should target. AAA provides enhanced accessibility but may not be achievable for all color combinations. Many organizations aim for AA compliance as a baseline.
Can I use this for UI components?
Yes! The tool shows both normal and large text compliance. UI components like buttons and form labels should meet the same contrast requirements as text content.
What if my colors don't pass?
If your color combination doesn't pass, try adjusting the lightness of your colors. Darker text on lighter backgrounds (or vice versa) typically provides better contrast. You can use the color picker to fine-tune your colors.
Does this work for images?
This tool calculates contrast for solid color combinations. For images with text overlay, ensure the text color meets contrast requirements. Consider adding a background or shadow to improve contrast if needed.