search

primer / view_components

ViewComponents for the Primer Design System
https://primer.style/components/
MIT License
475 stars 117 forks source link

Color-vision impairment, icon clarity #145

Closed mcint closed 3 years ago

mcint commented 3 years ago

Issue

User report of issues distinguishing between PR states: open and closed; because of color indistinguishability, and non-distinct symbol shapes for open vs closed.

Comments on a thread.

I'm red-green colorblind but the only way it noticeably affects my life these days is with the icons on Github's notifications page. A merged PR an an open PR have different shapes and the merged PR is blue and the open PR is green --- very easy to distinguish. But an open PR and a closed PR have identical shapes and are only distinguished by the open PR being green and the closed PR being red. Or so I'm told anyway, because I cannot for the life of me distinguish between the two. I end up needing to just open the link to the PR to check its status.

The closed PR icon has a tiny little tickmark in the icon I believe. I had never realized they had different colors btw, and always wondered why GitHub wouldn't give them different colors. Thanks for clarifying that they actually did, just badly. Tip for anyone using red and green for statuses: do like traffic lights: make the green a whiteish, blueish green and make the red tend a bit towards orange. And for the love of god use wildly different icon shapes!

Diagnosis / Checks

Color blindness web viewer, during development. Like Toptal or WebAIM.

Automated tests for color distinguishability? If it's worth the effort.

Checklist item in design system to ensure broad ease of use concerns. (e.g. here, symbol & color differences for icon-represented states.)

Note, I mistakenly issued this issue elsewhere first, because I didn't know where to issue it, nor where to find out where to issue it. Is this the right place?

manuelpuyol commented 3 years ago

Hi @mcint I think this could be more related to https://github.com/primer/css or https://github.com/primer/octicons :)