Color Contrast Checker: Test Your Palette Against WCAG Rules

By ZeroFee Tools · October 4, 2026 · 6 min read

You picked a palette that looks beautiful on your designer's calibrated monitor, then real users with aging eyes or budget phone screens tell you the text is unreadable. Low-contrast text is one of the most common accessibility failures on the web: it locks out people with low vision and tanks accessibility audit scores. The free Color Contrast Checker from ZeroFee Tools computes the exact WCAG contrast ratio between any text and background color, then grades the pair against AA and AAA thresholds for both normal and large text.

It is useful far beyond audits. Designers use it to validate a brand palette before handoff, developers check link colors and dark-mode themes, and marketers confirm that text on social graphics stays legible after compression. The math runs entirely in your browser, so there is no signup and no limit on checks. Grab exact hex values with the color picker, test the pair here, and once the colors are settled, run finished artwork through the social image checker to confirm platform sizes too.

What contrast ratio does WCAG actually require?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, defined as 18pt or larger, or 14pt bold and larger. AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. Most sites target AA, the level referenced in accessibility lawsuits.

The ratio itself is not a guess or a design opinion. It comes from relative luminance, a measure of how much light each color reflects, plugged into the official formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The result runs from 1:1 (identical colors) to 21:1 (pure black on pure white). The checker computes this exactly, so two colors that look close can be compared objectively instead of argued about.

Large text gets a lower bar because thicker, bigger letterforms stay legible with less luminance difference. That is why the tool grades four separate cases: AA and AAA for normal text, plus AA and AAA for large text. A pair can fail AA for body copy yet pass for a big headline, which is genuinely useful information: it tells you the color works for headings but needs darkening before it carries paragraphs.

Why do brand colors fail on white backgrounds so often?

Most brand colors are mid-tones chosen to look vivid, and mid-tones lack the luminance gap that white demands. A bright teal can look striking as a logo yet score barely 2:1 as text on white. The fix is a darker shade of the same hue for text, keeping the bright color for accents.

This is the single most common surprise the checker surfaces. A brand's signature color was selected for energy on a slide deck, not for carrying 16px body copy on a white page. Teals, oranges, lime greens and medium blues almost always land between 2:1 and 3.5:1 on white, well short of the 4.5:1 AA bar. It is not a flaw in the brand; it is a flaw in how the brand is applied.

The fix preserves the brand instead of abandoning it. Keep the vivid color for logos, illustrations, icons and large display type, then derive a darker variant of the same hue for text. Dropping lightness by 15 to 25 percent usually crosses the AA line while the color still reads as unmistakably yours. The checker's darken button does exactly this in repeatable steps, and the live preview shows a real paragraph so you can confirm the darker shade still looks intentional rather than muddy.

How do you fix a failing pair without a redesign?

Adjust lightness, not hue. Use the darken and lighten steppers on the failing side, usually the text color, until the AA badge turns green, then re-check the preview paragraph. If the pair still fails after several steps, darken the text further or lighten the background slightly. Small lightness moves change the ratio fast while the design stays recognizably the same.

Eyeballing is the enemy here. Two colors can look fine to a designer in a bright office and still fail at 3.8:1, and no amount of staring resolves a 0.7 gap. The reliable workflow is mechanical: enter the pair, read the exact ratio, then step the text darker one click at a time until the badge flips to pass. Each click is a fixed, repeatable lightness move, so you can document exactly what changed for the style guide.

Dark mode deserves its own pass, not an assumption. Inverting a passing light-mode pair does not guarantee the dark-mode pair passes, because the luminance math is not symmetric around your palette. Test body text, muted secondary text and link colors separately in each theme. Links are a classic miss: a blue that passes on white can fail on a dark navy background, and the checker catches it in seconds.

Does contrast apply to buttons and icons, not just text?

Yes. WCAG grades user interface components and meaningful graphics against a 3:1 ratio, covering form field borders, focus indicators, icons that carry meaning and chart lines. The luminance math is identical to text contrast, so you can use this checker and treat the AA large-text badge, also 3:1, as a rough proxy for whether an icon or control boundary passes.

Text gets the strict thresholds because reading is continuous work, but a form input whose border is nearly invisible against the page background is the same category of failure. Focus indicators are another frequent miss: a keyboard user tabs through your site, the focus ring is a 1.5:1 whisper, and they cannot tell where they are. Checking the ring color against the background takes ten seconds and fixes a real barrier.

For icons, the rule of thumb is whether the icon carries meaning on its own. A decorative flourish next to a labeled button is exempt; a standalone trash, search or warning icon is not. Enter the icon color and its background, and if the pair clears 3:1 you are in reasonable shape. Logos and purely decorative graphics are explicitly exempt from the requirement, so brand marks get a pass even when they would fail as text.

How to use the Color Contrast Checker in 4 steps

1. Pick your text color. Use the color picker or paste an exact hex value for the foreground color, the one your words will be rendered in.
2. Pick your background color. Enter the surface behind the text, whether that is a page background, a button fill or a card color.
3. Read the ratio and the four badges. The exact contrast ratio appears instantly with pass or fail grades for AA and AAA at normal and large text sizes.
4. Adjust until everything you need passes. Hit darken or lighten on either side in steps, and watch the live heading and paragraph preview until the pair is both compliant and good looking.

6 practical contrast tips

• Test the worst-case pair, not the average one. Muted secondary text on a tinted card background fails far more often than primary text on white, so check the lightest text against the lightest background you actually ship.
• Re-test every theme separately. Light mode, dark mode and high-contrast mode are three different pairs. A link blue that passes on white can easily fail on dark navy.
• Do not forget placeholder and disabled text. Placeholder attributes and disabled buttons are still text users must read, and their gray-on-gray styling is a classic audit failure.
• Check hover and focus states too. A button that passes at rest can fail on hover if the hover shade is lighter, and focus rings need 3:1 against the background to help keyboard users.
• Keep the vivid brand color, darken it for text. You do not need a new brand. A 15 to 25 percent darker shade of the same hue almost always crosses the AA line while staying recognizably yours.
• Write passing pairs into your style guide. Record the exact hex values that pass, with their ratios, so future designers and developers reuse compliant colors instead of re-testing from scratch.

Frequently asked questions