How to use a color contrast checker

Start with the colors that actually touch

A contrast ratio belongs to a pair: the text and the surface behind it. A brand color cannot pass or fail by itself. Copy the foreground and background values from the rendered component, including the hovered, selected or focused state you are testing.

If text is translucent, measure the composited result. If it sits over an image or gradient, check the least readable area rather than one convenient pixel. A passing result on a flat white background says nothing about a photograph.

Read the correct threshold

Large text means at least 18 pt, or 14 pt when bold—approximately 24 CSS px or 18.67 CSS px. A short button label is not automatically large text. Do not round a value below a threshold up to a pass.

Repair one variable, then test the component

1. Open the contrast checker and enter the text and background colors.
2. For text on a light background, try darkening the foreground. For a dark background, try lightening it. Recheck the actual ratio after every change.
3. If the exact brand color must stay fixed, use it for an accent and choose a separate text color. Changing the surface is another option.
4. Check small labels, muted text and interaction states separately. Use the real type size and weight before accepting the result.

The example above changes #999999 to #595959 on white. It demonstrates one repair, not a universal replacement for muted text. APCA is a separate readability model; its score must not be substituted for a WCAG ratio. Passing one pair also does not certify the whole interface.

Reference: W3C: Contrast (Minimum) and Contrast (Enhanced).