Forum Discussion
Change colors and/or hover for the Next and Previous buttons on Player
I need a better color contract for the next and previous buttons on the Storyline player - the buttons are not an accessible color contrast - is it possible to adjust the color so there is better contrast without having to create buttons.
Thanks
Nancy
Please prioritize this feature request. It's been broken for at least 4 years now. Just give us the option to adjust the colors so that we can meet the required accessibility levels without having to create our own buttons. Accessibility and equity are important, and they should be to you as well.
I am surprised that Articulate are unwilling to move on this issue. Changing the Background colour is not the solution to offer when an organisation wants the player to be in the organisation's chosen brand colour.
What I find quite bizarre, is that when I have moved from SL3 to SL360 and changed our player to Modern, some of the tabs are indeed white and not grey (please see attachment). This suggests either a bug or a conversion oversight.
Please don't "fix" this by making them all grey!
I think everyone just wants to have a player where they can decide the appropriate colours as opposed to it being locked down.
Sometimes, what seems to developers to be a minor issue and not worthy of work actually is a key UI/UX issue which is frustratingly ignored.Thanks for listening.
Thank you, Steve and everyone else who has contributed to this thread for sharing how important this feature is to your workflow!
I've collected this feedback to share with our team! At this time, we are prioritizing other features and bug fixes for upcoming releases, so we don't have a timeline for when this feature will be slated for a future update. When I have an update to share, I'll be sure to return to this discussion.
Hi Nancy!
Would your course benefit from adjusting the color of the player to a custom color or a dark or light theme?
I found this article from the 2021 Storyline Update that walks you though how to adjust the player color within the player properties tab: Storyline 360: Modern Player Custom Color.
Perhaps this will create enough contrast so that the Next and Previous button text pass accessibility standards.
Thanks,
Luciana
Changing the background color isn't the issue. There are many times I want a specific background, not just using light or dark. The dark background meets the "minimum" standard for contrast but the light background does not meet any of the WCAG contrast for those with a disability - which would mean that either you have to create all the buttons for a module or use only the dark background. It would seem like Articulate could fix this without a lot of trouble - or maybe there is a javascript that we could use. It's very frustrating. And for some larger organizations where the triple-A (AAA) is the company or org standard, they would have to create all the buttons because light and dark backgrounds do not meet the triple-A standard at all!
Hi, Nancy.
Thank you for reaching out!
The player adjusts the color of the buttons depending on which background color you choose.
When you choose a dark custom background color, the player controls use hex color code #BABBBA. When you choose a light custom background color, the player controls use hex color code #585858.
While you can't choose a different color for the buttons, we have a feature request logged for the ability to customize the font color for the Menu Controls in the Modern Player.
I will update this discussion if I have any news to share or if this request makes it to our feature roadmap.
Is there any update on this feature? As advanced as Articulate is with bells and whistles, I'm really disappointed at the lack of action on accessibility features. This is not a hard change.
I have to agree with everyone in this string and others on this topic. There's such a push by Articulate to use the modern player but the color control is so inferior to the classic player. And yes... 4 years is a long time to wait.
Cheers Lauren. Appreciate you popping in to respond.
It's not ideal but a workaround is to change the css output.min.css file. Naturally every time you publish you have to re-apply, you will overwrite your css changes. I make it a part of my release process. Not that big of deal my changes are light.
For example, let's say you want to change the next and previous hover color to neon green and really make it pop. You can try it by publishing your course to web, now inspect the page, on pc hit F12 for developer tools. Inspect element. Now select your next button, that will highlight your element, on the styles pane you will note the which one it is. In my circumstance it was output.min.css:693. What that means is it's the output.min.css file and its line 693. In my case the css was:
body:not(.is-touchable-tablet) .cs-pxabnsnfns10111100101 .cs-button:hover .text {
color: #BABBBA;
}I changed to:
body:not(.is-touchable-tablet) .cs-pxabnsnfns10111100101 .cs-button:hover .text {
color: #09f332;
}Hit save and reload. Now hover over next and prev. See that its neon green. You shouldn't need to clear your cache but maaaybe.
Repeat process for discovering your desired elements and change the attributes accordingly.
Andy
