Text that overlaps images or videos needs sufficient contrast against the background to be fully legible. Images and videos with busy backgrounds make text difficult to read.
Make sure text on images and videos have a minimum contrast of:
- 3:1 for large text (>18pt normal, >14pt bold)
- 4.5:1 for body text (<18pt normal, <14pt bold)
If needed, add an overlay on your image or video to increase the readability and contrast between elements.
Check the color contrast of your icons and learn more about best practices with these excellent color contrast tools:
- Color Contrast Analyzer (Chrome Extension)
- TPG’s Color Contrast Analyser
- tanaguru contrast finder
- WebAIM’s Contrast Checker
- Ensure High Contrast for Text Over Images