To check color contrast from an image, sample the text color and the background color with an eyedropper or color picker, enter the two hex values into a WCAG 2.x contrast checker, and read the contrast ratio along with the AA and AAA pass or fail verdict. The number that comes back is the single score that tells you whether body copy, buttons, error messages, and other on-image text are readable for people with reduced vision, color vision deficiencies, and on cheap screens in bright sunlight.
Designers and developers run into this problem constantly. A hero banner ships with a translucent overlay sitting over a photograph. A button lives inside a card with a soft gradient. A PDF report uses a brand color that looked fine on the website but lost contrast when printed. In each case, the live element does not announce its colors as neatly as a CSS rule would — you have to look at the actual pixels and pull the values yourself. Once you have two hex codes, the rest of the job is math, and the math is the same math the Web Content Accessibility Guidelines specify.
Why Image Color Contrast Testing Needs a Step Before the Checker
CSS has a built-in answer. Open devtools, read the color and background-color properties, and you have your two hex values without guessing. An image does not give you that. A photograph might have fifty shades of gray behind a single word, a screenshot from a design tool might show colors that have not yet been turned into design tokens, and a flattened PDF might bury the text inside a layer where the original colors are gone. So before any checker can do its job, you need to convert pixels into hex.
That extra step is what makes "color contrast from an image" a different workflow from "color contrast from CSS." Most operating systems and browsers ship with some form of eyedropper — macOS has Digital Color Meter, Windows has the built-in Color Picker, Chrome DevTools has a color eyedropper, and most design tools (Figma, Sketch, Photoshop) include one as well. Several free web-based image color pickers can also pull a hex value from any pixel you click. The output is a six-digit hex code that you can paste straight into a contrast checker.
The WCAG Contrast Formula in Plain English
Once the two hex values are in hand, the math runs in your browser and follows the same formula every WCAG 2.x checker uses. Each color channel is converted from sRGB to linear light, then combined into a relative luminance using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 the darker. Ratios always fall between 1:1 (identical colors) and 21:1 (pure black on pure white).
To see the math at work, take foreground #767676 on background #ffffff. The single sRGB channel value is 118 out of 255, or about 0.4627. Because that value is above 0.04045, it goes through gamma expansion: ((0.4627 + 0.055) / 1.055)^2.4 ≈ 0.181. All three channels are equal here, so the relative luminance of #767676 is 0.181. White's luminance is 1.0. The ratio is then (1.0 + 0.05) / (0.181 + 0.05) = 1.05 / 0.231 ≈ 4.54:1. That is just over the 4.5:1 floor for AA normal text, so a body label in mid-gray on white passes — barely.
The same arithmetic explains why almost-passing colors are so common in the wild. Drop one shade darker to #777777 and the ratio falls to about 4.48:1, slipping under the AA threshold. The takeaway is clear: a single hex digit can flip a verdict, which is exactly why you check rather than eyeball. For a deeper walkthrough of the math itself, the WCAG contrast ratio formula and thresholds guide unpacks the sRGB-to-linear conversion step by step.
Sample Colors From an Image and Run the Check
- Open the image you want to test in any image viewer, design tool, or browser tab. If the text is on a screenshot, PDF page, or design mockup, that image is your starting point.
- Use an eyedropper to sample the text color. Click directly on the part of a letter that has the cleanest, most representative fill. In macOS, open Digital Color Meter; in Windows, use the built-in Color Picker or a browser extension; in Chrome DevTools, click the color swatch next to any color value and choose the eyedropper.
- Copy the hex value you get — typically a six-digit code like #767676 or #111111. Note it as the foreground color.
- Sample the background color the same way. Click on a pixel of the surface the text sits on, well away from the letter so you do not pick up an anti-aliased edge. Copy that hex value as the background color.
- Open the Color Contrast Checker and enter the foreground hex (for example #111111) in the text color field, then enter the background hex (for example #ffffff) in the background field.
- Read the contrast ratio and the AA/AAA pass or fail badges for normal text, large text, and UI components. Adjust either color, re-read the badges, and stop when the level you need clears.
If you are checking more than one pair — say a brand palette of five colors against a white background — repeat the last three steps for each combination rather than guessing which pairs are safe. Batch testing takes a few minutes and surfaces problems the eye tends to miss.
WCAG Contrast Thresholds at a Glance
The thresholds below are the ones every checker reports, and they map cleanly onto the pass and fail badges the tool displays.
| Conformance level | Normal text | Large text | UI components & graphics |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
Large text is defined as at least 18 point (24 pixels) regular weight, or at least 14 point (about 18.66 pixels) bold. The 3:1 non-text rule covers form field borders, focus rings, icons that convey meaning, and any other graphical object the user needs to identify, per the W3C's WCAG 2.1 contrast (minimum) specification.
Reading the Pass and Fail Badges
A good checker does not just spit out a ratio; it tells you what that ratio means at each level. For normal text, anything 4.5:1 or above shows an AA pass; anything 7:1 or above shows an AAA pass; everything below shows a fail. For large text, the AA pass drops to 3:1 and the AAA pass to 4.5:1. For UI components, 3:1 is the only threshold, and a fail means form fields, focus rings, or icons will be hard to find.
A useful habit is to aim for the highest level you can hit without breaking the design. AA is the legal floor in most jurisdictions, but AAA gives comfortable reading for the widest audience. If you can hit 7:1 on body text without losing brand identity, that is a stronger position than landing at 4.51:1 and calling it done. For more on turning a raw ratio into a final verdict, the WCAG contrast checker: from ratio to pass or fail walkthrough is a useful companion.
What the Ratio Does Not Catch
The contrast ratio is a single number based on luminance, so it has a small set of blind spots worth knowing.
It does not measure hue, so two colors with very different hues but similar brightness — red on green, for example — can still fail even though they look distinct to some viewers. That is also why WCAG discourages relying on color alone to convey meaning. Pair color with a text label, an icon, or an underline.
It does not handle gradients or semi-transparent overlays cleanly. The effective background behind a letter changes across the element, and the ratio assumes a flat surface. The safe approach is to sample the lightest and darkest background pixels a letter can sit on and check the worst case.
It does not handle images-as-background very well at all. A headline over a full-bleed photograph has dozens of possible background luminances behind it. Sample the brightest and darkest spots behind the longest word, check both, and make sure the worst case still clears the threshold you need.
It also does not catch placeholder text, disabled states, or thin decorative fonts that pass the math but fail in practice. Double-check anything users are expected to read but not to act on. For a longer list of these traps, the color contrast checker tips and common mistakes to avoid guide goes into each one in detail.
Why Contrast Matters for Real Readers
Contrast is a usability requirement, not a cosmetic one. Roughly one in twelve men and one in two hundred women has some form of color vision deficiency, and millions more read with low vision, cataracts, or on cheap screens in bright sunlight. Sufficient luminance contrast is what keeps body copy, buttons, and error messages legible for all of them.
It is also a legal requirement in many places. The Americans with Disabilities Act is routinely applied to websites in the United States, Section 508 mandates it for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. A passing contrast score is the cheapest, fastest way to clear that bar.
Everything above runs locally in the browser when you use a tool like the Color Contrast Checker, so you can test brand palettes, design tokens, and screenshots from any source without uploading anything. Sample two pixels, paste the hexes, and read the badges — that is the whole workflow.