Changing text color on system buttons
Nov 26, 2020
Hi,
Is there a way to change the font color of system buttons (aka the Divider Continue button)? Seems to me like it would be an easy fix by just adding that to the block's setting.
I'm currently building courses and our Brand color is light green. But for an unknown reason, the system uses white font on my Continue buttons that uses the Brand color. So, we can barely see the text on those buttons and it doesn't pass the WCAG 2.1 contrast requirements.
I can't change the shade of the green color since it's our brand color. What can I do? Why the option to change the text on those system buttons (or even changing the colors of those buttons) is not available?
Thanks
19 Replies
Hello Frédérick!
I can understand how white text on a light green button would be an accessibility issue. While there isn't a way to change the continue button text color right now, I'll send you an update if we make adjustments that will help you!
Thanks, I'll appreciate that
We would love the ability to change the "Continue" text color as well. Any update on this feature?
Hello Glen! We're still tracking this request, but I'll be sure to let you know here as soon as we have updates to share!
I discovered by accident while trying to change the color of the Continue button that you can change the Continue font color by doing the steps below to your exported Rise course. I would imagine the other system buttons can be changed in a similar fashion if you can figure out the name for them in the CSS file.
1. Extract your files from the zipped exported package.
2. Open the main.bundle.css file in a text editor such as Notepad. (In a Scorm package, this is located in the scormcontent/lib folder.)
3. Use CTRL + F to open Find and search for 'continue' (see continue.png attached image below).
4. Inside the curly brackets immediately following .continue-btn, you will find a color attribute followed by a hex value (circled in blue in the continue.png attached image). Change the hex value to the color you desire.
NOTE: Be very careful to only change the hex value (shown in the image as #fff). Don't add or delete any other characters. Also make sure your hex value begins with the hash (or pound) symbol as shown. Your hex value will likely be 6 characters long, such as #123456.
5. Save the file. Rezip your package and publish.
I hope this helps!
This is great to know, thanks so much!
Do you know if there is a way to change the colour of the numbers in a list as well?
Cheers!
Hey folks,
We've hit some snags with our updated text editor. While we love the joy of delivering new features, it should never come at the expense of usability. We're going to roll back this release for now. You may still see the new toolbar until the rollback is complete. I'm so sorry for the trouble!
Looking for a way to change the font color on the Continue buttons as well. Any ETA on this feature? Thanks!
Hi, I am also looking for an update on changing the font color on the continue buttons. Attached is what my buttons currently look like, and as you can see the font is hard to read. Thanks!
Hello, are there any updates on that issue? If the accent color of a theme is rather light, all the divider buttons are basically useless. I hope you can fix this problem any time soon. Thank you!
Yes, we have the same problem. Also, it would be very important to be able to change the font color for the buttons of a link list as well. Currently you can only change the button color to differ from the theme. Please for a solution as soon as possible!
Hello, I am facing the same problem regarding the font color of the buttons. When do you think we would be able to get an update on this matter?
+2 On the need for this update! Our brand color is a strong yellow and the white font simply doesn't show!
Text Contrast Controls
Instantly ensure training content meets accessible color handling requirements for learners with low vision. Enhance course navigation buttons, cover pages, and headers so that light text automatically appears on dark colors and vice versa.
In development
See https://articulate.com/support/article/Articulate-360-Feature-Roadmap#rise-360
Adding my upvote for this too.
This NEEDS to be a fix that comes out ASAP. I love how easy Rise is to use, but the lack of customization options is disappointing, which often leads me back to Storyline. This is especially a problem when you have company colors to work with that are light and don't allow for a light text color.
I am also adding my vote for this feature too.
Hi folks! Quick update here about buttons and other block elements that use the course's theme accent color.
We released an enhancement where blocks like the continue button and numbered lists will use white or black text depending on whether your theme color is light or dark:
We're continuing to work on making this text auto-contrast feature fully accessible, and we'll have more to share in the future.
We're also aware that you need more flexibility to choose the color of those elements within a block, and that you'd like to have the ability to change the color of bullets in text blocks. We'll keep you posted on developments in those areas, too!