About This Tool
Check color contrast ratios between foreground text and background colors according to WCAG 2.1 accessibility guidelines. Enter colors as hex codes, RGB values, or HSL values and instantly see the contrast ratio along with pass/fail results for WCAG AA and AAA compliance at both normal and large text sizes.
Frequently Asked Questions
- What contrast ratio is required for WCAG compliance?
- WCAG AA requires 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. The maximum possible ratio is 21:1 (black on white).
- Why does color contrast matter?
- Sufficient contrast ensures text is readable for users with low vision, color blindness, or those viewing screens in bright sunlight. It's also a legal requirement under ADA and EU accessibility regulations for many websites.
- What is considered 'large text' in WCAG?
- Large text is defined as 18pt (24px) and above for regular weight, or 14pt (18.66px) and above for bold text. Large text has lower contrast requirements because it's inherently easier to read.
- Does this tool check contrast for non-text elements?
- WCAG 2.1 requires a 3:1 contrast ratio for UI components and graphical objects (buttons, icons, form fields). You can use this tool to verify those as well — just enter the component and background colors.