Contrast Checker (WCAG)
Check color contrast for WCAG compliance.
Large Text (18pt+)
Normal body text — The quick brown fox jumps over the lazy dog. 0123456789
How to Use
Enter a foreground (text) color and a background color using HEX values, RGB, or the color picker. The tool calculates the contrast ratio and evaluates it against WCAG 2.1 success criteria for AA and AAA compliance at both normal and large text sizes. Results show a live preview of how the text will look.
Common Use Cases
- Ensuring text and background color combinations meet WCAG AA accessibility standards
- Testing button and link colors for sufficient contrast in UI designs
- Auditing existing website color schemes for accessibility compliance
- Choosing accessible text colors for colored banners, alerts, and badges
Frequently Asked Questions
What contrast ratio is required for WCAG compliance?
WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as "large text" under WCAG?
Large text is defined as 18 point (24px) regular weight or 14 point (18.66px) bold weight and above. Large text has a lower contrast requirement because it is inherently easier to read.
Why does my design fail WCAG even though the colors look fine to me?
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. WCAG contrast ratios ensure readability for all users, including those with low vision or color blindness.