Blog

Find an RGB value in a photo for an accessibility audit

Sample a photo color in RGB, learn what the channel values mean, and use them to check whether overlaid text has enough contrast.

Rachel BennettTools and utilities 4 min read

You are reviewing text placed over a photo and need a color value for your accessibility audit. A single sample can help you identify the RGB color at a specific point, but it does not tell you by itself whether the text is readable.

Use the Color Picker to sample a point on your screen and read its RGB values. You can check an image displayed on your computer without uploading the photo to TooLab.

Find the RGB value

  1. Open the Color Picker in Chrome or Edge on a computer. Picking colors from anywhere on the screen works in these browsers. Other browsers may offer a reduced version or no screen picking.
  2. Display the photo on screen. If it is used as a background for text, position the photo and text the way they appear in the design you are auditing.
  3. Use the Color Picker to sample a point in the photo. Choose the area behind or close to the text, not a toolbar or another part of the screen.
  4. Read and record the RGB value shown by the tool. Sample several points if the photo has changing light, shadows, or detail behind the text.

For a fair sample, view the image at its intended size and avoid sampling across an edge. Text edges, borders, and fine details can blend neighboring colors on screen, so a reading there may not represent the background itself.

What the result means

Three RGB numbers

RGB describes a color with red, green, and blue channel values. In the common 8-bit format, each channel runs from 0 to 255. A reading such as R 42, G 96, B 138 means the sampled screen color contains those amounts of red, green, and blue. The Color Picker also provides HEX, HSL, and other color formats if your audit notes use them.

Keep the three channel values together. One number alone is not a complete color, and a difference of 10 in one channel does not have the same visual effect in every color.

Different points have different readings

A photo is not a flat color swatch. A blue sky, a shadow, and a bright reflection can all produce different RGB values. If text sits over a busy or changing area, record readings from the points that matter, especially the lightest and darkest parts beneath the text.

A color value is not a contrast result

RGB tells you the sampled color, not whether foreground text has enough contrast against it. Contrast depends on both colors and how bright they appear to the eye. You need the text color as well as the background color to calculate a contrast ratio. For reference, WCAG Level AA commonly requires a ratio of 4.5:1 for normal text and 3:1 for large text.

The reading is what appears on your screen

Image scaling, color profiles, display settings, and browser rendering can affect the color you see. A sampled value is useful for documenting the displayed design, but it may not match the photo's original pixel data exactly. If you need the original file color, inspect the image data rather than sampling a resized or color-adjusted preview.

Make the photo text easier to read

  1. Check the background behind the words. Sample several places that the text overlaps. If the photo changes from light to dark beneath a line of text, one RGB value cannot describe the whole area.
  2. Check the text and background together. Record the text color as well as the sampled background color, then calculate their contrast ratio using your audit method. Do not judge contrast by comparing RGB numbers or by relying on a color name such as dark blue.
  3. Improve the design if contrast changes across the photo. Move the text to a more even area, add a solid or translucent panel behind it, or adjust the image. Recheck the least readable part, not just the point where the contrast looks strongest.
  4. Repeat the check at the displayed size. Review the actual design at the size people will use. Small text and fine lettering can be harder to read than large headings, even when both use the same colors.

If your audit also covers interface text or links, the article How to find a suitable link color for an accessibility audit explains how to approach those choices.

Get a more reliable sample

Use a representative point, not a single pixel that happens to be unusually bright or dark. If the image will be compressed, cropped, or resized before publication, sample the final version when possible. A crop can remove a distracting bright patch, while resizing may blend colors along edges.

For text over a photograph, test across the full area where the words appear. If the background is too variable to meet the intended contrast consistently, a single RGB value cannot make it reliable. A panel, shadow, or different text placement may be needed, followed by another contrast check.