Color Contrast Checker

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text remains readable for users with low vision, aging eyes, or impaired displays. The contrast ratio is calculated using relative luminance values of the foreground and background colors.



Relative luminance is computed by converting each RGB channel to a linear light value (undoing the gamma correction applied to screen colors) and combining them using the formula: L = 0.2126R + 0.7152G + 0.0722B. This weighting reflects human eye sensitivity—we perceive green as much brighter than red or blue.



The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. WCAG 2.1 Level AA requires a minimum 4.5:1 ratio for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. All calculations happen instantly in your browser—no server calls needed.

1. Web Development Compliance
Government websites, educational platforms, and any organization subject to ADA or Section 508 must meet WCAG standards. Developers and designers use contrast checkers throughout the design process to ensure color choices pass before implementation, avoiding costly redesigns after launch.



2. Design System Creation
Teams building design systems and component libraries need to verify that all color combinations across their palette meet accessibility standards. A contrast checker helps establish approved color pairings—primary text on background variants, button text on button backgrounds—creating a library of pre-validated combinations.



3. Brand Color Validation
When organizations adopt new brand colors, accessibility is often an afterthought. A contrast checker helps validate that logo colors work against various backgrounds, that marketing materials remain readable, and that digital implementations of brand guidelines don't fail accessibility standards.



4. Dark Mode Testing
Applications offering dark mode need to maintain adequate contrast in both modes. Text that meets contrast requirements in light mode may fail in dark mode if designers simply invert colors. Testing both modes with a contrast checker ensures consistent accessibility.



5. Mobile App Accessibility
Mobile operating systems increasingly include accessibility audit tools, and app stores may reject or penalize apps failing basic accessibility standards. Checking contrast ratios during the design phase prevents rejections and makes apps usable for the 285 million visually impaired people worldwide.

• Aim for AA as a minimum, target AAA: WCAG AA (4.5:1) is the legal minimum in most jurisdictions. If you can achieve AAA (7:1) without sacrificing design quality, do it—the extra contrast benefits all users in bright sunlight or on low-quality displays.



• Use HSL to adjust contrast: When a color pair fails, switch to HSL mode and adjust the lightness of one color. Reducing the lightness of a dark text color or increasing the lightness of a light background directly increases contrast without dramatically changing the perceived color.



• Don't forget focus states: Interactive elements need their focus indicator to contrast with the surrounding background. Keyboard-only users rely on visible focus indicators, which need the same contrast ratios as regular text.



• Consider context beyond ratios: A 4.5:1 ratio in 9px text is still difficult to read. Font weight, letter spacing, and rendering quality all affect practical readability. Use minimum contrast as a floor, not a target.



• Test in real conditions: Monitor calibration, screen glare, and viewing angle all reduce effective contrast in real-world use. Building in extra contrast margin helps in suboptimal conditions.