Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colorblind safe alert colors #811

Closed
mapsam opened this issue Oct 8, 2015 · 7 comments

Comments

@mapsam
Copy link

commented Oct 8, 2015

Hello! Thank you for all of your hard work on this. 馃憦

Description

I was perusing the alert components and noticed the color scheme, although quite elegant, is not terribly colorblind friendly. Personally I am unable to tell the difference between success and warning, which could complicate things. Since they are next to each other in the style guide, I can discern a slight difference, but if they were alone I would have no idea what color it was. The icons are helpful (yay!), but if color is the primary sense of understanding it seems important to make sure they work for everyone!

As a deuteranope (red green colorblind) I can quite easily distinguish between the alert red and the success, but I'm unable to tell if success is green or yellow.

Ask

I'd love to see a more prominent green, as they both look slightly yellow - and don't send a sense of accomplishment.

Below is a current photo and a suggested photo with an updated green, as well as some color pairings with some thoughts.

Current

screen shot 2015-10-08 at 2 06 05 pm

Suggested update with green hex #c0efc5 (note: I didn't spend a TON of time finding this green, wouldn't recommend taking it as-is 馃槈)

screen shot 2015-10-08 at 2 19 14 pm

Some pairings with Notes from a Deuteranope - (note: these are my un-scientific opinions, cannot back them up with anything but my own thoughts)

screen shot 2015-10-08 at 2 37 40 pm

Thanks!

@MsWebGirl

This comment has been minimized.

Copy link

commented Oct 13, 2015

++!

@mollieru

This comment has been minimized.

Copy link
Contributor

commented Oct 13, 2015

Thanks! We'll take a look at this and come up w a solution that is more visually accessible.

@angel can you take a look here? Happy to help you out!

@msecret

This comment has been minimized.

Copy link
Contributor

commented Jul 19, 2017

@rtwell as new visual designer, do you have any thoughts here?

@rtwell

This comment has been minimized.

Copy link

commented Jul 20, 2017

These alerts are compliant: we use more than color alone to convey information about the alert. In theory users will not see those alerts side by side, so discerning between them is, from a practical standpoint, irrelevant. That said, there are folks that DO see them side by side, and it would be great if we could accommodate them!

I would recommend:

  1. Refine the design of our alerts to include a darker slab of color on the far left, whilst preserving the light tones for legibility, perhaps something like this:
    image

  2. Update our color palette with tones of color that are more easily distinguished by everyone

@maya

This comment has been minimized.

Copy link
Member

commented Oct 12, 2017

@mapsam can you let us know if the new alert design works better for you (darker color border on the left)? Like @rtwell mentioned, we convey the state in other ways with an icon and text so it should be discernible even w/o color.

@mapsam

This comment has been minimized.

Copy link
Author

commented Oct 12, 2017

Hey, these look really great! 馃憤 from this Deuteranope.

@maya

This comment has been minimized.

Copy link
Member

commented Oct 12, 2017

Wonderful, glad these are working for you! 馃帀

@maya maya closed this Oct 12, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.