Color Contrast Checker
Audit color contrast ratios for foreground and background combinations. Verifies WCAG 2.1 AA and AAA compliance for accessible web design.
Ready to use Color Contrast Checker?
Runs instantly in your browser sandbox. No sign-up required.
Real-time compliance badge for normal text, large text, and UI components.
Test background and text combinations with live UI rendering.
Supports HEX, RGB, and HSL color value formats.
WCAG 2.1 Color Contrast Guidelines
Ensuring sufficient contrast between text and background colors is essential for digital accessibility. The Web Content Accessibility Guidelines (WCAG) specify minimum relative luminance ratios:
- Level AA (Normal Text): Minimum ratio of 4.5:1
- Level AA (Large Text): Minimum ratio of 3.0:1
- Level AAA (Normal Text): Minimum ratio of 7.0:1
- Level AAA (Large Text): Minimum ratio of 4.5:1
Frequently Asked Questions
What is the minimum WCAG AA contrast ratio requirement for normal text?
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt bold).
How is visual contrast ratio calculated?
Contrast ratio is calculated using relative luminance values of the foreground and background colors according to the formula: (L1 + 0.05) / (L2 + 0.05).