WCAG Color Contrast Checker

Check if your color combinations meet accessibility standards. Verify contrast ratios against WCAG (Web Content Accessibility Guidelines) recommendations and ensure your designs are readable for everyone.
Aa Bb Cc Dd Ee The quick brown fox jumps over the lazy dog.

Foreground (Text) Color

Background Color

Customize Sample Text

👁️

Understanding WCAG Color Contrast

Color contrast is a fundamental aspect of digital accessibility. Proper contrast ensures content is readable for everyone, including the 285 million people worldwide with visual impairments and the 300 million with color vision deficiencies.

WCAG Contrast Requirements

  • WCAG 2.1 Level AAA (Normal text): Requires a contrast ratio of at least 7:1 for normal text, providing exceptional readability for all users
  • WCAG 2.1 Level AA (Normal text): Requires a contrast ratio of at least 4.5:1 for normal text, meeting legal requirements in many jurisdictions
  • WCAG 2.1 Level AAA (Large text): Requires a contrast ratio of at least 4.5:1 for large text, ensuring optimal visibility
  • WCAG 2.1 Level AA (Large text): Requires a contrast ratio of at least 3:1 for large text, meeting baseline accessibility standards
  • UI Components: Need a minimum contrast ratio of 3:1 against adjacent colors to ensure interactive elements are perceivable

What Our Grades Mean

  • A+ (7:1 or higher): Exceptional contrast that exceeds all WCAG requirements, suitable for all text and UI elements
  • A (4.5:1 to 7:1): Strong contrast that meets WCAG AA requirements for all text sizes and AAA for large text
  • B (3:1 to 4.5:1): Moderate contrast, suitable only for large text (AA) and UI components
  • C (2:1 to 3:1): Poor contrast that fails WCAG requirements for text but may be acceptable for decorative elements
  • F (less than 2:1): Insufficient contrast that creates significant accessibility barriers and should be avoided

What is "Large Text"?

According to WCAG standards, "large text" is defined as text that is:

  • Bold text at least 14 points (typically 18.66px) OR
  • Regular text at least 18 points (typically 24px)

Why Contrast Matters

Good color contrast doesn't just benefit those with permanent vision impairments—it improves readability for:

  • Users with temporary vision conditions (eye strain, dilated pupils)
  • People using screens in bright sunlight or high-glare environments
  • Older adults experiencing age-related vision changes
  • Anyone using devices with low brightness settings to conserve battery
Frequently Asked Questions
How do I pick a specific color from my image? +

After uploading your image, the Color Picker tool is enabled by default. Simply move your cursor over the image and click on any color you want to pick. The selected color will appear in the "Your Selected Colors" section.

What's the difference between picked colors and dominant colors? +

Picked colors are individual colors you manually select by clicking on specific points in your image. Dominant colors are automatically extracted by analyzing your entire image to find the most frequently occurring and visually significant colors.

How does the contrast checker work? +

The contrast checker calculates the ratio between foreground (text) and background colors to determine if they meet accessibility standards. You can set colors by clicking on any color swatch (for background) or right-clicking (for foreground). The tool will show you if your color combination passes WCAG guidelines for normal text, large text, and UI components.

Can I save my color palette? +

Yes! You can export your colors in three formats: CSS variables, SCSS variables, or a JSON palette file. Use the export buttons at the bottom of the tool to download your color palette in your preferred format.

What do the contrast grades (A+, A, B, C, F) mean? +

These grades represent the contrast ratio between your foreground and background colors:

  • A+ (7:1 or higher): Excellent contrast, suitable for all text and UI elements
  • A (4.5:1 to 7:1): Good contrast, suitable for normal text
  • B (3:1 to 4.5:1): Moderate contrast, only use for large text or UI elements
  • C (2:1 to 3:1): Poor contrast, not recommended for text
  • F (less than 2:1): Insufficient contrast, avoid using this combination
How can I add colors from the palette to my picked colors? +

Double-click on any color in the generated palette or dominant colors section to add it to your selected colors. This allows you to save colors you like for future reference.