This tool helps you check color contrast ratios for accessibility compliance. Test multiple foreground and background color combinations against WCAG AA and AAA standards.
Paste your colors in the text areas below; the tool will test all combinations and show you which pairs meet accessibility requirements.
The Web Content Accessibility Guidelines (WCAG) 2.1 and newer define minimum contrast ratios to ensure text is readable for people with visual impairments.
WCAG AA is a lower requirement than WCAG AAA. Laws and regulations may require your website to comply with these requirements.
Applies to: regular text, images of text, placeholder text, hover/focus text.
Exempt: logotypes, decorative/invisible text.
Text < 24px (or < 19px if bold) must meet these requirements:
Text ≥ 24px (or ≥ 19px if bold) has relaxed requirements:
red, blue, rebeccapurple)#ff0000, #f00)rgb(255, 0, 0), rgba(255, 0, 0, 0.5))hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5))rgb(255 0 0), hsl(0 100% 50% / 0.5))