Accessibility - Color contrast of video controls
Jan 30, 2024
Hi everyone!
We carried out an audit to make our modules accessible. One result was that the icons in the video control bar are difficult to see when the following settings are saved as a preference in the browser:
- Font size 24px
- Fonts "Serif", "Sans Serif" and "Fixed width" replaced by clearly different fonts, checkbox "Allow pages to use their own fonts instead of the fonts selected above" deactivated, Minimum font size set to " one"
- Significantly different text, background and link colors, checkbox "Use system colors" deactivated, for selection list "Use colors selected above instead of page colors" value set to "Always"
Attached is a picture of how difficult the icons were to see with the preferences saved in the browser.
We used the light theme of the video control bar. Is there a way to design the icons in a way that they are always clearly visible and have sufficient contrast regardless of the settings that individual users have saved in their browsers?
Thanks in advance! :)
Side note: One solution suggested by the agency that carried out the audit was to set a background color for the icons or to give them a border. However, I have not yet seen that this is possible in Storyline.
7 Replies
Hi Lisa,
Happy to help!
Right now, there isn't a way to modify the appearance of the video control buttons. I'd like to take a closer look at the behavior you're experiencing so we can identify what's making the video control buttons hard to see.
Since it looks like specific browser settings are needed for the issue to appear, I'd like to ask for the following information so I can test the issue on my end:
For your reference, here are the font settings that I had configured on my browser:
Looking forward to your response!
Hi Jose,
Thanks for your reply and sorry for my late response! I tried to get Peek 360 working but unfortunately I am unable to open it and also unable to uninstall (as I wanted to uninstall and re-install to see if that works)
But I hope, that I can give you all needed information by explanations and screenshots anyway.
So, for the audit Firefox was used.
I added a screenshot of the video control bar before changing the browser settings (we used the light theme)
Now I went into the settings of the Firefox browser and did the following:
Under "Language and Appearance" / "Colors" I opened "Manage Colors..."
In the next window you can change the color for text and background. For "text" I chose a blue and for "background" a dark grey.
Then there is the following setting "Override the colors specified by the page with your selections above" For that I chose "Always"
I added a screenshot of these settings and also how the video control bar looks after these settings.
You can see, that the text (seconds display) is now blue and the background is dark grey but the symbols are now more or less no longer visible, as they do not automatically react to the new, insufficient contrast due to the dark gray.
I hope, that this information helps you :)
Hi Lisa!
Happy to jump in here! Thanks for sharing the additional details!
After configuring my Firefox to match those settings, I noticed more contrast for the video controls than you reported in your screenshot.
If you have flexibility over which shade of grey can be used, have you tried a darker shade to see if the contrast becomes more pronounced?
Also, if you'd like help with troubleshooting your Peek 360 installation, please connect with us through a support case. Looking forward to hearing from you!
Hi Steven!
I tried that and attached what it looks like.
A bit better but not as good as it is on your screenshot.
It seems to me that these icons stay the same color no matter what background color I choose in the browser settings (at least in my project) - That is also e.g. a problem when I hover over an icon with a dark background as in that case the icon nearly becomes invisible
Hope you can help me with that :)
Hi Lisa,
Thanks so much for those screenshots! Happy to help.
It would be very helpful to take a closer look at your file. Feel free to upload your current file to this thread or privately in a support case.
Looking forward to hearing from you!
Hi Luciana!
Yes, I tried it in a completely new project and also made sure to have the latest update installed.
Also adjusting the brightness of my computer didn't fix it unfortunately and I also let a colleague try it with her own account and a new project but it looks the same as for me..
I just did another test round and included the modern player and it seems like the player responds to the browser settings really good compared to the video controls.. is the same logic implemented for the video control bar as for the modern player? I attached some screenshots to show you how it looks like for me with the player and the video controls.
You can clearly see how the icons are really dark first in the player and after I changed the background color in the browser settings the icons get really light.. that's exactly the behavior I would need in the video control bar as well for our accessibility requirements :)
Another off topic question: I have noticed that as soon as you add captions to a video, the option to turn the caption on and off appears in both the video controls and the player. However, the option to show the transcript only appears in the video controls. Is there a way to bring this option into the modern player as well?
Hi Lisa,
Thanks for sharing additional information regarding the behavior you're experiencing. I opened a support case on your behalf and shared these details there so we can have our support engineers review them. You're in good hands and someone from our team will be reaching out shortly via email to help troubleshoot the behavior.