Making ship market comparison colors colorblind friendly

[nozmajner]

I've changed the coloring of better stats from green to a saturated blue to provide much more contrast for colorblind folks. The red-green pairing can be really hard to distinguish. This pairing should provide better contrast to all four types of color blindness.

I've added two new colors to the theme:
compare_worse - kept the orange-ish red of warning_300
compare_better - added a saturated blue of similar lightness. Could have gone brighter, but then it competed with the white.
And changed the market lines to use these new colors. These could then be used on the eqipment market later too.

(I've also just created an Accessibility tag on github)

Before:

After:

[impaktor]

In good "a camel is a horse designed by committee"-fashion: I wonder if it's possible to have two color palettes, one for colorblind, then more things could be tweaked.

I suspect many of our players are colorblind, so this is an issue that we should always consider.

[nozmajner]

I thought about that too. Would be nice to provide the option in the settings.
But I think making the default colorblind-friendly would benefit everybody anyway. And I haven't yet found any other sore point in the game (at least for my Deuteranopia (red-green). We rarely exclusively color-code information. Only the Trade info comes to mind, but that is using similarily contrasting colors already. Faction coloring might be a harder nut to crack though, but right now there isn't much gameplay there anyway.

[Web-eWorks]

@nozmajner this looks similar enough to the accent range of style colors. If possible, I'd suggest tweaking that range to include the color constant chosen for compare_better.

Do note that the styleColors list is intended for semantic color names, with the colors list mostly serving as aliases to values defined in the styleColors list. The "reasoning" behind the structure of color definitions in the file is derived from this article - I'd recommend giving it a read.

Ideally, this PR should define colors.shipmarketCompareBetter = styleColors.accent_300 (or similar lightness-value) and adjust the accent color palette to more closely match the value you're selecting. This avoids the prior state of having dozens of "scattershot" color constants with little correlation to each other.

[nozmajner]

Okay, will read, will do!

[nozmajner]

I've reverted the worse to warning_300 and changed the better to accent_300. Didn't tweak the accent color, it was already nice.
Removed the market_better and market_worse colors.

[Web-eWorks]

This is pretty good. Ran the preview image through a set of colorblind filters and it retains visual differentiation beyond just the icons, however it looks like my accent_300 and warning_300 colors are not actually a visually similar luminance despite being assigned the same luminance breakpoint. Something to work on later.

[impaktor]

For consistency, should we tweak these colors as well? (blue -> orange, green -> blue)

[impaktor]

And:

[Web-eWorks]

AFAIK, blue/green isn't as much of a problem for colorblind accessibility the way red/green is. Most colorblind people can still differentiate blue from everything-else, and contrast plays a big part there.

Additionally, introducing orange/red into those icons runs the risk of semantic leakage - blue/orange pairs are used to indicate good vs. bad choices, but export/import is a "neutral" concept.

[impaktor]

AFAIK, blue/green isn't as much of a problem for colorblind accessibility the way red/green is.

OK. objection withdrawn.