Task
Check the contrast for text that overlaps images or videos
Check as complete
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.
Useful resources:
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
- Colorable
- Ensure High Contrast for Text Over Images
WCAG reference:
Back to checklist
Total progress
Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
0 / 0
Hide progress