Color Contrast Checker

Check WCAG 2.1 contrast ratios between two colors for AA and AAA accessibility compliance.

Large heading sample

The quick brown fox jumps over the lazy dog. This is a body-text preview to judge real-world readability.

Small caption text — the hardest to read at low contrast.

Contrast ratio
8.26:1
AA — Normal text
Requires 4.5:1
Pass
AA — Large text (18pt+/14pt bold)
Requires 3:1
Pass
AAA — Normal text
Requires 7:1
Pass
AAA — Large text
Requires 4.5:1
Pass
AA — UI components & graphics
Requires 3:1
Pass

About WCAG color contrast

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between text and its background so content stays legible for users with low vision or color-vision differences. The ratio is calculated from the relative luminance of each color and ranges from 1:1 (identical) to 21:1 (pure black on pure white).

  • AA — Normal text: at least 4.5:1.
  • AA — Large text (≥18pt, or ≥14pt bold): at least 3:1.
  • AAA — Normal text: at least 7:1.
  • AAA — Large text: at least 4.5:1.
  • UI components & graphical objects: at least 3:1 against adjacent colors.