Color Contrast Checker

Evaluate text-to-background color contrast for WCAG compliance

Color Selection

Quick Color Selection

Contrast Ratio

Contrast Ratio
21:1
Relative luminance comparison

Visual Preview

The quick brown fox jumps over the lazy dog. This sentence contains every letter of the alphabet and demonstrates how normal text appears with your chosen color combination.
Large Text Example (24px Bold)
Text Color
#000000
Background Color
#FFFFFF
Text Luminance
0.00
Background Luminance
1.00

Help

What is Color Contrast?

Color contrast ratio measures the difference in perceived brightness between text and background colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

Higher ratios make text more readable, especially for users with low vision or color blindness.

WCAG AA vs AAA Standards

WCAG AA (Recommended):

  • Normal text: 4.5:1 minimum
  • Large text (18pt+ or 14pt+ bold): 3:1 minimum

WCAG AAA (Enhanced):

  • Normal text: 7:1 minimum
  • Large text: 4.5:1 minimum

Most websites target AA compliance. AAA is recommended for text-heavy applications.

What is Large Text?

WCAG defines "large text" as:

  • 18 point (24px) or larger for regular weight
  • 14 point (18.66px) or larger for bold text

Large text has more lenient contrast requirements (3:1 for AA, 4.5:1 for AAA) because it's easier to read at lower contrast.

Understanding Relative Luminance

Relative luminance measures how bright a color appears to the human eye. It's calculated using:

  • Red channel: 21.26% weight
  • Green channel: 71.52% weight
  • Blue channel: 7.22% weight

Our eyes are most sensitive to green, which is why yellow (#FFFF00) appears very bright while blue (#0000FF) appears darker.

Common Mistakes
  • Light gray on white: #999 on #FFF is only 2.8:1 (fails)
  • Yellow on white: Very low contrast, hard to read
  • Red on black: While striking, may not meet AAA standards
  • Color-only differentiation: Don't rely on color alone to convey information
Tips for Good Contrast
  • Use very dark text on light backgrounds or vice versa
  • #595959 or darker on white meets AAA standards
  • Test your colors early in the design process
  • Remember that pure black on pure white can cause eye strain - consider #333 on #FFF
  • For dark mode, use off-white (#E0E0E0) on dark gray (#121212)
  • Test on actual devices in different lighting conditions
Exemptions

WCAG doesn't require contrast ratios for:

  • Logos and brand names
  • Inactive or disabled UI components
  • Purely decorative elements
  • Incidental text in photographs

However, improving contrast for these elements often improves overall user experience.