About the Color Contrast Checker
Color contrast is one of the most critical factors in accessible web design. When text doesn't have enough contrast against its background, it becomes difficult or impossible to read for users with low vision, color vision deficiencies, or anyone viewing a screen in bright sunlight. The WCAG (Web Content Accessibility Guidelines) define minimum contrast ratios that every public-facing website should meet.
This checker implements the official WCAG 2.1 relative luminance formula, which accounts for gamma correction and the eye's differential sensitivity to red, green, and blue light. The resulting contrast ratio ranges from 1:1 (no contrast — identical colors) to 21:1 (pure black on pure white). WCAG AA requires 4.5:1 for body text and 3:1 for large text. WCAG AAA requires 7:1 and 4.5:1 respectively.
Accessibility compliance is increasingly a legal requirement in many countries under legislation like the ADA (USA), EN 301 549 (Europe), and the EAA (EU Accessibility Act). Using this tool during the design phase — before writing any code — is the fastest and cheapest way to ensure your color choices will meet those standards from the start.
Frequently Asked Questions
What contrast ratio do I need for WCAG compliance? +
WCAG AA requires a minimum ratio of 4.5:1 for normal text (under 18px regular or 14px bold) and 3:1 for large text. WCAG AAA, the highest standard, requires 7:1 for normal text and 4.5:1 for large text. Most organizations target AA as a baseline requirement since AAA can be difficult to achieve with certain brand color palettes. Our tool shows both AA and AAA pass/fail results simultaneously so you can plan accordingly.
What is the difference between WCAG AA and AAA? +
AA is the widely accepted minimum standard for web accessibility and the level required by most regulations, including the ADA and EN 301 549. AAA is a stricter standard that significantly improves readability for users with more severe visual impairments. While AAA is the gold standard, the WCAG documentation itself acknowledges that achieving AAA for all content is not always possible. For most projects, AA is the practical and legally sufficient target.
How is the contrast ratio calculated? +
The contrast ratio uses WCAG relative luminance. Each RGB channel is first linearized by applying gamma correction: values below 0.03928 are divided by 12.92; others are raised to the power of 2.4 after shifting. Luminance L is then 0.2126R + 0.7152G + 0.0722B. The ratio is (L_lighter + 0.05) / (L_darker + 0.05), and results range from 1:1 (no contrast) to 21:1 (black on white). The weighting toward green reflects the human eye's greater sensitivity to green wavelengths.
Why is color contrast important for accessibility? +
Around 300 million people worldwide have some form of color vision deficiency, and far more have low vision or use screens in bright conditions. Insufficient contrast makes content difficult or impossible to read for these users, effectively excluding them from your website or application. Beyond ethics and legality, good contrast improves readability for every user — studies consistently show that high-contrast text reduces cognitive load and reading errors for people with typical vision too.
Does contrast matter for non-text elements like icons and borders? +
Yes — WCAG 1.4.11 (Non-Text Contrast) requires a 3:1 contrast ratio for UI components like buttons, input fields, checkboxes, icons, and focus indicators against adjacent colors. This applies to any visual information required to understand the function of the component. The standard doesn't require contrast for purely decorative elements that carry no information. Always test interactive elements and informational graphics with this checker.
What if I can't achieve 4.5:1 with my brand colors? +
Brand colors are often chosen for aesthetics rather than accessibility, and many fail the 4.5:1 threshold when used for text. The practical solution is to use a slightly adjusted shade of the brand color — often a few percent darker — for text and interactive elements, while reserving the exact brand color for logos, decorative backgrounds, and illustrations where the contrast standard may not apply (e.g., text is not displayed on top of it). Our Color Palette Generator can help you find a compliant shade that stays close to your brand identity.
Does this tool accept colors other than HEX? +
The checker accepts six-character HEX codes (with or without the # prefix). If you have an RGB, HSL, or named CSS color value, use our free Color Code Converter to get the HEX equivalent in seconds, then paste it here. Both tools are free, require no account, and work entirely in your browser.
Is WCAG 3.0 going to change the contrast formula? +
Yes — the draft WCAG 3.0 introduces the APCA (Advanced Perceptual Contrast Algorithm) which is more accurate for modern displays and type rendering. APCA accounts for font weight, font size, and viewing context rather than using a single threshold for all text sizes. However, WCAG 3.0 is still in draft as of 2025, and legal requirements in most jurisdictions still reference WCAG 2.1 AA. Use this tool for current compliance needs and monitor WCAG 3.0 developments for future-proofing.
