A practical contrast audit for marketing visuals and interfaces
Test real foreground and background pairs, glass overlays, states, exported images, and non-color cues against WCAG contrast guidance.
A color palette can be tasteful, on-brand, and still make text difficult to read. Contrast review is where visual preference meets a measurable accessibility requirement.
WCAG 2.2 sets a minimum contrast ratio of 4.5 to 1 for normal text and 3 to 1 for large text, with specific exceptions. Those numbers are a baseline, not a complete design review.
Audit real pairs, not palette swatches
Design files often show colors separately. Readers experience a foreground and background together.
List the actual pairs used for body copy, headings, buttons, links, captions, form labels, errors, and text over images. Include hover, focus, disabled, and visited states when they carry information.
For translucent glass surfaces, test the final rendered pair over the lightest and darkest parts of the background. A single color token may produce several effective backgrounds.
Do not estimate by eye
Use a contrast checker with the final hexadecimal or computed colors. Record the ratio and the intended text size.
Thin type can feel weaker than the numeric result suggests. Font rendering, image texture, and glare also affect reading. Passing the formula does not prevent you from increasing contrast for practical clarity.
Large-text exceptions should not become a reason to make important copy oversized. Confirm that the text meets the size and weight definition before applying the lower ratio.
Fix the smallest variable
When a pair fails, change the variable that creates the least damage to the system.
Darken or lighten the text token first. If the surface is translucent, increase its opacity. Reduce background texture beneath copy. Move text to a quieter region of the composition. Add a restrained solid or glass layer when the image itself cannot provide a stable field.
Avoid glow effects and heavy text shadows as accessibility patches. They often reduce sharpness and create inconsistent edges.
Preserve more than color
Contrast does not solve meaning that depends on color alone. A red error border needs a message or icon. An active chart series needs a label or pattern. A link inside body copy should remain identifiable when color perception differs.
Check focus indicators as part of the same review. Keyboard users need a visible current location, not only readable text.
Build a small evidence sheet
For each reusable component, store a screenshot, foreground value, background value, contrast ratio, text size, and pass status. Recheck when gradients, overlays, font weights, or opacity tokens change.
Marketing teams should also sample exported PNGs. An image may be resized or compressed on a platform, making small low-contrast copy harder to read even when the source design passed.
Use the standard as a floor
The most important question after the numeric check is whether the message remains easy to read in its real context. Calm design does not require faint text. Restraint comes from hierarchy and composition, not from pushing every supporting label toward invisibility.
A good contrast audit produces a smaller, dependable set of approved pairs and fewer one-off exceptions.
Source guidance comes from WCAG 2.2 and W3C guidance on minimum contrast.
