0

I have a situation with an autoplaying video banner (you know the type, full screen html background element) where there is text overlayed on top of it -- common in marketing landing pages and their ilk. I can't get the autoplay video decision reversed, but do want to make sure the text remains accessible (AA compliance).

So if you have a video playing on a background layer, and text or a headline overlayed on top of that (especially white headline text) -- beyond drop-shadows or a gradient overlay, are there any techniques to ensure the text has enough contrast?

And what exactly is the requirement here anyway? For example, if the video were to have light colours at moments (let's imagine it has a lens flare), is it a fail if contrast isn't maintained for it's full duration? Do you literally have to test every frame to ensure success criterion 1.4:3 is met in such a situation?

Improve this question

2 Answers 2

Reset to default
1

In the strictest sense, yes, you always have to have contrast of 4.5:1 or more. But there are exceptions and a nice can of worms waiting.

If your drop shadow or text outline have a contrast of 4.5:1 to text fill, that might be enough. Though this depends on the location of your drop shadow and width of your text outline. Drop shadow at the bottom of the text or miniscule outline doesn't increase readability that much.

You can get away with smaller contrast if your text is large enough, then the contrast of 3:1 is sufficient.

There are two success criteria to consider in addition to 1.4.3 Contrast (Minimum) / AA. The other success criteria are 2.2.2 Pause, Stop, Hide / A and 2.3.1 Three Flashes or Below Threshold / A.

2.2.2 Pause, Stop, Hide states that:

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential[.]

Being a background video, it isn't in any way essential to the activity of the page.

If you are going to get sufficient contrast between the text and the background only on some frames, you now have both moving background and a blinking text on top that background for some users.

This leads to 2.3.1 Three Flashes or Below Threshold, which states:

Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

Success criteria notes also that:

The terms "blinking" and "flashing" can sometimes refer to the same content.

  • "Blinking" refers to content that causes a distraction problem. Blinking can be allowed for a short time as long as it stops (or can be stopped) [...]
  • Blinking usually does not occur at speeds of 3 per second or more, but it can. If blinking occurs faster than 3 per second, it would also be considered a flash.

So, if you want your site to be accessible but can't overturn autoplay decision, there are some solutions.

  • Add contrast by using text outlines or colored boxes behind the text. (I think gradients are ok but make sure that contrast is sufficient in every point.)
  • Add a way to stop the background video. Do make sure that it is accessible.
Improve this answer
2
  • I’m wondering whether there might be a CSS blend-mode that ensures sufficient contrast. But then again, the text might technically have enough contrast with its immediately surrounding background, but is hard to read.
    – Andy
    Jun 14, 2022 at 8:27
  • Multiply might suffice but I think it turns lighter tones to darker than intended and make visual designer go mad.
    – locationunknown
    Jun 14, 2022 at 9:35
0

I do home page re-designs for a lot of clients and despite my recommendations against it, many still want what you're describing. IMO there is no perfect solution. Even with outlines etc. most 508 compliance tools are going to flag it. Maybe use that in your arguments - clients tend to be more flexible when you explain their liability. "Locationunkown" gave a lot of good info.

If a client will let me get away with it I tend to prefer a transparent overlay that provides enough contrast.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.