COLOR
CONTRAST
CHECKER

  • Quickly check if your colors are readable
  • Instantly see contrast between any two colors
  • Fast, free, and fully WCAG-friendly
Foreground:
Background:

Contrast ratio:

21.00 : 1

Large text.

Text with minimum size 18pt (equivalent to 24px) require a contrast ratio of 3.0 or above for an AA rating, and minimum 4.5 for an AAA rating.

OBS! 14pt (19px) bold text also classifies as large.

Pass · WCAG AA large (≥3.0)Pass · WCAG AAA large (≥4.5)

Normal text.

Text with minimum size 12pt (equivalent to 16px) should have a contrast ratio of minimum 4.5 for an AA rating, and 7.0 for an AAA rating.

Pass · WCAG AA normal (≥4.5)Pass · WCAG AAA normal (≥7.0)

HOW IS IT CALCULATED?

This tool uses the calculation as defined by the Web Content Accessibility Guidelines (WCAG 2.1) for determining the contrast ratio between two colors. It measures the difference in relative luminance and expresses it as a ratio like 8:1.

WHY DOES IT MATTER?

Color contrast matters because it directly affects readability, accessibility, and overall user experience. When text and background colors don’t have enough contrast, people with visual impairments, including color blindness and low vision, may struggle to read the content.

Users without any vision impairments can still find low-contrast designs difficult to navigate, especially on smaller screens or in bright environments. Strong color contrast that meets accessibility standards (such as WCAG), contributes to designs that are clear, professional, and easy to use for everyone.