Astronomical Code Logo

Astronomical Code

Toolbox
Back to all tools

Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards

Foreground Color (Text)

This is the color of your text or foreground elements.

Background Color

This is the color of your background elements.

Contrast Results

0:1

Contrast Ratio

WCAG 2.1 Compliance

AA Level

Normal Text: Fail
Large Text: Fail

AAA Level

Normal Text: Fail
Large Text: Fail

AA Level: Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

AAA Level: Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Large Text: Text that is at least 18pt (24px) or 14pt (18.5px) bold.

Text Preview

Large Text (24px)

Normal Text (16px) - This is how your text will look with the selected colors.

Small Text (14px) - Make sure this is still readable for all users.

This preview shows how text will appear with your selected color combination.

About Color Contrast

Color contrast is essential for making content accessible to people with visual impairments, including those with color blindness or low vision.

The Web Content Accessibility Guidelines (WCAG) provide standards for minimum contrast ratios to ensure text is readable for all users.

Why is contrast important?

  • Improves readability for all users, especially in poor lighting conditions
  • Makes content accessible to people with visual impairments
  • Ensures compliance with accessibility standards and regulations
  • Creates a better user experience for everyone

Learn more about WCAG contrast guidelines

We value your privacy

We use cookies to enhance your browsing experience, serve ads, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies.