distinguishable matplotlib colours / symbols / line styles

[Chris Angelico]

On Tue, Dec 17, 2019 at 8:09 AM DL Neil via Python-list
<python-list at python.org> wrote:
>
> On 17/12/19 5:19 am, Chris Angelico wrote:
> > On Tue, Dec 17, 2019 at 3:16 AM duncan smith <duncan at invalid.invalid> wrote:
> >>
> >> Hello,
> >>        Not really specific to Python or matplotlib (but that's what I'm
> >> using). I'm looking for a good combination of colours and symbols for
> >> scatter plots, and combination of colours and line styles for line
> >> plots. Too often I find myself producing these when I don't know whether
> >> they will end up being printed in colour or greyscale. It would be a lot
> >> easier if I could produce decent plots that would work well in either
> >> case. I can find various stuff on colour palettes, but pretty much
> >> nothing on symbols or line styles. Is anybody aware of an approach that
> >> works well? I'm aware of issues with colour blindness and RGB versus
> >> CMYK. Ideally I'd have something that I could just use that would deal
> >> with all these issues. TIA.
> >>
> >
> > I'd recommend looking at the Web Content Accessibility Guidelines
> > published by the W3C; there are a number of tools out there that are
> > designed to help you pick colours for a web page, and the same sorts
> > of rules will apply here, I think.
> >
> > Also, thank you for even *thinking* about this. A lot of people don't. :)
>
> +1
>
> We spend a lot of time teaching this topic (non-Python courses). It
> receives a lot of often highly-polarised comments/discussion. Many folk
> have their 'eyes opened' to an issue which has not affected them
> personally. Some even have to be informed that it is a legal obligation
> in their jurisdiction. However, it also receives the highest number of
> 'why do I have to learn this stuff' complaints...

So true. Although sometimes it pays to just make it an arbitrary
requirement - for instance, if your students submit code for grading,
you could incorporate into your rubric "must have zero errors in aXe
report" (along with "must have zero errors in W3C Validator"). Yes,
that's technically not the point... but it's remarkably helpful in
dealing with those unreadable web sites that, unfortunately, can be
seen in a lot of production environments...

> Those key-words: "accessibility guidelines" will yield a swag of useful
> tools - ignore the ones which are basically 'help choose the color of my
> web page/color palette, because they are often aiming (only) for
> 'pretty'. The best tools enumerate the efficacy of fg/bg
> color-combinations, allowing one to experiment; and will enumerate
> grey-scale variation/comparisons.

Agreed; "accessibility" or "a11y" (and yes, I will pronounce that
"ally", judge me all you like) is the thing to look for. Looking for
"readability" can be a bit hit or miss, but "a11y" does well.

> Hmmm, note to self (you've inspired me to specifically review/critique
> the printing-from-screen action): what happens when we take a
> color-checked screen display and print same but end-up viewing it as
> monochrome/grey-scale output? Probably not a main-stream demand, but
> worth tossing at the WCAG experts...

It's funny how the same considerations come up in different contexts.
Advice from a Twitch emote artist: Always desaturate your image to
greyscale and see how it looks. If your icon still looks like the
thing it's meant to be, great! But if it all blurs away to nothing
when it's greyscaled, chances are it won't be readable even in its
original colour form. This is especially true if you have more than
two colours involved - say, you have a shaped background and text that
goes partly on it and partly off it, so the text needs to be readable
on both the backgrounds.

I'm sure the experts have already looked into that exact concept, and
probably have a much more rigorous way to define the problem and the
solution. But "flip the saturation to zero in your image editor" is a
pretty close approximation. You can do the same thing with a web page
with a bit of CSS:

body {filter: saturate(0);}

Check your page like that and see if it's still readable. A good page
will just look nightvisioned, a bad one will suddenly be unreadable.

(For the fun of it, I just tried that on a few web sites. After doing
that for a while, your brain gets used to it, and then colour starts
to look weird...)

ChrisA