-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Update default greens in variables.less to provide better contrast. #15162
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update default greens in variables.less to provide better contrast. #15162
Conversation
Lighthouse accessibility tool identified the green selected for "Login" (and other) buttons as low-contrast. Change default greens to offer more contrast.
Hi there @nagolucky18, thank you for this contribution! 👍 While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:
Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution. If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request. Thanks, from your friendly Umbraco GitHub bot 🤖 🙂 |
Hi @nagolucky18 , Thanks for this update.! I'll quickly check with HQ whether the "new greens" are OK for them or not and I'll keep you posted of their answer. Cheers! |
Hi @nagolucky18 , Sorry for coming back to you so late 😬 It seems that HQ updated the colors of their UI Library components to have better contrasts (and they pass the A11Y tests), so they suggest to use the same green(s) as in the UI LIbrary. So it would be super great if you could adapt your change to use one of the UI LIbrary greens. Cheers! |
No worries! I get it, with the holidays and such. I'm not familiar with the location of the UI Library file(s). Is there a directory you could point me to? Or otherwise a commit or Github item where the update was made? Thanks. |
Hi @nagolucky18 , The files are in fact located in the Umbraco.UI repository, and I believe that this PR might be the one we're looking for 😁 I hope this helps, let me know if you need anything else 😉 Cheers and have a good week-end! |
@mikecp It looks like the greens in that commit still fail the lighthouse accessibility test from Google. The values in umbraco/Umbraco.UI#648 were selected because they passed A11Y though, so I'll go ahead and push the commit that updates them to closely resemble the new greens if that is OK. |
Lighthouse accessibility tool identified the green selected for "Login" (and other) buttons as low-contrast. Change default greens to offer more contrast. These values closely match the colors in the UI library, which were selected to pass A11Y accessibility tests. Issue: 15070
…lucky18/Umbraco-CMS into 15070_login_button_contrast
Hey @nagolucky18 - we're currently working on a slightly refreshed color scheme for v15, which should take contrast into account as well. Therefore, I will close this PR in favor of the upcoming work from HQ. |
Lighthouse accessibility tool identified the green selected for "Login" (and other) buttons as low-contrast. Change default greens to offer more contrast.
Prerequisites
If there's an existing issue for this PR then this fixes 15070
Description
The following changes were made:
Old:

New:

To test the changes:
Note: Because this is a variable, other styles that use this green are also affected. This should, in theory, fix any other accessibility issues due to the use of this green.