Color Contrast Checker

Check WCAG 2.1 color contrast ratios for web accessibility. Test foreground and background colors for AA and AAA compliance.

Foreground (Text)
Background
Live Preview
Large Text (18pt+)
The quick brown fox jumps over the lazy dog
Normal Text (Regular)
The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.
Small Text (14px)
The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.
Quick Presets
WCAG 2.1 Guidelines

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text and images:

  • Level AA (Minimum): 4.5:1 for normal text, 3:1 for large text (18pt+)
  • Level AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text
  • Large text: 18pt (24px) or 14pt (18.5px) bold and larger
  • UI Components: Minimum 3:1 contrast for interactive elements
Contrast Ratio
21:1
Perfect contrast
Normal Text
WCAG AA (4.5:1)
PASS
Normal Text
WCAG AAA (7:1)
PASS
Large Text
WCAG AA (3:1)
PASS
Large Text
WCAG AAA (4.5:1)
PASS
UI Components
WCAG AA (3:1)
PASS