[5.2] Change Alert Colors to Accessible Colors (AA) for Quickicons

[coolcat-creations]

Changed Colors of Quickicons
Added chosen colors to scss vars

Pull Request for PR #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

[brianteeman]

1. See the code style issues https://ci.joomla.org/joomla/joomla-cms/58312/1/25
2. What was wrong with the danger, info and success colours that requires the change?
3. 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

[coolcat-creations]

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.

[drmenzelit]

@nadjak77 worked on the variables and hue-values for Atum

[Kostelano]

PR changes not only the colors of the group of quick icons. Lots of changes. Colors, contrast, etc.

[coolcat-creations]

Yes, what does the a11y Team think about improving the colors and therefore constrast for accessibility? @chmst

[brianteeman]

I think you have missed the significance of @Kostelano comment

[coolcat-creations]

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.

[brianteeman]

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

[N6REJ]

I like the idea.

[coolcat-creations]

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.

[richard67]

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.

[coolcat-creations]

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

[chmst]

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.

[angieradtke]

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

[coolcat-creations]

Got it, I will change it to AA colors :-)

[crystalenka]

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

[coolcat-creations]

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?

[coolcat-creations]

So should I change the info classes to black, right? This will affect the whole dashboard. @brianteeman @crystalenka

[crystalenka]

I think affecting the whole dashboard is okay at this point. It will be consistent with each other and more accessible as a whole.

[HLeithner]

This pull request has been automatically rebased to 4.3-dev.