a11y - toolbar icons - lack of contrast - cms ui

[Wagner3UB]

Describe the bug
This issue is related to insufficient color contrast that does not pass accessibility contrast requirements. All toolbar buttons, when the user is inside the CMS UI in edit mode, have an opacity value set to 0.8. Because of this opacity, the visual contrast between the buttons and the background is reduced and falls outside the accepted accessibility standards.

To reproduce
1 Go to https://demo.plone.org/edit
2 Log in to the CMS
3 Enter edit mode so that the CMS UI toolbar is visible
4 Observe the left side toolbar
5 Notice that all toolbar buttons, not only the save or cancel buttons, have a CSS class that applies opacity 0.8

Expected behavior
All toolbar buttons should have sufficient contrast to meet accessibility guidelines, without using opacity values that reduce readability and visual clarity.

Actual behavior
Every toolbar button uses opacity 0.8, which lowers contrast and causes the buttons to fail accessibility contrast tests.

Screenshots

Example:

Software (please complete the following information):

• Volto Version 18.27.3

[Deepak229-hub]

I think I can fix this issue as I have worked on similar issue in one of my projects.

You can see I have managed them to have good visibility in both light mode and dark mode.

[stevepiercy]

@Deepak229-hub please read and follow First-time contributors, especially Things not to do, Contributing to Plone, and Contributing to Volto.

[shivaansh0610-LUFFY]

@Wagner3UB working on it

[Shyam-Raghuwanshi]

@shivaansh0610-LUFFY There are already a few PRs currently under review. And please follow First-time contributors, especially Things not to do, Contributing to Plone, and Contributing to Volto.

[Tanish-Tandon]

Hi, I’m new to the Plone/Volto community and starting my open-source contributions.
I would love to work on this issue.
Could you please guide me on the approach or assign it to me?

[Shyam-Raghuwanshi]

@Tanish-Tandon please follow First-time contributors, especially Things not to do, Contributing to Plone, and Contributing to Volto.