Contrast Checker
This tool allows you to check the contrast between two colors to ensure they meet accessibility standards. It also allows you to adjust the colors to meet the required contrast ratio and provides a visual preview of the contrast.
Contrast Ratio:
21.00:1WCAG AA: Pass Fail
WCAG AAA: Pass Fail
The quick brown fox jumps over the lazy dog.
WCAG AA: Pass Fail
WCAG AAA: Pass Fail
Large Text (~24px+)
Bold Text (bold & ~18.7px+)WCAG AA: Pass Fail
WCAG (Web Content Accessibility Guidelines) is a standard for how to make the web more accessible. Part of the specification includes guidelines for text contrast to ensure readability for users with visual impairments.
WCAG defines contrast ratio requirements for different levels of accessibility:
- WCAG AA: Requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. It also requires a contrast ratio of at least 3:1 for graphical objects and user interface components (icons, inputs, etc.).
- WCAG AAA: Requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 18pt+ (~24px+) or 14pt+ (~18.7px+) and bold.