Check color contrast in a working interface
Audit text and interface states through actual foreground-background pairs, then repair weak combinations without relying on color alone or treating one passing sample as a complete accessibility review.
Contrast is a relationship between colors
Contrast belongs to a relationship between visible elements, not to a color in isolation. A pale pink can work as a panel background and fail as small text on white. Audit the actual combinations in the product, including links, hints, selected controls, and messages, rather than approving a palette from attractive swatches alone.
Measure the rendered text pairs
Use a contrast checker with the rendered foreground and background colors. WCAG's text contrast criterion generally requires 4.5 to 1 for ordinary text and 3 to 1 for qualifying large text, with defined exceptions. Keep text checks distinct from other requirements. A passing heading does not establish that small captions or control boundaries pass. Write the rule as a short contract between the person and the interface: an action has a visible consequence, that consequence has a recognizable state, and the next action remains possible. Sketch the ordinary path and one interruption beside it. This exposes missing information earlier than polishing a single screen. Keep the labels in the sketch close to the eventual product language so that unclear words cannot hide behind annotation.
Audit an exhibition page and its states
Create a fictional exhibition page with a title, ticket link, muted caption, and warning. Record each pair and its measured ratio. Darken one failing foreground while keeping the intended mood, then check hover, focus, and selected states. Use real text sizes so the exercise cannot quietly classify small text as large. Make a paper walkthrough with one card for each important state. Add a second set of cards for an interruption, a changed answer, and a return visit. Someone else should be able to operate the cards using only the visible instructions. Where they need hidden knowledge, note the missing information instead of teaching the intended path. Revise the cards before spending time on detailed visual treatment.
Separate contrast from color-only meaning
A background image can make contrast vary across a single line. A shadow is not a reliable substitute for a readable background treatment. If a status is communicated only by red or green, fixing its ratio still leaves a separate meaning problem. Add explicit text or another clear cue to carry that information. Read every instruction while pretending the preceding explanation was missed. People arrive from links, resume after breaks, and move through content in different ways. Put the necessary context where the action happens. If the same problem recurs in several places, revise the underlying pattern instead of adding a separate warning to each instance. Shared causes usually deserve a coherent design response.
Keep a traceable record of repairs
Review the implemented page in its full set of states and record the measured pairs. Keep the scope honest: this exercise addresses selected contrast relationships and does not certify the entire site. Recheck when colors, font sizes, images, or transparency change. The useful artifact is a traceable set of combinations and repairs, not a screenshot with one passing badge.
Worked decision
Measure the muted caption against its actual panel, then repeat for a caption over a photograph. A single palette swatch cannot represent both contexts.
References & further reading
Examples and exercises in this guide are original teaching scenarios.
