feat: change breakpoint to switch black SVG img to white

[yohanboniface]

I've been a report about changed pictograms, which pointed to this map:

I found that with those grey, the picto should have been white, so I had a look and increased a bit the threshold.

Before:

After:

[Aurelie-Jallut]

We're good !
"A minimum contrast ratio of 3:1 between interface components or graphic elements carrying information and their background."
=> White / Grey (background) => contrast = 3.94
=> White / DimGrey (background) => contrat = 5.48

[yohanboniface]

I tried to be more accurate in the choice, so I scripted a map with (named) colors close to the threshold (in parentesis the weight computed by umap, which is just a sum of RGB values).

Before this PR:

With threshold = 150

With threshold = 140

With my human eyes, I feel like 140 is the best choice, but I'd like your review again on this @davidbgk @Aurelie-Jallut :)

[davidbgk]

We need to check contrast on the green markers at the bottom but it's easier from a live version, let's do that together :)

[Aurelie-Jallut]

The number in brackets gives an indication of the weight of the color?
I don't quite understand the logic but I'm interested : )

I have the impression that there are colors above 140 that could accommodate a white picto like for example: Mediumpurple(159.33).
The color darkorange (131,67) on the other hand is at 1.37 in contrast with the white picto.

[manuhabitela]

👋

As Aurélie said the important thing is to have a 3:1 contrast ratio between icon and background. Usually green shades are kinda hard to match with white.

Here is a totally overwhelming grid that checks contrast of a bunch of colors of the final screenshot (note I didn't check all of them, focused on the ones with white text).

Don't worry you just have to look at the two first lines of the grid (or first two columns, as you wish). All the shown cells, which are the ones marked "DNP", do not have sufficient contrast with either black or white foreground.

Few ideas to be sure to generate OK colors:

• use the WCAG contrast ratio formula, like the one used in color to check the background color with both black and white foreground, and chose the one that has the better contrast ratio?
• do as what Tanaguru does and have a script return the "closest" accessible color to what you want

[yohanboniface]

Mieux comme ça ? :)
Basé sur un algo de WGAG si j'ai bien tout lu Freud!