Color Contrast Checker

Methodology

The contrast ratio calculation follows the WCAG 2.2 algorithm precisely. First, each color's hex code is parsed into its red, green, and blue components, which are then normalized to values between 0 and 1 by dividing by 255. These linear values undergo gamma correction using the sRGB transfer function: values at or below 0.03928 are divided by 12.92, while larger values use the formula ((value + 0.055) / 1.055) raised to the power of 2.4. This gamma correction accounts for the nonlinear way displays emit light. Next, relative luminance is computed using the ITU-R BT.709 coefficients: L = 0.2126R + 0.7152G + 0.0722B. These weights reflect the human eye's differing sensitivity to each primary color, with green contributing most to perceived brightness. The final contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color. The 0.05 offset accounts for ambient light reflections on the display surface. Results range from 1:1 (identical colors) to 21:1 (pure black on pure white). The tool then evaluates this ratio against both AA and AAA thresholds for normal text and large text, providing a clear pass or fail result for each conformance level. The APCA calculation uses a different approach. It linearizes sRGB values using a simple power curve (gamma 2.4), applies perceptual luminance coefficients (0.2126729 R + 0.7151522 G + 0.0721750 B), and uses polarity-dependent exponents to model the asymmetry between dark-on-light and light-on-dark text. The resulting Lightness Contrast (Lc) value ranges from roughly -108 to 106, where positive values indicate dark text on a light background and negative values indicate the reverse. The absolute Lc value maps to minimum font sizes at each weight through a lookup table derived from the APCA specification.

Understanding Your Results

A contrast ratio of 4.5:1 or higher passes WCAG AA for normal text, which is the standard most websites and applications should target. A ratio of 3:1 passes AA for large text (18pt regular or 14pt bold and above) and is also sufficient for UI components such as form borders, icons, and focus indicators. For the enhanced AAA level, you need 7:1 for normal text and 4.5:1 for large text. When the tool shows a "Fail" result, it means users with moderate visual impairments may struggle to read that text. To improve contrast while preserving brand aesthetics, try darkening or lightening one color incrementally rather than replacing it entirely. Often a shift of just 10-15% in lightness is enough to cross the threshold. Common pitfalls include using light gray placeholder text, relying on thin font weights that reduce perceived contrast, and overlooking the contrast of disabled-state elements. The color blindness simulation results are equally important. Even if your colors pass the contrast ratio check, they may become indistinguishable for users with color vision deficiency. A red button on a green background might have adequate contrast for normal vision but appear nearly identical to someone with deuteranopia. Always verify your design across all simulated vision types, and use additional cues beyond color alone, such as icons, patterns, or text labels.

Practical Examples

A startup redesigning their marketing website tests their brand colors (#2563EB blue text on #F8FAFC light gray background) and finds a contrast ratio of 5.2:1, passing WCAG AA but failing AAA. They darken the blue to #1D4ED8, achieving 7.1:1 and meeting both standards without significantly altering their brand identity. A healthcare app developer checks their error message styling (red text on white) and discovers that #EF4444 on #FFFFFF only achieves 3.9:1, failing even AA for normal text. The color blindness simulation reveals it also appears dim to protanopia users. They switch to #DC2626 and add a warning icon. A UI designer validates that all button labels, form borders, and focus indicators in a component library meet at least the 3:1 requirement for non-text elements, while ensuring body text within those components hits the full 4.5:1 AA threshold.

Practical Tips for Accessible Design

Start by choosing high-contrast color pairs first, then build your palette around them. Aim for at least 7:1 contrast for body text even when only AA (4.5:1) is required, as this provides a comfortable safety margin. Never rely on color alone to convey information. Use icons, underlines, or text labels as secondary indicators so that color-blind users are not excluded. Test your designs in grayscale mode to quickly spot contrast problems. If elements disappear or blend together without color, the contrast is insufficient. Always check both light mode and dark mode. Dark themes often have lower effective contrast, especially with colored text on dark backgrounds. Verify hover and focus states separately, as these interactive states sometimes use lighter colors that fail contrast requirements. Install accessibility browser extensions like axe DevTools or WAVE to audit entire pages, and pair contrast checking with color blindness simulation to ensure comprehensive coverage.

Sources

• WCAG 2.2 — W3C Recommendation
• Understanding SC 1.4.3 Contrast (Minimum)
• Understanding SC 1.4.11 Non-text Contrast
• W3C Web Accessibility Initiative (WAI)