Text on a Background Image - Information For This Demo
Quick tip: Text on images can be very difficult to read if the image has a lot of colors or texture. If text is found on a background image, you must test the contrast of the text color with the lightest and the darkest parts of the image.
It is usually best to place text on a solid color background.
Also, remember that a background image does not contain alt text. You need to decide if the image needs to be described for people who cannot see it.
How to test this issue
- Test technique: Colour Contrast Analyser.
- You must visually scan the page for any place where text is found over a background image.
- Use the eye dropper tool in the Colour Contrast Analyser to compute the contrast ratio. Confirm that the contrast ratio is sufficient for all portions of the text.
- Remember: the minimum contrast ratio for text against the background is 4.5 to 1.
- Often no test tool is needed; if any portion of the text is difficult to read visually, do not use the background image.
- You must also make a judgment call concerning the background image: does the image convey meaningful information or is the image of sufficient interest to the person viewing the page to require a text alternative? Confirm that a text alternative is provided if needed.
Note: The recommended best practice in TWC is to never place text on a background image. If it must be done, the background image should be a solid color or provide a small gradient where the color changes only slightly. The contrast ratio for text compared with the background must be a minimum of 4.5 to 1 for all portions of the text, even when the page is resized. Remember that WAVE will not find contrast errors for text that is found on top of a background image.
Failing WCAG Guidelines and Test Tips
For this demo, the following WCAG guidelines fail:
- 1.1.1: Non-Text Content
- 1.4.3: Minimum Contrast