Buttons: white text on cyan background fails the simplest contrast test (WCAG:AA) about prestashop-ui-kit HOT 7 OPEN

hey @prestascott thanks for your advice, sounds great to use #5434d0, I understand that our purple is too dark 😈
We'll change as soon as it will be official :)

from prestashop-ui-kit.

@PrestaShop/prestashop-core-developers is it just a CSS property ?

from prestashop-ui-kit.

Hello @ldeprestashop yes, the settings being discussed here are related to CSS.

However changing CSS values is not a decision we can make alone. These colors have been chosen to follow PrestaShop brand identity.

from prestashop-ui-kit.

OK thanks :)

I will meet Thibaut this afternoon to discuss about that.

from prestashop-ui-kit.

Hello everyone,

Thanks @tdupre for this issue 🙂

We know that the current color #2eb9d7 used as primary in the back office doesn't even pass the WCAG AA test and that's terrible... I already discussed with Tristan about this accessibility issue and we did some color tests to see the look and feel of the back office.

In fact, we did a color test with the #442cc7 but it's too dark. Also, the Google tools for picking colors defined it as 700 which is pretty gloomy.

See the screenshot:

We didn't test the #6039d6 (500) as default because it passes the WCAG AAA but not the WCAG AA ❎

See the screenshot from this website:

Se we tried #5434d0 (600) as default because it passes the WCAG AAA and the WCAG AA ✅

See the screenshot from this website:

You can see the color test on the Figma file.

Let me know what you think ✌️

from prestashop-ui-kit.

Hi there, I'm Guillaume, product designer of PS Metrics, is that could help, you can see in this file our interface with buttons as purple color @prestascott we have a purple a little darker than your proposal, tell me what you think about this one : 34219E (who is the same as the logo of Prestashop), thanks!

from prestashop-ui-kit.

Hey @gsauvanon-presta 👋🏻

Thanks for your response. The purple color used #34219e passes WCAG AA and AAA but it's really way too dark in my opinion. Plus, the Google tools considers it as 900-level.

I need to use a 600-level maximum in order to use higher levels for events such as Hover and Pressed. If the primary color is too dark, it will be difficult to differentiate Hover status than Default status 😅

from prestashop-ui-kit.