Check the contrast for text that overlaps images or videos

Style panel
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:

WCAG reference:

1.4.3 Contrast (Minimum)

Back to checklist

Total progress

Congratulations on making the web a more accessible place. Celebrate your work on Twitter.
Celebration horn and streamer emoji
0 / 0
Hide progress
Show progress