Color Contrast Checker (WCAG)

Check color contrast ratios for WCAG accessibility compliance.

Input

Output

Examples

Example 1

#000000 #FFFFFF

Example 2

#FF0000 #FFFF00

Example 3

#333333 #CCCCCC

Understanding WCAG Color Contrast Requirements

WCAG (Web Content Accessibility Guidelines) are international standards developed by W3C to make web content accessible to people with disabilities. Color contrast specifically measures the difference in light intensity between foreground text and background, ensuring readability for users with visual impairments, color blindness, or age-related vision changes.

WCAG 2.1 defines two compliance levels: AA requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18pt+ or 14pt+ bold), while AAA requires 7:1 and 4.5:1 respectively. Meeting these standards is not just good practice—it's often a legal requirement and positively impacts SEO rankings.

Poor contrast affects more than accessibility. Users reading on mobile devices in bright sunlight, on low-quality displays, or in power-saving modes all struggle with low-contrast text. Ensuring adequate contrast improves user experience for everyone, not just those with disabilities.

How Color Contrast Ratio is Calculated

Contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance is derived from RGB values with gamma correction applied to each channel.

This tool automatically converts your HEX color codes to RGB, calculates luminance values, determines the contrast ratio, and checks compliance against WCAG AA and AAA standards for both normal and large text.

The maximum possible contrast ratio is 21:1 (pure black #000000 against pure white #FFFFFF). A ratio of 1:1 means identical colors—completely unreadable. Most readable designs fall between 7:1 and 15:1.

Building Accessible Color Palettes

When choosing brand colors, consider accessibility from the start. Create lighter and darker tints of your primary colors to achieve different contrast levels for various UI elements. Document these variations in your design system.

Design separate color palettes for dark mode. Contrast ratios that work on light backgrounds often fail on dark backgrounds. Test both themes thoroughly against WCAG standards to ensure consistency across user preferences.

UI frameworks like Material Design and Ant Design provide accessible color systems out of the box, but customization can break accessibility. Always verify contrast ratios when modifying framework colors.

Don't rely on color alone to convey information. Add underlines to links, icons to buttons, and shape/pattern differences for charts. This helps colorblind users and improves usability when colors aren't displayed correctly.

WCAG Compliance and Legal Requirements

The ADA (Americans with Disabilities Act) in the US and EN 301 549 in Europe mandate WCAG 2.1 Level AA compliance for many websites. Accessibility lawsuits have increased significantly, with color contrast being a common violation.

E-commerce, finance, education, and government websites face strict accessibility requirements. Section 508 (US public sector) and BITV 2.0 (Germany) explicitly reference WCAG standards, making compliance legally binding.

Use automated accessibility scanners like Lighthouse, axe DevTools, and WAVE for initial testing. However, automated tools catch only 30-40% of issues—manual testing with real users, screen readers (NVDA, JAWS, VoiceOver), and diverse devices is essential.

Color contrast is just the beginning of WCAG compliance. Also address keyboard navigation, ARIA labels, semantic HTML, form accessibility, and focus indicators. Holistic accessibility creates truly inclusive digital experiences.

Loading tool…