Text Over Images WCAG / ADA Level AA Requirements
Our latest round of changes from a wonderful national furniture co requested to “remove the white box behind text”. In other words – add text over the background images.
Now to do this – we just need to make sure that the site is still WCAG / ADA Level AA compliant one of the requirements is to make sure there is adequate contrast between the text and the image behind it.
Please read this:
And this if you’re into boring spec docs (Exact ADA Requirement):
- Our options to be compliant:
- 1) Select a brighter / darker image
- 2) Edit the image to be brighter / darker
- 3) Enlarge and move text to different area of the photo – Complete execution of this is highly complex and not recommended in most cases (remember fonts move depending on screen size, browser, font size within their browser, and platform person is using to view the page), so avoid this where possible.
- 4) Move text off the image somewhere else in the page.
- 5) Add ‘box’ behind text – for this project, we are avoiding this wherever possible.
- Use this tool to test images – make sure to move the text so it refreshes
- Decorative or duplicate text doesn’t matter for ADA – If we have text below or near that performs same function as text over the image, then the text over the image is considered decorative and doesn’t matter for ADA.
- This applies to html text over images or images w/ text graphically added.
Hopefully this helps and informs everyone in your ADA Compliance,