Start with a foreground and background pair
A palette does not pass or fail contrast as a group. Each use creates a specific relationship. Gold might work as a background behind plum text while being unsuitable for small lettering on silver. List the combinations used by body copy, buttons, captions, inputs and links before deciding which colors need to change.
Apply the appropriate threshold
WCAG’s minimum text contrast criterion generally calls for 4.5:1 for normal text and 3:1 for large text, with defined exceptions. Do not round a value up to claim it meets a threshold. A numeric pass also does not guarantee that an extremely thin font or tiny caption will feel comfortable to read.
Measure the rendered colors
Use the colors actually produced by the interface, including opacity and the effective background. A plum label at partial opacity on a silver panel does not have the same contrast as solid plum. Gradients and images add variation, so check the lowest-contrast area behind the text or provide a reliable solid surface.
Test a concrete button example
Suppose a primary button uses a bright pink fill. Instead of assuming white text is the standard choice, compare white and near-black labels against that exact fill. Then repeat the calculation for hover and disabled states. The more readable choice may preserve the intended brand color without requiring the background to become darker or less distinctive.
Add cues beyond color
A form error needs a written explanation, a selected filter needs an identifiable state, and an inline link benefits from a non-color cue such as an underline. Contrast helps the signal remain visible, but it does not explain what the signal means. Design shape, text and state indicators as part of the same interaction.
Keep a practical review list
Check body text, secondary text, form placeholders, focus indicators and text inside every product-card variation. Inspect them on both light and dark page themes. Record the real pair values with the component so later changes can be reviewed. Automated contrast tools are helpful, but a manual pass is still needed for images, overlays and changing interaction states.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.