Color Contrast Checker

Color contrast is one of the most fundamental aspects of accessible web design. When text does not have sufficient contrast against its background, people with low vision, color blindness, or other visual impairments may struggle to read the content. Even users without disabilities benefit from high-contrast designs when reading in bright sunlight or on low-quality screens. For this reason, the Web Content Accessibility Guidelines (WCAG) define precise numeric thresholds that every interface designer and developer should understand.

This tool calculates the WCAG 2.1 contrast ratio between any two hex color values and shows whether the combination passes the AA and AAA compliance levels for both normal and large text. The results update instantly as you choose colors, so you can iterate quickly without leaving the page.

What Is Color Contrast Ratio?

The contrast ratio is a numerical representation of how different two colors are in terms of perceived luminance. It ranges from 1:1 (identical colors, no contrast) to 21:1 (pure black on pure white, maximum contrast). The formula defined by WCAG 2.1 computes the relative luminance of each color—a measure of how much light the color appears to emit—and then divides the lighter luminance by the darker luminance after adding a small offset of 0.05 to both values.

Relative luminance is not the same as brightness or lightness in common usage. It is a perceptually weighted combination of the red, green, and blue channels, reflecting the fact that the human eye is far more sensitive to green light than to red or blue. The linearization step (raising sRGB values to the 2.4 power) accounts for the gamma correction applied to most digital display standards. The result is a number between 0 and 1 for each color, which then feeds into the final ratio calculation.

WCAG 2.1 Compliance Levels Explained

WCAG 2.1 defines three conformance levels: A, AA, and AAA. Level A covers the most basic requirements; Level AA is the standard that most organizations and legal frameworks target; Level AAA represents the highest possible standard. For color contrast specifically, WCAG distinguishes between normal text (typically smaller than 18pt, or smaller than 14pt bold) and large text (18pt and above, or 14pt bold and above).

Level AA requires a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large text. These thresholds were chosen based on research showing that people with moderate visual impairments—roughly equivalent to 20/80 vision—can read text at these ratios without the aid of contrast-enhancing assistive technology.

Level AAA requires a contrast ratio of at least 7:1 for normal text and at least 4.5:1 for large text. These more demanding thresholds serve users with more severe visual impairments and provide enhanced readability for all users. Note that WCAG 2.1 does not require AA as a blanket requirement for all content—decorative images, logotypes, and text inside inactive UI components are explicitly exempt.

Why Large Text Has a Lower Threshold

Large text benefits from reduced contrast requirements because its physical size compensates for lower contrast. Larger letterforms have thicker strokes, making them easier to distinguish from the background even when the luminance difference is smaller. The human visual system can resolve larger shapes with less contrast, so the guidelines appropriately relax the threshold for text that is at least 18 points (24 CSS pixels at 96 dpi) or 14 points bold (approximately 18.67 CSS pixels at normal weight).

In practical terms, this means that large headings, hero text, and decorative display copy can often use softer color combinations that would fail for body text. However, it is generally good practice to maintain high contrast for all text sizes if possible, as this improves readability on a wide range of devices and ambient lighting conditions.

Common Pitfalls in Contrast Testing

One frequent mistake is testing only one state of a UI element. For example, a button might have sufficient contrast in its default state but fail when hovered or focused, or when the interface switches to dark mode. Comprehensive accessibility testing requires checking contrast for every visual state: default, hover, focus, active, disabled, and error.

Another common pitfall is overlooking placeholder text, icon-only buttons, and text inside form inputs. Placeholder text is often rendered at reduced opacity or in a lighter shade to visually distinguish it from entered content—this styling can push it below the minimum contrast threshold. While WCAG does not technically require placeholder text to meet contrast ratios (since it is considered a UI hint rather than actual content), many accessibility experts recommend testing it anyway to support a wider range of users.

Gradient backgrounds present a particular challenge. When text sits over a gradient, the contrast varies across the text area. In such cases, you should test the worst-case point of the gradient—typically the lightest part of the background behind the text—rather than averaging the gradient colors.

How to Choose Accessible Color Combinations

Starting from a brand color and finding accessible pairings is a common workflow. If your brand uses a medium-saturation blue such as #3B82F6, pure white (#FFFFFF) yields a ratio of approximately 3.9:1—passing AA for large text but not for normal text. To pass AA for all text, you can darken the blue toward #1D4ED8, which achieves a ratio of 7.3:1 against white, satisfying even AAA for normal text.

Many designers use a systematic approach: define a base palette, then test each color combination that will appear in the live interface. Design tokens and CSS custom properties make it practical to maintain an accessible palette that can be updated in one place. Tools like this checker integrate naturally into that workflow—paste two hex values, verify the ratio, then adjust one of them until both AA levels pass.

Dark mode requires separate contrast testing because the same text color that works on a white background may fail on a dark background, and vice versa. Building a design system that explicitly defines foreground-background pairs for both modes—rather than inverting colors automatically—helps ensure consistent accessibility across themes.

Accessibility Beyond Color

While color contrast is critically important, it is only one part of visual accessibility. WCAG also addresses focus indicators (Success Criterion 2.4.11 in WCAG 2.2), non-text contrast for UI components (Success Criterion 1.4.11), and the use of color as the sole means of conveying information (Success Criterion 1.4.1). Passing all four WCAG contrast criteria for your color pair is a strong foundation, but a truly accessible interface also ensures that interactive elements are keyboard-navigable, that error states communicate meaning through text rather than just color, and that animations can be paused by users who find motion distracting.

Accessibility is an ongoing practice rather than a one-time checklist. User testing with people who use assistive technologies provides insights that automated tools cannot capture. Combining automated contrast checks with manual review and real user testing produces the most robust results.