Color Contrast Checker

What Is WCAG Color Contrast?

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between text and its background to ensure that content is perceivable by all users, including those with visual impairments. Color contrast is one of the most fundamental accessibility requirements because it directly affects whether people can read your content. When the contrast between foreground text and the background color is too low, text becomes difficult or impossible to read for many users.

Contrast requirements exist because not everyone sees color the same way. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Beyond color blindness, millions of people have low vision conditions such as cataracts, glaucoma, and age-related macular degeneration that reduce their ability to distinguish between similar shades. Environmental factors also play a role: users viewing screens outdoors in bright sunlight, on low-quality monitors, or on mobile devices with reduced brightness all benefit from higher contrast text. By meeting WCAG contrast standards, you make your content accessible to the widest possible audience.

WCAG color contrast guidelines are referenced by legal accessibility standards worldwide, including Section 508 in the United States, the European Accessibility Act (EAA) in the EU, and the Accessibility for Ontarians with Disabilities Act (AODA) in Canada. Meeting these standards is not only good practice for usability but is increasingly a legal requirement for websites, especially those operated by government agencies, educational institutions, and businesses serving the public.

WCAG Contrast Levels Explained

WCAG defines two conformance levels for color contrast: AA and AAA. Level AA represents the minimum acceptable contrast and is the most commonly referenced requirement in accessibility laws and corporate guidelines. Level AAA represents an enhanced standard that provides even greater readability and is recommended wherever possible, though WCAG acknowledges that AAA compliance across an entire site may not always be achievable for all content.

For normal text (text smaller than 18pt, or smaller than 14pt when bold), WCAG AA requires a minimum contrast ratio of 4.5:1, while AAA requires 7:1. For large text (text that is at least 18pt / 24px, or at least 14pt / approximately 18.66px when bold), the requirements are relaxed: AA requires 3:1 and AAA requires 4.5:1. The reasoning behind the lower requirements for large text is straightforward: bigger characters have thicker strokes and wider shapes, which makes them inherently easier to perceive even at lower contrast levels.

Understanding these thresholds is critical for designers and developers. A contrast ratio of 4.5:1 may sound like an abstract number, but it represents a level of contrast that has been empirically tested and found to provide adequate readability for users with 20/40 vision, a common visual acuity level associated with aging. The 7:1 AAA threshold provides readability for users with approximately 20/80 vision, which represents more significant visual impairment.

How Contrast Ratio Is Calculated

The contrast ratio between two colors is derived from their relative luminance values. Relative luminance is a measure of the perceived brightness of a color, normalized on a scale from 0 (black) to 1 (white). The calculation involves three steps.

First, each color's sRGB components (red, green, blue) are converted from the 0-255 integer range to a 0-1 decimal range. Second, each component undergoes a linearization process that accounts for the gamma curve of sRGB displays. For values at or below 0.03928, the linear value is computed by dividing by 12.92. For values above 0.03928, the formula is ((value + 0.055) / 1.055) raised to the power of 2.4. Third, the linearized components are weighted according to human perception of brightness: red is weighted at 0.2126, green at 0.7152, and blue at 0.0722. The sum of these weighted values produces the relative luminance (L).

Once you have the luminance of both colors, the contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The 0.05 offset accounts for ambient light. The resulting ratio ranges from 1:1 (no contrast, both colors identical) to 21:1 (maximum contrast, pure black against pure white). This tool performs all of these calculations for you instantly as you adjust your colors.

Common Contrast Mistakes

Even experienced designers sometimes create color combinations that fail WCAG contrast checks. One of the most frequent mistakes is using light gray text on a white background. While this can look sleek and modern in a design mockup viewed on a calibrated monitor, it becomes nearly invisible for users with low vision, on low-brightness screens, or in brightly lit environments. Similarly, medium gray placeholder text in form fields often fails contrast requirements, leaving users unsure whether a field already contains data or is showing a hint.

Colored text on colored backgrounds presents another challenge. A blue headline on a teal background may pass a quick visual check on a designer's retina display but fail the 4.5:1 ratio when measured mathematically. Pastel color schemes are particularly prone to contrast failures because the colors, while visually distinct in hue, often have very similar luminance values. Two colors can look completely different to someone with normal color vision but have nearly the same brightness, making them indistinguishable to people with certain types of color blindness.

Other common pitfalls include failing to test hover and focus states (a link that has sufficient contrast in its default state but becomes too faint on hover), not checking contrast for disabled UI elements, and using decorative background images or gradients behind text without ensuring consistent contrast across the entire text area. Always test your actual content against your actual backgrounds, not just in isolated swatches.

Tips for Accessible Color Choices

Start with high-contrast pairs as your foundation. Black text on white (#000000 on #FFFFFF) provides the maximum 21:1 ratio, but you do not need to go that extreme. Dark charcoal (#333333) on white still achieves a strong 12.63:1 ratio, well above AAA requirements while feeling slightly softer than pure black. For colored text, test your brand colors early in the design process and be prepared to adjust shades to meet requirements.

Test both text directions when choosing colors. A dark blue that works as text on a white background may not work as a background behind white text, because the relative luminance relationship can shift depending on the specific shades. Use this tool to verify both combinations before committing to your design system.

Consider all interactive states: default, hover, focus, active, visited, and disabled. Each state may introduce a different color combination, and each one needs to meet contrast requirements independently. Pay special attention to focus indicators, which are critical for keyboard navigation and must have a 3:1 contrast ratio against adjacent colors under WCAG 2.2.

Finally, never rely on color alone to convey information. Even with perfect contrast, some users cannot distinguish between colors. Pair color with text labels, icons, patterns, or other visual indicators. For example, do not use only red and green to indicate errors and successes; add checkmarks, X marks, or descriptive text alongside the color. This principle, known as WCAG Success Criterion 1.4.1 (Use of Color), works hand-in-hand with contrast requirements to create truly accessible interfaces.

Frequently Asked Questions