Use accessible colors

bserem → changed the visibility of the branch 3521710-use-accessible-colors to hidden.

bserem → changed the visibility of the branch 3521710-use-accessible-colors to hidden.

bserem → changed the visibility of the branch 3521710-use-accessible-colors to active.

@gkffzs adding another environment type ('lo', 'dd') should be a different task and not part of this one.

Here I am only trying to make sure that the current codebase is a11y-compliant

Thanks for your suggestions.
There is another issue to consider. The background behind the indicator text was lightened, which could affect a11y too. Instead, I darkened the background.
I've also added a new environment 'de' for dev or development. Local or ddev would be the default fallback.
Feel free to review 3.0.x-dev

@bserem Sorry for my misunderstanding, I thought the extra environment type would be included in the proposed resolution of this issue.

@ki Thank you for your work, I just reviewed the color palette and it passes the contrast checks for WCAG AAA (used WebAim Contrast Checker again).

However, it seems that it requires some change to ensure that colors are distinct for users with deuteranopia (for this check I used Adobe Color's accessibility tool).

Perhaps #AD1818 could be used for production, it has a 7.19:1 contrast ratio and gives no color blind conflicts with the rest of your palette?

@ki I'm glad you like the initiative! It means a lot.

Regarding the new colors committed it looks like the environment are indistinguishable for people with Protanopia and/or Deuteranopia (and Tritanopia for that fact!).

This is how things look with the current dev version:

You can see that:
Protanopia and Deuteranopia affected people can't tell the difference between Local+Dev and Stage+Live.
Tritanopia people can't tell the difference between Local+Stage.
#AD1818 suggested by @gkffzs also has the same issue.
I am testing with https://davidmathlogic.com/colorblind/#%237B1DD3-%230057AD-%23486119-%23...

The colors are originally suggested are just a bit better on this aspect:

Here is the link to the comparison tool: https://davidmathlogic.com/colorblind/#%234A0080-%23005B94-%2359590D-%23...

The colors that were used up to now had no such problem:

but they did suffer from low contrast scores against white... (comparison: https://davidmathlogic.com/colorblind/#%234A0080-%231E90FF-%23DAA520-%23...)

So, the latest commit solves the contrast issue, but adds other issues.

I'd suggest we change them, either in this or make a new one and address color-blindness there.

I've used the suggested colors as is.

Thanks @ki

Let's hope this helps people out there even more.

I can verify that it works as expected with the latest dev version!