Free WCAG Color Contrast Checker Online

WCAG color contrast guidelines explained

The WCAG color contrast guidelines are defined in the Web Content Accessibility Guidelines published by the W3C. They set minimum contrast ratios that ensure text is readable by people with low vision or color blindness. The guidelines cover two conformance levels, each with different thresholds for normal text, large text, and non-text elements.

WCAG color contrast ratio 4.5:1: what it means and why it matters

The WCAG color contrast minimum of 4.5:1 is the ratio required for normal text under WCAG 2.1 Level AA (Success Criterion 1.4.3). It means the foreground color must be at least 4.5 times brighter than the background when measured using the relative luminance formula. The WCAG 4.5:1 guideline was chosen because it compensates for contrast loss experienced by users with vision roughly equivalent to 20/80 vision, the point at which people typically seek vision enhancement assistance.

The ratio is not arbitrary. Research behind the WCAG color contrast 4.5:1 standard found that this threshold keeps text legible for the majority of people with low vision while still allowing a wide range of usable color combinations. Ratios below 4.5:1 for small text statistically cause measurable reading errors in this population. The color contrast ratio WCAG defines is calculated using a formula that accounts for how the human eye weights red, green, and blue light differently.

How the WCAG contrast ratio is calculated

The color contrast WCAG formula uses relative luminance. Each RGB channel is first linearized by removing the sRGB gamma curve, then combined with perceptual weights: 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The resulting luminance value (L) ranges from 0 (pure black) to 1 (pure white). The contrast ratio between two colors is then:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

where L1 = relative luminance of the lighter color
      L2 = relative luminance of the darker color

Range: 1:1 (identical colors) to 21:1 (black on white)

This WCAG color contrast tool runs this calculation in real time as you change colors, so you always see the current ratio without any manual math. The 0.05 offset in the formula prevents division by zero and accounts for the fact that even a pure black display emits a small amount of light.

WCAG AA vs AAA: which standard applies to your project

Level AA is the legal baseline referenced by most accessibility regulations worldwide. In Europe, the EN 301 549 standard (which governs public sector websites and digital products) requires WCAG 2.1 AA. In the United States, Section 508 mandates AA for federal agencies and their vendors. The UK Equality Act and the Australian DDA both align with AA as the minimum standard for public-facing digital content.

Level AAA applies a stricter color contrast WCAG ratio of 7:1 for normal text and 4.5:1 for large text. AAA compliance is not required by any law for entire sites, but it is recommended for critical content areas in healthcare portals, government services, and educational platforms. The W3C itself notes that meeting AAA across an entire site may not be achievable for all content types, so it is generally applied selectively to the highest-priority reading surfaces.

Color contrast for UI components, icons, and form inputs

WCAG 2.1 extended contrast requirements beyond text with Success Criterion 1.4.11 (Non-text Contrast). UI components that convey state or identity must meet a 3:1 color contrast ratio against adjacent colors. This applies to:

• Button borders and outlines: the border color of a button against the page background must reach 3:1.
• Form input borders: the outline of a text field against its surrounding background must reach 3:1.
• Focus indicators: visible focus rings must contrast at 3:1 against the adjacent color both inside and outside the indicator.
• Informational icons: icons that communicate meaning without adjacent text must meet 3:1 against their background.
• Placeholder text: placeholder text inside inputs is treated as normal text and needs 4.5:1, not 3:1.

Test each of these pairs using this WCAG color contrast tool. Enter the component color as the foreground and the adjacent background color as the background to see whether the pair passes the 3:1 threshold.

How to fix a failing WCAG color contrast ratio

When a color pair fails the WCAG contrast check, you have three options: darken the foreground, lighten the background, or do both. The most precise way to adjust a color without changing its hue is to modify the lightness (L) value in HSL. Convert your HEX color to HSL using the color format converter, decrease the lightness of your text color by 5 to 10 points, convert back to HEX, and re-test. Small lightness changes rarely affect visual identity enough to require brand approval.

If your brand color cannot be changed, build a full color scale from it and use a darker step for text. The tints and shades generator produces an 11-step scale from any hex color, matching the Tailwind 50-950 naming convention. The 700, 800, or 900 step of your brand color will almost always pass 4.5:1 against a white background. Use that darker step for body text and the original color only for decorative elements that do not carry meaning.

For gradient backgrounds, test both the lightest and darkest areas of the gradient against the text color. A gradient that passes at one end may fail at the other. The safest approach is to use a solid dark overlay between the gradient and any text, or restrict text to the area of the gradient where contrast is highest.

Common color contrast mistakes in web design

The most frequent contrast failures in production designs fall into a few recurring patterns:

• Gray text on white backgrounds: mid-range grays like #9CA3AF (gray-400) produce ratios around 2.6:1 against white, failing AA for all text sizes. Use gray-600 (#4B5563) or darker for body text.
• Light brand colors as primary buttons: yellow, light green, and pastel tones often fail when used as button backgrounds with white text. Test every button state including hover and disabled.
• Placeholder text: placeholder colors are frequently set too light, with ratios of 2:1 to 3:1 common in default browser styles. Override them to reach at least 4.5:1.
• Dark mode assumed to be fine: dark themes do not automatically pass contrast. White text on a near-black background passes, but colored text on dark surfaces can still fail if both have low luminance.
• Text over images or gradients: images and gradient backgrounds are not uniform, so contrast varies across the element. Always test the worst-case area of the background.

Building an accessible color palette from the start

The most efficient way to avoid contrast failures is to build contrast requirements into your color system before any design decisions are finalized. Start by selecting a brand primary color and generating a full tonal scale using the tints and shades generator. Test each step against your intended background colors here. Document which steps pass AA and AAA so every designer and developer on the team knows exactly which shade to reach for.

For a full brand palette with multiple hues, use the color palette generator to produce a 5-color set, then run every text-on-background combination through this WCAG color contrast checker. Record the passing and failing pairs in your design token documentation so contrast decisions are traceable rather than guessed at each implementation point.

Accessible color work does not require desaturated or visually dull palettes. High saturation colors can pass WCAG contrast when their lightness is set correctly. The contrast ratio depends almost entirely on the luminance difference between two colors, not on how vivid they are. A bright purple at 700-level darkness will pass 4.5:1 on white just as reliably as a neutral gray at the same lightness value.