Color Contrast Checker

Check foreground and background color contrast ratio against WCAG AA and AAA accessibility standards.

Normal text sample — The quick brown fox.

Large text sample (18pt+)

Contrast ratio
Standard Level Min ratio Result
Normal textWCAG AA4.5:1
Large text (≥18pt / ≥14pt bold)WCAG AA3:1
Normal textWCAG AAA7:1
Large text (≥18pt / ≥14pt bold)WCAG AAA4.5:1

How to use the Color Contrast Checker

  1. Use the color pickers or enter HEX codes for foreground (text) and background colors.
  2. The contrast ratio and WCAG compliance results update instantly.
  3. Use Swap to reverse foreground and background.

WCAG contrast requirements

  • AA — Normal text: minimum 4.5:1. Required for WCAG 2.1 Level AA compliance.
  • AA — Large text: minimum 3:1. Large text is 18pt (24px) regular or 14pt (18.67px) bold.
  • AAA — Normal text: minimum 7:1. Enhanced accessibility standard.
  • AAA — Large text: minimum 4.5:1.

How contrast ratio is calculated

Relative luminance (L) is calculated from the sRGB color channels after gamma linearization: L = 0.2126R + 0.7152G + 0.0722B. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.