Color & design
Use a Color Contrast Analyzer and Record the Evidence
Select foreground and background colors, sample carefully, choose the correct text threshold, and keep a record of the component and state tested.
Identify the analyzer and the source material
A color contrast analyzer compares a foreground and background, but different applications obtain those values differently. A desktop sampler can inspect a screen region, while a browser tool may read a page’s styles. This workflow applies to the basic measurement task and explains where the local checker fits. It does not assume that the local webpage has the screen eyedropper or desktop integration of a separately installed application.
If you intend to use Vispero’s Colour Contrast Analyser, obtain the Windows or Mac version from its official product page and follow that version’s interface labels. Record the version in your review notes. If you already have exact hex values from a stylesheet or design file, the local two-color checker can verify the numerical pair without installing a desktop application.
Select a representative foreground color
Choose the actual information you are checking, such as a paragraph’s text or the mark that indicates a selected checkbox. For authored web text, inspect the defined or computed foreground color rather than sampling a softened antialiased edge. Edge pixels are blended with the background and can produce a different number from the source color.
When only a raster image is available, document the sampling method and zoom level. Sample a representative interior region where possible, and inspect multiple points if the foreground itself varies. A screenshot of a shadowed or textured label may not have one uniform foreground value. Keep that uncertainty visible instead of reporting a single convenient sample as though it described every letter.
Select the surface adjacent to that information
The background is the surface behind the text, not necessarily the page’s top-level background color. A card, translucent overlay or selected menu item can paint a different surface. For controls and graphical details, the relevant comparison may be an adjacent color that makes a boundary or state identifiable. Record which comparison you made and why it applies to the feature.
For text on a gradient or photograph, check the least favorable relevant area that can occur behind the text. A single sample from a convenient corner of the image does not establish contrast across the entire label. Consider responsive cropping and dynamic content, which can move a previously safe area away from the letters.
Verify two concrete pairs
In the local checker, set Text color to #888888 and Background to #ffffff. The ratio is about 3.54:1. The normal-text AA result fails, while qualifying large-text AA passes. Then use #595959 on white: the ratio is about 7.00:1, with its unrounded value just above seven, so normal-text AA and AAA pass.
The page accepts opaque six-digit hex inputs and updates its analysis as they change. It does not accept an image upload, read your desktop or import a screenshot for sampling. Use an external sampling workflow when needed, then transfer the resolved opaque values. If alpha transparency is involved, comparing the uncomposited RGB channels can overstate contrast.
Interpret the result using the actual typography
Choose the normal or large-text threshold from the font size and weight in the component, not from the analyzer’s preview. A large-text pass is insufficient for a small caption. WCAG’s minimum text criterion uses 4.5:1 for ordinary text and 3:1 for text meeting its large-scale definition. The analyzer cannot determine that classification simply from a color pair.
A failing result can be addressed by changing the foreground, background or presentation, but inspect the effect on all states that share the token. Darkening a muted label may help on white while creating a problem in a dark theme if the same raw color is reused there. Prefer role-based theme values whose allowed foreground/background combinations are documented.
Save context with the numerical measurement
Record the two values, ratio, applicable threshold, text size and weight, component state and source of the colors. The local Copy control copies the analysis, so add the missing page context to the report. Capture a screenshot showing the actual component and location, but do not let the image replace the machine-readable color values needed to reproduce the measurement.
Consult the official desktop analyzer description for its current capabilities and the W3C interpretation guidance for text contrast. Recheck the delivered source after a fix and include keyboard, labeling and non-color cues in the wider review. A correct ratio is useful evidence about one comparison, not a complete accessibility verdict.
Related guides
Measure text against its actual background, interpret the checker’s result, and recheck opacity, interaction states, and responsive layout changes.
Enter two opaque hex colors, read normal and large text results, copy the analysis, and understand what a pair-only contrast tool cannot inspect.
Define a contrast test case, separate computed ratios from contextual judgments, handle indeterminate backgrounds, and verify fixes across component states.