Accompanying Files
Observation Details
The play buttons in video pop-up thumbnails are used as interactive elements to start the video playback. Their colors do not have high enough color contrast ratio against the colored background. A color contrast minimum of 3:1 must be met for all interactive elements, including buttons. The contrast ratio should be met for the whole interactive element as well.
Remediation Notes
Ensure high enough color contrast of all interactive elements. In case of the video play buttons, the possible remediation could be to make the button non-transparent and add a different color outer outline. The so-called "oreo-outline" ensures visibility on both light and dark backgrounds:
outline: 1px solid white;
box-shadow: 0 0 0 3px black;
background-color: white;To make this work, the play button must be created, using an SVG icon inside the button. You can see an example for this in the video players on audit sample page "Kids Watch".