joomla-cms
joomla-cms copied to clipboard
joomla
[5.2] Change Alert Colors to Accessible Colors (AA) for Quickicons
Changed Colors of Quickicons Added chosen colors to scss vars
Pull Request for PR https://github.com/joomla/joomla-cms/pull/38813
Summary of Changes
I changed the colors of the Quickicons to accessible colors (AAA) and followed this article for recommendations: https://medium.com/handsome-perspectives/a-guide-to-color-accessibility-in-product-design-aa3e8919be0
Testing Instructions
I am not sure if it's ready to test yet. If we have accessible colors for alerts they should be consistent through the system but it seems that the colors are managed also in an outside repo (https://github.com/joomla-projects/custom-elements), I am not sure how to change them there and test it. Also I do not understand the logic behind how it was done before. I wanted to use the scss variables but they can't be used with css variables so I put in the values static. Which I think is wrong because the colors should be managed by scss variables in a central file.
Actual result BEFORE applying this Pull Request
Note that I changed the class of the Privacy Request Icon to simulate the warning color.
Expected result AFTER applying this Pull Request
Note that I changed the class of the Privacy Request Icon to simulate the warning color.
Note that I changed the class of the left bottom quick-icon to warning for testing purposes.
Documentation Changes Required
- See the code style issues https://ci.joomla.org/joomla/joomla-cms/58312/1/25
- What was wrong with the danger, info and success colours that requires the change?
- I am not an scss guru but this pr hard codes colours that were previously generated based on variables. I suggest speaking to @drmenzelit for assistance as I believe she worked on this
I thought to make consistent AAA Colors according to the recommendations in the article. Not good? I can take the AA colors as well, but I tought the more accessible the better.
PR changes not only the colors of the group of quick icons. Lots of changes. Colors, contrast, etc.
Yes, what does the a11y Team think about improving the colors and therefore constrast for accessibility? @chmst
Should I aim AAA or AA @brianteeman i thought the more accessible the better. Of course changing colors to be more accessible involves changing the constrast. That's the main goal.
that is a question for the accessibility team.
the point you missed from @kostelano comment is that this pr impacts much more tha the quickicons
that is a question for the accessibility team.
the point you missed from @kostelano comment is that this pr impacts much more tha the quickicons
Yes, because it has to fit together. I changed the color and contrast of the other quick icons as well to match the color of the corrected quick icons. But before I don't know if we even want to make it better accessible it does not make sense to discuss the changes.
As far as I know, Joomla 4 is compliant with WCAC AA. If we want to make it AAA compliant, we should do that everywhere in the particular client (admin or site or installation) and not only at one place.
As far as I know, Joomla 4 is compliant with WCAC AA. If we want to make it AAA compliant, we should do that everywhere in the particular client (admin or site or installation) and not only at one place.
Ok, I will change the colors to the lower accessibility standard no problem
We don't promise AAA compliance, which does not mean that colours may not be AAA thats always fine and no need for discussion. I like the colours but I think that it is wrong to make some changes here and there without a concept.
The whole colour scheme was calculated carefull by @coolcat-creations - with automatically generatng a a11y colour scheme when a user selects a colour for the template. This was dammaged during all the design chnges which followed - but the right way would be repairing the hue, then calculating the colours with better contrast.
Dear @coolcat-creations the solution doesn't seem optimal to me. For two reasons.
- Your colour adjustment brings some unrest into the design. You are using colors we not used before.
- The red and green of the font, as we have it now, is ok in terms of contrast, only the icons could be a little stronger.
For technical reasons we should only touch _quickicons.scss otherwise we will have lots of sideeffects, we can not control
Would suggest checking contrast with upcoming APCA formulas for more accurate visual contrast:
https://www.myndex.com/APCA/
The biggest problem is with the warning/yellowish orange color, so I would focus on changes there that are consistent with the other red/green colors that do pass AA contrast.
For example with the quick icon, using this combo for the text and default background:
Text/icon: #db9508
Background: #fff7e8
And for the hover state:
Background: db9508
Text: #ffffff
Icon: #ebd9ae
I changed the colors to have the same smooth appeareance like before, anyway improved some contrasts and fixed the warning color. Is it ok for you now?
The entire point of the other PR was to make the message on template overrides to check "less scary" by being aa different colour to the red danger used on thingss like Update.
With this PR the difference between warning and danger is so subtle that it fails to achieve the objectives of that PR and it might as well be closed.
Simulated quickicons below
Initially I used different colors but people were unsatisfied that the change is too hard. Now I use the AA colors from the medium article and still not good? https://medium.com/handsome-perspectives/a-guide-to-color-accessibility-in-product-design-aa3e8919be0 What is your prefered color for warning if not orange? @brianteeman
I would have stuck to the colours that bootstrap uses https://getbootstrap.com/docs/5.2/customize/color/
I don't think that you would ever agree to change all the quickicons to this colorscheme at all. It's a way too hard change for the backend to follow this scheme and would not fit into the design.
You asked and I answered.
As I said above the whole purpose of the other PR stopping the danger and warning colours being the same was at user request that they are differentiated and the warning is less scary.
You asked and I answered.
You disagreed to the initial hard change here in the PR and now you are proposing this extrem hard color change... ?
As I said above the whole purpose of the other PR stopping the danger and warning colours being the same was at user request that they are differentiated and the warning is less scary.
Yes and you introduce a style which is not accessible anymore. I try here to help your PR and you put stones into the way.
I am just going to close my PR. Not wasting any time on it.
Moving forward with this PR I hope you follow the advice from @angieradtke to only change the quickicons file And my request that you uses lowercase for css colours as used everywhere else
I will see if I can suggest some colors that are well differentiated but still accessible as well as solve the monochrome issue. Taking a look now...
@brianteeman I changed the colors like you suggested, is it ok for you now?
I will see if I can suggest some colors that are well differentiated but still accessible as well as solve the monochrome issue. Taking a look now...
Thank you!
@coolcat-creations Please fix the SCSS code slyte errors reported here by the linter (npm run lint:css): https://ci.joomla.org/joomla/joomla-cms/58546/1/25