How to explain contrast choices in a client handoff

A color can look readable on your screen and still be hard for a client to read on theirs. In a handoff, saying “dark blue on pale gray” is not enough. The client needs to know which colors you chose, where they appear, and whether the contrast meets the intended standard.

Use the Color Picker to capture the visible color values from your mockup. It provides values such as HEX and RGB, but it does not calculate a contrast ratio. Record the colors with their roles, then verify the ratio separately in your design workflow.

Record the colors and their roles

1. Open the Color Picker in Chrome or Edge on a computer. Its screen-wide color sampling works in those browsers. Open the final mockup or design screen you want to document.
2. Sample the foreground color, such as the text or icon, and then sample the background behind it. Choose a flat area of each color, away from letter edges, shadows, borders, or gradients. Those areas can contain blended pixels that are not the actual design color.
3. Copy the HEX value for each color and note its role. For example, record “body text, #243044” and “page background, #FFFFFF.” Include RGB or HSL too if the client’s workflow uses those formats.
4. Check the contrast ratio for the exact foreground and background pair using your design workflow’s accessibility checker. Record the ratio, the text size or use case, and the target you checked against. The Color Picker reports colors, not accessibility compliance.
5. Repeat for important variations, including links, button labels, focus indicators, and hover states. A color combination that passes in the default state may not pass after a background or text color changes.

Keep the colors paired in your notes. A list of HEX values without roles can leave the client guessing which value belongs to a heading, a button, or a background. If the design uses transparency, an image, or a gradient, note that too, since the color behind the foreground may change across the element.

What the contrast result means

The ratio meets the target for the text

For WCAG AA, normal-size text generally needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1. Large text means at least 24 CSS pixels, or about 18 points, at regular weight, or about 19 CSS pixels when bold. Include the ratio and text size in the handoff so the client can see which requirement you checked.

The ratio is below the target

The pair may be difficult to read for some people, even if it looks clear on your monitor. Identify the specific pair and intended use, then adjust one of the colors and check again. Do not describe a failing pair as accessible just because it looks attractive or seems readable to you.

The colors look similar but the ratio is acceptable

Contrast ratio measures relative luminance, a measure of brightness, rather than hue difference. Two colors can have different hues but similar brightness, so they may have weak contrast. Conversely, colors that look different in hue can have a useful brightness difference. Use the measured ratio, not appearance alone.

The sampled HEX value does not match the design token

A sampled screen color can differ from the original design value if the color is blended with transparency, affected by a gradient, or picked at an anti-aliased edge. Compare the sampled value with the source value in your design file. In the handoff, identify whether the HEX value is the source token or a color sampled from the rendered screen.

Improve a pair that misses the target

1. Change one color at a time. Lighten the background or darken the foreground, then recheck the ratio. Small adjustments make it easier to see which change helped and preserve the rest of the palette.
2. Keep the text color stable across a component. If a label appears over several button colors or image areas, check every combination. If a single text color cannot meet the target everywhere, use a solid background behind the text or choose a different palette.
3. Use size and weight honestly. Larger text has a lower AA contrast threshold, but making text bold does not automatically fix poor contrast. Check the final text size and weight, not a planned version that may change later.
4. Do not use color as the only signal. Add a text label, icon, underline, or shape difference when color indicates an error, selection, or status. This helps people who cannot distinguish the colors and gives the client a clear design decision to review.
5. Check the final screen state again. Sample and verify colors after the design changes. A hover color, translucent overlay, or updated background can alter the final contrast even when the original palette values stay the same.

For icons, borders, and other meaningful interface graphics, WCAG AA generally calls for at least 3:1 contrast against adjacent colors. Decorative details do not always have the same requirement, so state which elements you assessed instead of reporting one ratio for an entire screen.

What a screen sample can and cannot confirm

The Color Picker captures a visible color value from your screen. It cannot confirm that the source file uses that exact value, that the color will look identical on another display, or that every state in the product has been checked. Display settings, color profiles, transparency, and the surrounding design can all affect how a color appears.

For a useful handoff, include the foreground and background HEX values, their roles, the verified contrast ratio, the text size or interface use, and any states that were not checked. The Color Picker is available for screen-wide sampling in Chrome and Edge on a computer; other browsers may provide a reduced version or no screen-wide sampling.