Consider making status colors more color-blind friendly

[mildlygeeky]

Description

I have some color blindness (minor red-green color-blindness) and have always found the difference between the shades of green (for enabled), and orange (for pending) really difficult to differentiate (typically when I am trying to tell which CMS users have activated / vs. not activated yet).

A less muted shade of orange, or possible a pattern (so that color isn't the only differentiation) would be a big help for me and anyone else who right now might have trouble seeing this information at a glance. Some good information is available here: https://usabilla.com/blog/how-to-design-for-color-blindness/

[XhmikosR]

Try also https://contrast-ratio.com/ and aim for WCAG2AA.

[mildlygeeky]

I think the backend of Craft is mostly good when it comes to text / background contrast - this is more about being able to discern between two important colors that convey informatoon at a glance. On Sep 12, 2018 at 7:42 PM, XhmikosR <[email protected]> wrote: Try also https://contrast-ratio.com/ and aim for WCAG2AA. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3293 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQrcoWFQrcp3VDkVtnwKuOdkIXr0lXBks5uaZv0gaJpZM4WkSZK> .

[benface]

Wow, I've just been bitten by this. I have red-green color blindness too (maybe not as minor as yours), and I never saw the difference between the two colors. Please consider making the green closer to #70c292.

[ryanmasuga]

This came up for us today when one of us selected some test related entries and couldn't figure out why they weren't showing up on the template, only to realize they had selected all closed entries because they couldn't tell the difference.

Maybe consider some other visual indicators rather than color alone?

[MattWilcox]

Basic accessiblity guidelines: do not use colour alone to signify differences. It doesn't matter what colours you're using, someone somewhere won't be able to differentiate them. Use symbols or words in addition to colour. Think of "colour coding" as an enhancement for fully sighted users to enable faster scanning - but they are not universally understood nor visible.

[benjaminkohl]

This is one I've been hoping for for a long time. The red and the green look exactly the same to me. Even the pending color confuses me sometimes. That's why I usually like color-coding combined with unique shapes. Maybe green circle, orange triangle and red square (just an example).

[brandonkelly]

@benjaminkohl exactly what I was planning to do :)

[brandonkelly]

Just added a new “Use shapes to represent statuses” account preference, for Craft 3.5:

When enabled, red squares will be used to represent suspended/expired statuses, and orange triangles will be used to represent pending statuses.

[benface]

Beautiful! Thanks so much @brandonkelly.

[mildlygeeky]

Really nicely done @brandonkelly — so excited to see this!

[bossanova808]

This is such an improvement it feels like it should be the default, or a config setting that makes it so at least....