This tool helps you check color contrast ratios for accessibility compliance. Test multiple foreground and background color combinations against the modern APCA algorithm (WCAG 3 draft) or WCAG 2.x (AA/AAA) standards.
Paste your colors in the text areas below; the tool will test all combinations and show you which pairs meet accessibility requirements.
APCA is a modern contrast algorithm developed for WCAG 3.0 (draft). APCA generates contrast values based on the Accessible Perceptual Contrast metric, which provides perceptually uniform measurements across the color spectrum.
Unlike WCAG 2.x, an APCA value of Lc 60 represents the same perceived readability contrast whether colors are light or dark. WCAG 2.x has known issues where it overstates contrast for dark colors.
Key characteristics:
Minimum APCA Lc values (simplified levels):
The Web Content Accessibility Guidelines (WCAG) 2.1 and newer define minimum contrast ratios to ensure text is readable for people with visual impairments. 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.
Normal Text (< 24px or < 19px if bold):
Large Text (≥ 24px or ≥ 19px if bold):
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))