How to sample a shadow tint for an accessibility audit

A subtle shadow can make a button seem raised, separate a card from its background, or show where one surface ends. But it can also be so faint that it adds no useful visual boundary. If you are auditing a page, sample the shadow as it actually appears, then decide whether it carries information people need.

The Color Picker reads a color from anywhere on your screen and provides values such as HEX, RGB, and HSL. Use it to record a rendered shadow tint, not to decide accessibility from one color value alone.

Sample the shadow on screen

1. Open the Color Picker in Chrome or Edge on a computer. The full feature for picking colors from anywhere on screen works in those browsers. Other browsers may have a reduced version or no screen picking.
2. Open the page or design you are auditing and show the component in the state you want to inspect. For example, check a normal button separately from its hover, focus, pressed, or disabled state.
3. Use the Color Picker's on-screen sampling action and point to a flat part of the shadow, away from the component edge, text, icon, and any visible gradient transition. Confirm the browser's selection prompt if one appears.
4. Record the displayed color value, the component, its state, and the surface behind it. For a repeatable comparison, note the browser, zoom level, and page background too.

If the shadow is very narrow, sample more than one point along it. Avoid sampling a blended edge where the shadow fades into the page, because a tiny pointer movement there can produce a different value.

What the sampled color means

The value stays similar across a flat part of the shadow

You have a useful sample of the rendered tint at that location. Save its HEX or RGB value with the background color and the component state. This is helpful for comparing repeated components or checking whether the displayed result matches a design token, which is a named reusable color or style value.

The value changes as you move across the shadow

That is normal for a soft shadow. A shadow often fades outward, and its pixels may blend with the surface underneath. One sample cannot describe the whole gradient. Record the location of each sample, or note the strongest and faintest parts that affect the component boundary.

The sample looks almost the same as the background

The shadow may add little visible separation at that spot. Check the component against the actual adjacent surface, not against an assumed pure white or black. If the shadow is the only visual cue that identifies a control or its state, a weak edge can make that cue hard to see.

The sample changes near text or a sharp edge

You may have picked an antialiased or blended pixel. Antialiasing softens the boundary between shapes, so a pixel near text or an edge can contain a mixture of colors. Move the pointer a few pixels into a more even part of the shadow and sample again.

How to use the sample in an accessibility audit

1. Decide what the shadow communicates. Ask whether it is decorative or whether people need it to identify a component, its boundary, or a state. A decorative shadow alone does not establish whether a control is accessible.
2. Compare the right colors. If the shadow is needed to make a component or state identifiable, compare the visible boundary with the adjacent color using the applicable non-text contrast criterion. A single shadow sample is not a contrast ratio, and the darkest point may not be the point that defines the boundary.
3. Check other cues. A focus state, selected state, or disabled state should not depend on a faint shadow alone when that state needs to be recognized. Check whether a border, outline, shape change, or other visual cue also communicates it.
4. Test the rendered page. Inspect the component at its normal size and in each relevant state. A color value can help document the design, but it cannot tell you by itself whether the result is easy to see in context.

For example, a card shadow may be purely decorative if the card's content and grouping are already clear. A focus ring or selected-control indicator has a different job: if users need it to locate focus or understand a state, assess that visible cue against its surroundings rather than treating a decorative shadow as a substitute.

How to make the audit more reliable

1. Sample the same point again. If a value seems surprising, repeat the sample on the same flat area. A small change in pointer position can matter on a soft or translucent shadow.
2. Keep the background consistent. A translucent shadow can look different over a white page, a colored panel, or an image. Sample it on the surface where the component actually appears.
3. Separate states in your notes. Record normal, hover, focus, pressed, and disabled states separately when they are relevant. Do not assume the shadow or its contrast stays unchanged between them.
4. Check the design source if the tint is unclear. If you can access the design file or style rules, compare the rendered sample with the source color and opacity. A mismatch may come from transparency, a gradient, a different background, or a browser rendering difference.
5. Improve the cue if it is doing important work. If a boundary or state is hard to distinguish, consider a clearer outline, a stronger shadow, or another visual indicator. Then inspect the updated component in context and test the relevant contrast requirement again.

What a screen sample cannot prove

The Color Picker reports the color of a displayed pixel. It does not reveal the original CSS color, shadow blur, opacity, or design intent. A translucent shadow is composited with the background before it reaches the screen, so the sampled value can differ from the color specified in the source. Display settings and browser rendering can also affect what you see.

Use the sample as evidence about one visible part of one state, not as a pass or fail result for the whole interface. If you need to evaluate a required component boundary or state indicator, assess the complete visible cue against its adjacent colors and check that users can still identify the control without relying on a faint shadow alone.