Contrast Checker
Check color contrast for WCAG accessibility compliance.
Color Selection
Choose foreground and background colors
Sample Text (24px Bold)
This is regular body text at 16px to demonstrate how your color combination appears in typical paragraph content.
WCAG Compliance
Web Content Accessibility Guidelines results
Contrast Ratio
21.00:1
Normal Text (<18px or <14px bold)
Level AA
Requires 4.5:1
AAA
Level AAA
Requires 7:1
AAA
Large Text (≥18px or ≥14px bold)
Level AA
Requires 3:1
AAA
Level AAA
Requires 4.5:1
AAA
About WCAG Contrast
WCAG Levels
- Level AA: Minimum accessibility standard for most situations
- Level AAA: Enhanced accessibility for optimal readability
- Normal Text: Requires higher contrast (4.5:1 for AA)
- Large Text: Lower contrast acceptable (3:1 for AA)
Why Contrast Matters
- Visual Impairments: Helps users with low vision
- Aging Eyes: Contrast sensitivity decreases with age
- Environment: Bright sunlight reduces screen contrast
- Legal Requirements: Many regions require WCAG compliance
Calculation Method
Contrast ratio is calculated using relative luminance as defined by WCAG 2.1. The formula considers human perception of brightness, with green contributing most to perceived luminance, followed by red, then blue.
Related Tools
Analyze the readability of your text using multiple metrics
Convert colors between HEX, RGB, HSL, and HSB formats