Text Over Images WCAG / ADA Level AA Requirements

Photo by David Travis on Unsplash

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:

https://www.nngroup.com/articles/text-over-images

And this if you’re into boring spec docs (Exact ADA Requirement):

https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Key Takeaways:

  • 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.

Other notes:

  • 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.

Links/Tools:

– This is a great quick tool to test individual images
– This is a great chrome browser tool to test full html pages
– ADA Contrast Requirements

Hopefully this helps and informs everyone in your ADA Compliance,
Ti

Wednesday, November 28th, 2018 · Categories: Accessibility / Usability


Post Written by Tison Kelley

Tison Kelley, B.S., specializes in User Interface Design and User Experience in enterprise architectures. Nationally, he has worked with the U.S. Navy, Federal Aviation Administration, and the University of San Diego's Institute for Peace & Justice. Regionally, he has worked with McDonald's franchises, SAAB Sensis Corp, Consumer Credit Counseling, C.B. Richard Ellis, Upstate HomeCare and CNY organizations in a wide variety of industries. He is proficient in XHTML, CSS and Javascript development, as well as PHP, and MySQL on the server-side. He has recently exhibited at trade conferences; Gartner Enterprise Content Management in Las Vegas and Search Engine Strategies NYC. Kelley is a native of Syracuse, N.Y. and has a B.S. in Information Studies & Technology from Syracuse University. He was the founding director of a 501c3 organization that has helped donate over $34,000 for multiple sclerosis research.


Comments are closed.



Return to Blog

We will always build beautiful websites that rank high on search engines.

All About Us

Put simply, our work builds organizations. We've worked with organizations in both public & private sectors.
Read more

Contact

2610 S. Salina St.
Syracuse, NY 13205
Mon - Thurs 9am - 3:30pm
315.233.9283
Contact Us

Get Started

Our latest launch paid for itself on the date of the launch. How can your organization change?
Get Started