Visual testing
Measure Text Contrast on Images and Gradients
Published by whatisADA / Grow Wild Agency · Updated
Purpose and preparation
Review the actual background behind text when it varies across an image or gradient. A single sampled color can hide the weakest part of the text. Test the relevant visual states and responsive crops before choosing a repair.
A practical example
White text overlays a photograph that becomes much brighter behind the heading on mobile.
How to check it
- Identify the rendered foreground and the background immediately behind the text, including opacity and overlays. Sample the least favorable areas that the letters occupy.
- Compare the resulting color pairs against the applicable text threshold, accounting for actual size and weight. Repeat for responsive crops and changing slides.
- Try a stable background, stronger scrim or separate text placement. Recheck all tested states and save the colors, crop and viewport with the observation.
What can be missed
A contrast result for the darkest corner of an image says little about letters over a bright area. Automated tools may be unable to evaluate this background reliably.
Record your test
Use this worksheet to record what you actually checked. Notes stay on this device when you choose Save; they are not sent to us. Avoid personal or confidential information on shared devices.
These are your observations, not automated results or a conformance certificate. A complete evaluation needs appropriate scope, supported technologies, all applicable criteria and relevant page states.
Primary sources and scope
This is independent implementation guidance with original examples. The linked standard contains the full definitions, exceptions and conformance requirements. A criterion or checklist alone does not establish legal applicability or whole-site conformance.