Color Contrast Checker (WCAG)
Check the contrast ratio between foreground and background colors for WCAG 2.1 AA and AAA compliance. Live preview updates instantly as you pick colors.
Large Text Sample (18pt+)
Normal text sample — The quick brown fox jumps over the lazy dog.
21.00:1
How the Color Contrast Checker Works
This tool calculates the contrast ratio between a foreground (text) color and a background color according to the Web Content Accessibility Guidelines (WCAG) 2.1 specification. It parses hex color values, converts each color channel to its linear RGB representation using the sRGB transfer function, computes the relative luminance of each color, and then applies the WCAG contrast ratio formula. The result tells you whether your color combination meets accessibility standards for different text sizes and compliance levels.
WCAG Contrast Ratio Formula
Relative luminance is calculated as L = 0.2126 × R + 0.7152 × G + 0.0722 × B, where each channel value is linearized from sRGB. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker. WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
Understanding WCAG Color Contrast Requirements
The Web Content Accessibility Guidelines published by the W3C define minimum contrast ratios to ensure that text is readable by people with moderately low vision. These standards are based on research into human visual perception and the contrast sensitivity function. Meeting these requirements is essential for web accessibility compliance, legal obligations under laws like the ADA and EU Accessibility Act, and providing a good user experience for all visitors.
WCAG defines two conformance levels for contrast. Level AA is the baseline standard that most websites and applications should meet. It requires a contrast ratio of at least 4.5 to 1 for normal-sized text and 3 to 1 for large text. Level AAA is the enhanced standard for maximum readability, requiring 7 to 1 for normal text and 4.5 to 1 for large text.
Relative Luminance and the sRGB Color Space
The contrast calculation is based on relative luminance, which measures the perceived brightness of a color. The formula accounts for the fact that human eyes are most sensitive to green light, moderately sensitive to red, and least sensitive to blue. This is why the green channel has the highest coefficient in the luminance formula. The sRGB linearization step applies a gamma correction to convert screen-displayed color values into their physical light intensity equivalents before calculating luminance.
Why Color Contrast Matters for Accessibility
Approximately 300 million people worldwide have some form of color vision deficiency, and many more experience reduced contrast sensitivity due to aging, cataracts, or environmental conditions like screen glare and bright sunlight. Insufficient contrast makes text difficult or impossible to read for these users. Even users with normal vision benefit from good contrast, as it reduces eye strain and improves reading speed and comprehension.
Testing Your Design System Colors
Designers should test every text and background color combination in their design system against WCAG requirements. This includes primary text on default backgrounds, secondary and muted text colors, text on colored buttons and banners, placeholder text in form fields, error and success message colors, and link colors on various backgrounds. This tool makes it fast to check each combination and identify pairs that need adjustment.
Tips for Improving Contrast
If your color combination fails a WCAG level, you can improve contrast by darkening the darker color, lightening the lighter color, or both. Avoid relying solely on color to convey information and use patterns, icons, or labels as well. For decorative text that does not convey essential information, contrast requirements are relaxed. Logos and brand names in logotype also have no minimum contrast requirement under WCAG.
Privacy and Processing
All contrast calculations run entirely in your browser using JavaScript. No color data or design information is sent to any server. Your design system colors remain completely private.