Check the contrast threshold before rounding the result

Identify the message carried by the quiet text

A fictional help page includes a setup instruction and a smaller applicability note explaining which product generation it covers. The design system labels that note as secondary. In a review, two nearby gray tokens appear interchangeable, and the component report prints the same rounded contrast result for both. The team is tempted to accept either without retaining the underlying calculation.

Begin with the note’s purpose. A reader with another product generation could follow the wrong instructions if they miss it. Keep its relationship to the main step clear in the layout and wording. Secondary describes the proposed visual hierarchy; it does not mean that the information can be omitted from the reading task.

Write a role record for the fictional component: the instruction, its applicability note and the background on which each is intended to appear. Preserve the exact authored color token rather than a nickname such as muted gray. If a token name is reused for several roles, identify which pairing is actually under discussion instead of approving the name as though it were a complete implementation.

The comparison below deliberately uses ordinary text and a simple specified background. It does not examine a logo, disabled control, photograph or large display heading. Those are different situations requiring their own applicable criteria. Keeping the example narrow makes it possible to see the rounding problem without turning one color calculation into a verdict on every use of the palette.

Keep the unrounded comparison with the displayed summary

For ordinary nonexempt text, WCAG 2.2 SC 1.4.3 uses a minimum 4.5:1 contrast threshold without rounding. Assume opaque sRGB foreground on specified white #ffffff, with no effects. For equal channels v = 118 or 119, each normalized component exceeds 0.04045; luminance L = ((v / 255 + 0.055) / 1.055)^2.4. Ratio = 1.05 / (L + 0.05).

Foreground #767676 gives approximately 4.54222496:1; #777777 gives 4.47808945:1. Both display 4.5:1 to one decimal, but only the first meets this threshold. This numerical result is not whole-page conformance or universal readability. Evaluate actual authored foreground/background colors rather than antialiased edge pixels.

The local fixture calculates the two gray cases at high decimal precision, verifies them with a separate weighted three-channel implementation and checks the boundary by reversing the threshold calculation. No actual page or browser was evaluated. The arithmetic supports the supplied comparison; it does not show which colors a deployed component ultimately uses.

Store the full result or sufficient precision for the decision beside the human-friendly display value. Label the threshold and the role to which it applies. A concise dashboard can still be useful, but its summary should not conceal the information needed to reproduce the disposition. Avoid changing the underlying acceptance rule merely to make the printed badge agree with an earlier assumption.

Ask the reviewer to explain what the two rows mean in words. They should distinguish a display-format coincidence from a shared outcome. If the report cannot expose the values needed to make that distinction, retain the source colors and reproduce the comparison with a suitable implementation rather than interpreting the rounded label as authoritative.

Resolve the component choice without weakening the note

For the fictional review, reject the claim that the two candidates have received the same disposition. Keep the applicability note intact and return the component record with its separate results. The designer can then choose an appropriate treatment through the normal design process, with the intended information hierarchy preserved rather than guessed from the token name.

Do not solve the disagreement by deleting the note or moving its meaning into an unexplained symbol. That would change the information available at the moment the reader chooses the instruction. If the wording is too long, ask the content owner to improve it while preserving the applicability condition. A shorter accurate note is a different editorial proposal from a quieter but easily overlooked qualification.

Review the component in its intended context as a separate part of the work. The applicability relationship, reading order and clarity of the instruction remain important even after the numerical row has been classified. Record those observations by their actual evidence rather than attaching them to the contrast calculation. One successful check should not become a substitute for the rest of the user task.

If the design owner proposes another background or a different text treatment, create a new comparison entry instead of inheriting the old result. Keep the earlier pair identifiable for anyone reviewing the change. This makes the conversation about a defined component revision, not a recurring debate over whether a familiar palette color is generally good or bad.

Deliver a record that survives token changes

Prepare the handoff with the component role, exact color pair, stated text context, calculation result and decision. Show the note beside the instruction in the accompanying mock-up so a later editor understands why it matters. The artifact should connect the technical comparison to the specific reader choice it was intended to support.

When a token is renamed or updated, compare the actual revised pair with the record rather than assuming the old label preserves its meaning. Coordinate any real implementation work with the responsible owner. This exercise does not change a stylesheet, publish a component or certify a site; it supplies a reproducible review object that can inform authorized work.

Finish by removing the misleading shared-status badge from the fictional report and retaining the two distinct results. The lesson is not to print excessive decimals everywhere. It is to keep presentation rounding from changing the decision and to preserve the supporting note’s role in the reader’s task. The final record should make both points understandable without relying on the reviewer’s memory of the meeting.

Make the reasoning concrete.

A report prints the same one-decimal contrast value for two candidate gray text tokens on the specified background. The applicability note remains necessary in both versions.

Choose the complete record and preserve the applicability note while the designer resolves the treatment.

Take the questions into your next brief.

Use these prompts in your own notes. Nothing is submitted from this page.

1. Role

   What must the reader learn from this supporting text?

2. Pair

   Which exact authored foreground and background are being compared?

3. Threshold

   Which criterion and text context define the decision?

4. Precision

   Does the displayed summary preserve the underlying disposition?

5. Revision

   Which changed treatment requires a new comparison?

Watch for the wrong conclusion.

• Approving a token name without its actual pairing.
• Letting a rounded badge overwrite the underlying result.
• Deleting necessary applicability information to simplify the design review.

Sources & scope

Original fictional help-page scenario and candidate tokens. W3C guidance supports the numerical definitions and threshold. Local arithmetic only; no live component or conformance status changed.

• Understanding SC 1.4.3: Contrast (Minimum) →Primary W3C explanatory guidance · Supports: Threshold, rounding rule and sRGB contrast definitions.