Free Color Contrast Checker

The Web Content Accessibility Guidelines (WCAG) are the international standard for web accessibility, published by the World Wide Web Consortium (W3C). Version 1.0 launched in 1999, version 2.0 in 2008, and version 2.1 in 2018. Contrast ratio requirements exist because approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and aging naturally reduces contrast sensitivity. Low contrast text is the single most common accessibility barrier on the web — WebAIM's annual survey of 1 million homepages consistently finds that 83–86% have detectable contrast failures. Meeting WCAG contrast ratios ensures readability for people with low vision, color blindness, and age-related visual decline.

The contrast ratio is computed using the relative luminance of the two colors according to the WCAG 2.1 algorithm. Each color's RGB values are converted to linear light values, then combined using the sRGB luminance formula (0.2126R + 0.7152G + 0.0722B). The ratio is calculated as (lighter luminance + 0.05) / (darker luminance + 0.05), producing a value between 1:1 (no contrast) and 21:1 (maximum contrast, black on white). The formula weights green most heavily because human vision is most sensitive to green light, followed by red, then blue — which is why blue text on dark backgrounds is particularly hard to read.

WCAG 2.1 defines two conformance levels for contrast. AA (the minimum acceptable standard) requires 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). AAA (the enhanced standard) requires 7:1 for normal text and 4.5:1 for large text. Non-text UI elements like icons, buttons, and form field borders require at least 3:1 against adjacent colors under Success Criterion 1.4.11. Most legal and regulatory frameworks (ADA, Section 508, EAA) reference WCAG AA as the minimum requirement.

WCAG 3.0 (still in draft as of 2026) proposes replacing the current contrast ratio with APCA (Accessible Perceptual Contrast Algorithm), developed by Andrew Somers. APCA is direction-aware — it produces different scores for dark text on light backgrounds versus light text on dark backgrounds, which better matches human perception. It also accounts for font size and weight more granularly. While APCA is more perceptually accurate, WCAG 2.1 ratios remain the legal and compliance standard. This checker uses the current WCAG 2.1 algorithm that regulators and auditors reference.

Meeting WCAG contrast ratios significantly improves readability for most colorblind users, but it's not a complete guarantee. Someone with deuteranopia (red-green color blindness) may struggle to distinguish between red and green elements even if both have sufficient contrast against their background. Best practice is to never rely on color alone to convey information — always pair color with text labels, patterns, or icons. The contrast checker addresses luminance contrast, which is the most impactful factor, but comprehensive accessibility also requires considering color independence.

You don't have to change your brand colors, but you may need to adjust how you use them. Common solutions include: darkening or lightening the text shade of your brand color for body text while keeping the original for decorative elements, using your brand color for large text or headings (which have a lower 3:1 threshold) while using a higher-contrast neutral for body copy, and pairing your brand color with a carefully chosen background that achieves the required ratio. Most brand palettes can achieve compliance with minor adjustments that preserve the visual identity.