📌 Overview

Check the contrast ratio between two colors and see if your text meets WCAG AA and AAA accessibility standards.

🎨 Color Contrast Checker

Check the contrast ratio between two colors and see if your text meets WCAG AA and AAA accessibility standards.

🔒 All processing happens in your browser. No data is uploaded to any server.

📖 Deep Dive: Color Contrast Checker

Why contrast matters

Enough contrast lets users with poor vision, in bright environments, or who are older read text clearly; it is a basic requirement of accessible design.

WCAG standards

  • AA normal text: at least 4.5:1
  • AA large text: at least 3:1
  • AAA normal text: at least 7:1
  • AAA large text: at least 4.5:1

    • How it is calculated

    First convert sRGB to linear values, then compute relative luminance L = 0.2126R + 0.7152G + 0.0722B, and finally the ratio = (L1 + 0.05) / (L2 + 0.05).

    Tip

    Pure black on pure white is about 21:1, far above typical needs; light-gray text on a white background often fails.