How to Check If Your Image Colors Pass Accessibility Standards

You picked colors that looked great in the design file. Your brand blue on white, your soft gray captions, that pastel background behind your call-to-action text — all of it felt clean and modern on your monitor. Then an accessibility audit, a client review, or a legal compliance checklist flags half your palette as failing WCAG, and you're left guessing which combinations are actually the problem.

Here's what most people miss: color contrast isn't a matter of taste, it's a fixed mathematical ratio between two colors' luminance values. A combination either measures above the required threshold or it doesn't — there's no "close enough," and no amount of squinting at your screen tells you the real number. The only way to know for certain is to measure it, and once you know how, checking any text or image takes seconds.

What is a WCAG contrast ratio, exactly?

The Web Content Accessibility Guidelines (WCAG) define contrast as a ratio between the relative luminance — perceived brightness — of two colors. That ratio ranges from 1:1 (no contrast at all, like white on white) to 21:1 (maximum contrast, pure black on pure white). A few things make up how this is measured and applied:

• Relative luminance. Each color is converted to a brightness value using a formula that weighs red, green, and blue differently, since the human eye perceives green as brighter than blue or red at the same intensity.
• Contrast ratio formula. The two luminance values are compared using (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. This produces the final ratio, like 4.6:1 or 2.1:1.
• Conformance levels. WCAG defines two relevant levels for contrast — AA (the widely required standard) and AAA (a stricter, optional standard). Most legal and organizational requirements reference AA.
• Text size categories. "Large text" (18.66px bold or 24px regular and above) has a lower bar than normal body text, since larger characters remain legible at lower contrast.
• Non-text elements. WCAG 2.1 also requires a 3:1 ratio for meaningful graphics and UI components like icons and form field borders, not just text.

The key insight: contrast ratio is calculated, not perceived. Two people can disagree on whether a color combination "looks" readable, but the ratio itself is a single objective number that either clears the bar or doesn't.

Why color contrast matters

Low contrast isn't just a cosmetic nitpick — it directly determines whether a meaningful share of your audience can actually read your content:

• Low vision and color vision deficiency. An estimated 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and low contrast disproportionately affects users with low vision, cataracts, or age-related vision decline.
• Real-world viewing conditions. Bright sunlight, low-quality screens, and glare all reduce effective contrast further — a combination that barely passes indoors can become unreadable outdoors.
• Legal and compliance risk. WCAG 2.1 AA is the referenced standard behind accessibility laws in the U.S., EU, and elsewhere, and insufficient contrast is consistently one of the most frequently cited failures in accessibility audits and lawsuits.
• Conversion and usability. Even users with typical vision read low-contrast text more slowly and with more errors, which quietly hurts comprehension, form completion, and click-through on calls-to-action.

Step-by-step: checking your colors

1. Identify your foreground and background colors. This is usually text color against the color or image directly behind it. For text placed over a photo, use the color directly beneath the letters, not the image's average tone.
2. Get the exact hex codes. Use an eyedropper tool to sample colors directly from your design file or image rather than estimating — a slight shade difference can change a passing ratio into a failing one.
3. Run the pair through a contrast checker. Enter both hex codes into a WCAG contrast checker to get the exact ratio, along with a clear pass or fail result for AA and AAA at both text sizes.
4. Check against the right threshold. Confirm whether your text counts as "normal" (needs 4.5:1) or "large" (needs 3:1) based on its actual rendered size and weight, not how it looks in your design tool.
5. Check text over images separately from solid backgrounds. Photos and gradients often have varying luminance across the image — sample the specific region behind your text, and check the darkest and lightest parts of that region if the background isn't uniform.
6. Adjust and re-test. If a pair fails, nudge the lightness of one color until the ratio clears the threshold, then re-check — small shifts of a few percent in lightness are often enough without changing the color's hue or brand identity.
7. Re-check after any design change. A new background image, a rebrand, or a theme update can silently break previously passing contrast — treat contrast checking as a step in every visual review, not a one-time task.

Common mistakes that cause failed contrast

1. Judging contrast by eye instead of measuring it

A combination that looks readable on a calibrated design monitor in a dim room can measure well below 4.5:1. Contrast ratio is a fixed formula, not a visual impression — always confirm with a calculator rather than trusting your screen.

2. Sampling the wrong part of a background image

Checking contrast against the average color of a photo, rather than the specific pixels directly behind the text, gives a misleading result. A photo can have light skies and dark shadows in the same frame — the ratio only matters where the text actually sits.

3. Assuming brand colors are automatically exempt

Logos and purely decorative text are exempt from WCAG contrast requirements, but body copy, button labels, and captions rendered in brand colors are not. A brand's signature light gray or pastel accent color frequently fails contrast when used for real text.

4. Treating "large text" and "normal text" as interchangeable

A combination that passes at 3:1 because it's applied to a large heading will fail if the same colors are reused for body copy or a smaller caption. Always check the ratio against the specific size and weight the text will actually render at.

Real-world pass/fail examples

These are representative contrast ratios for common color pairings, showing how close "reasonable-looking" combinations can be to the pass/fail line:

The pattern here is consistent: several combinations that look perfectly readable on a typical screen sit right at or below the 4.5:1 line, which is exactly why contrast needs to be measured rather than assumed.

Comparison: WCAG levels and text sizes

WCAG defines different minimum ratios depending on conformance level and text size. Here's how the requirements break down:

Free tools: Color Accessibility Checker & WCAG Contrast Checker

Both Rebrixe tools run entirely in your browser. Sample colors directly from an uploaded image or enter hex codes manually, and get an instant contrast ratio with a clear AA/AAA pass or fail — no account, no upload to a server, no limits.

Frequently asked questions