Buttons: white text on cyan background fails the simplest contrast test (WCAG:AA)

[tdupre]

Readability and accessibility

Readability and accessibility are paramount these days and companies get fined for not complying with accessibility basic rules (in the US and soon in Europe)

Acccessibility issue

The buttons used in PrestaShop UI kit fail the simplest contrast test (WCAG:AA) Foreground:#FFFFFF background:#2eb9d7

https://color.a11y.com/ContrastPair/?bgcolor=2eb9d7&fgcolor=ffffff

Fix proposition

One way to fix this would be to use the purple that's available in PrestaShop's colors #442CC7 ensuring a good contrast between the text and the background

https://color.a11y.com/ContrastPair/?bgcolor=442CC7&fgcolor=ffffff

[ldeprestashop]

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

[matks]

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.

[ldeprestashop]

OK thanks :)

I will meet Thibaut this afternoon to discuss about that.

[prestascott]

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 ✌️

[gsauvanon-presta]

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!

[prestascott]

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 😅

[gsauvanon-presta]

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 :)