Guides
How to check color contrast in a screenshot
Sample the foreground and its actual background with the Color tool, then read the WCAG 2 ratio and APCA value as separate measurements. A screenshot is useful for investigating a color pair, but a sampled result does not certify an entire interface's accessibility.
On this page
Find a meaningful pair of colors
Choose the text or control you are investigating and identify the background directly behind it. A gradient, photograph, translucent panel, or hover state can create several different pairs. One comfortable point in the background does not represent every place the foreground appears.
Start with the original capture rather than a JPEG that has already been resized and recompressed. Those changes can alter small edges and sampled colors. Klips interprets these screenshot colors as sRGB; it does not perform an ICC or HDR conversion. Treat unfamiliar color-managed or HDR material as a reason to verify the source colors separately.
For an implementation review, the actual authored colors and text size are better evidence than a guessed value from a smooth edge. The screenshot helps locate a problem and communicate it; the original UI or stylesheet supplies context that pixels alone cannot provide.
Keep the standards and readouts separate
| Readout or task | Interpretation | Limit |
|---|---|---|
| WCAG 2 normal text, Level AA | At least 4.5:1 | Other requirements still apply |
| WCAG 2 large text, Level AA | At least 3:1 | Large means at least 18 pt, or 14 pt bold, in the delivered content |
| Required UI cues and meaningful graphics | Generally 3:1 against adjacent colors | Evaluate the applicable non-text criterion and its exceptions |
| APCA, signed Lc | A separate perceptual contrast calculation | Not a replacement for WCAG 2 thresholds or an accessibility certificate |
Sample in Klips
- Open the image and choose Color. Find a solid part of the foreground rather than the anti-aliased edge of a tiny character.
- Select Foreground and sample the intended text or graphic. Select Background and sample the surface immediately behind it. Check the displayed swatches and color values to confirm the role assignment.
- Read WCAG 2 as a ratio and APCA as signed Lc. Keep the foreground/background order when recording APCA; reversing the pair changes its polarity and can change its magnitude.
- Use Swap if the roles are reversed. Press Escape to leave contrast sampling while retaining the pair. Sampling for these roles is local and does not need to overwrite the clipboard.
- Record the color pair, the relevant state, the text size or component type, and the method. If you change the source design, take a new capture or inspect the updated authored values before concluding the issue is resolved.
Worked example: a faint secondary label
Consider a secondary label whose intended colors are #777777 on #FFFFFF. The WCAG 2 calculation for that pair is about 4.48:1, just below the normal-text AA threshold. A displayed rounded number near the boundary is not a reason to round a failing underlying value upward.
Before reporting the issue, make sure you sampled the intended gray rather than a lighter smoothing pixel on the glyph's edge. Compare the authored text color if you can inspect it, and identify the actual delivered font size. A large heading and a small form hint are not interchangeable cases.
Now imagine a gradient panel behind the same label. Sample the least favorable relevant region as well as the easy white region. The useful bug report identifies where the problem occurs and includes the pair, rather than presenting a single attractive number without context.
Check state and reading conditions
Repeat the check for default, hover, selected, focused, and error states that carry meaningful information. A label may be readable while the border or focus indicator is difficult to find. Conversely, a clear outline does not compensate for unreadable text. Judge each relevant relationship rather than averaging an entire screenshot into one score.
Klips composites alpha for the readout with its documented local model: background over white, then foreground over that background. If the real destination behind a transparent export is different, inspect the actual composed result there. A transparent pixel's stored RGB values alone do not describe its final visible color.
Retain a note of the screenshot's origin and any edits. Adding an opaque highlight or changing a backdrop before sampling can measure your annotation instead of the application you meant to review.
Use the result as evidence, not certification
A contrast check does not test keyboard operation, focus order, alternative text, reading sequence, zoom behavior, or every requirement that may apply to the product. APCA and WCAG 2 also use different models and scales; do not turn one into the other's pass/fail label.
For a handoff, give the exact pair and the affected text or component, link the applicable criterion, and request a source-level fix where possible. Recheck the resulting interface. That produces an actionable review while keeping the limits of screenshot sampling visible.
Keep the next screenshot in one workflow.
Capture the detail. Add a clear annotation. Copy text, measure spacing or keep a reference on screen.
Sources and review
Product details and external commands are referenced below. Klips publishes these guides and comparisons; worked examples and illustrations explain a workflow.