♿ Color Contrast Checker
Check WCAG AA / AAA accessibility compliance for foreground and background color pairs.
About Color Contrast Checker
When designing for the web, color contrast is one of the most critical accessibility factors. Text that looks fine on your monitor might be unreadable to someone with low vision or color blindness. This tool checks whether your foreground and background color combination meets the WCAG AA and AAA accessibility standards — the guidelines used worldwide for inclusive web design.
Enter your text color and background color in HEX, RGB, or HSL, and the tool instantly calculates the contrast ratio and tells you whether it passes at normal text size and large text size. Use it when designing buttons, cards, navigation, and body text to make sure your UI is readable by everyone, including users with visual impairments.
WCAG AA (4.5:1) — Minimum for normal text. Required for most accessibility standards.
WCAG AA Large (3:1) — For large text (18pt / 14pt bold) and UI components.
WCAG AAA (7:1) — Enhanced contrast. Best for body text on high-accessibility sites.
WCAG AAA Large (4.5:1) — Enhanced for large text.