Define colors for notification states (success, alert, error)

[nicolashery]

Three states:

• alert (orange)
• error (red)
• success (green)

For each state, two ways to display:

• text only: on white or gray background (ex: "Wrong username or password" under the login button) -> 1 color (text)
• in colored box: with a light border and the text inside (ex: application error creates a notification on the top of the screen) -> 3 colors (background, text, border)

So in total would need 3*4=12 (I think that's right?) colors, but some could be the same (ex: same "dark red" for error text whether it's in a colored box or not, or white text for all colored boxes...).

@skrugman do you mind sending the HEX codes you'd like for these? Thanks!

[skrugman]

@nicolashery here! :)

[cheddar]

From

http://webaim.org/resources/contrastchecker/

ffaa70b on #ffffff fails

ffaa70b on #ffeacc fails

ff7166 on #ffffff fails

ff7166 on #ffcecc fails

7950ea on #ffffff passes (don't have to care about AAA, just AA is fine)

7950ea on #bfb7e5 fails

[skrugman]

These all have text describing what they are. Doesn't that make them pass?

On Fri, May 23, 2014 at 7:20 PM, cheddar notifications@github.com wrote:

From

http://webaim.org/resources/contrastchecker/

ffaa70b on #ffffff fails

ffaa70b on #ffeacc fails

ff7166 on #ffffff fails

ff7166 on #ffcecc fails

7950ea on #ffffff passes (don't have to care about AAA, just AA is fine)

7950ea on #bfb7e5 fails

— Reply to this email directly or view it on GitHubhttps://github.com/tidepool-org/blip/issues/85#issuecomment-44037763 .

Sara Krugman Lead Interaction Designer

Tidepool An open source, not-for-profit effort to build an open data platform and better applications that reduce the burden of Type 1 Diabetes and accelerate the commercialization of closed-loop systems.

Phone : +45 42 74 68 17 Email : sara@tidepool.org Web : Tidepool.org http://tidepool.org/

[cheddar]

I'm not sure I understand. The color contrast test is verifying that there is sufficient contrast between the colors for individuals with troubles differentiating colors to be able to see the difference.

I.e., the text is great for blind people because they have a screen reader going, but there is ostensibly some non-zero population that will not actually be able to read the text when colored in this fashion (it will blur together into just a color blob or something, I'm not sure how it actually appears to them...)

[cheddar]

Fwiw, the solution might be to have a highly contrasting set of colors and a normal set of colors. Then people who cannot see the normal colors can choose to switch to the highly contrasting palette.

[skrugman]

Ive been using this app (colorblindvis) to see how it effects different kinds of color blindness and all are legible through it...try it out.

On Fri, May 23, 2014 at 7:24 PM, cheddar notifications@github.com wrote:

I'm not sure I understand. The color contrast test is verifying that there is sufficient contrast between the colors for individuals with troubles differentiating colors to be able to see the difference.

I.e., the text is great for blind people because they have a screen reader going, but there is ostensibly some non-zero population that will not actually be able to read the text when colored in this fashion (it will blur together into just a color blob or something, I'm not sure how it actually appears to them...)

— Reply to this email directly or view it on GitHubhttps://github.com/tidepool-org/blip/issues/85#issuecomment-44038102 .

Sara Krugman Lead Interaction Designer

Tidepool An open source, not-for-profit effort to build an open data platform and better applications that reduce the burden of Type 1 Diabetes and accelerate the commercialization of closed-loop systems.

Phone : +45 42 74 68 17 Email : sara@tidepool.org Web : Tidepool.org http://tidepool.org/

[kentquirk]

For what it's worth, I have decent eyes and a calibrated monitor, but at my age I personally find the orange-on-orange to be hard to read. Given that we are presenting information relevant to someone's health to people who might well have a vision issue, wouldn't it be a good idea to do black text or at the very least brown text for maximum clarity?

[cheddar]

Not to be too pedantic, but the site that I linked to is saying whether or not the text meets the standards set out by the w3c:

http://www.w3.org/TR/WCAG20/

It's possible that colorblindvis will be a sufficient test at some point, but I'm not sure that it is currently recognized by said standard. ;)

[cheddar]

Btw, everyone that sees this should check out the following video to learn a bit more about WCAG.

https://www.youtube.com/watch?v=-IWBT4Tk3t0

[skrugman]

Oh jeez. Ohhh @cheddar

On Fri, May 23, 2014 at 8:23 PM, cheddar notifications@github.com wrote:

Btw, everyone that sees this should check out the following video to learn a bit more about WCAG.

https://www.youtube.com/watch?v=-IWBT4Tk3t0

— Reply to this email directly or view it on GitHubhttps://github.com/tidepool-org/blip/issues/85#issuecomment-44044159 .

Sara Krugman Lead Interaction Designer

Tidepool An open source, not-for-profit effort to build an open data platform and better applications that reduce the burden of Type 1 Diabetes and accelerate the commercialization of closed-loop systems.

Phone : +45 42 74 68 17 Email : sara@tidepool.org Web : Tidepool.org http://tidepool.org/

[skrugman]

Now the only one that doesn't pass the "normal text" is the orange on white. If it is "large text" it does pass.

[nicolashery]

@skrugman Thanks!

I find the notification boxes with a white or grey background not "notificationy" enough with just the border as a touch of color, what do you think? They don't really stand out on the rest of the screen, you almost think we forgot the background.

How about using a very light, almost-white, version of the color? See pics below:

With white background:

With very light background:

Using:

@gray-darker:            #727375;

@green-success:          #7950ea; // Purple
@orange-alert:           #ffa70b;
@red-error:              #ff3631;

// Notification states
// ====================================

@state-success-text:             @gray-darker;
@state-success-bg:               #f3eeff;
@state-success-border:           @green-success;

@state-alert-text:               @gray-darker;
@state-alert-bg:                 #fff8eb;
@state-alert-border:             @orange-alert;

@state-error-text:               @gray-darker;
@state-error-bg:                 #fff0f0;
@state-error-border:             @red-error;

[skrugman]

@nicolashery If you insist on useing a color background for the box's i would make the text the dark color too instead of grey - except the orange doesn't pass the color accessibility test - thats why i chose to leave the background light colors out - for cleanliness/sharpness of the color palette we are using. I vote no inside color, the box's "notification-ness" is also effected by where in the screen it pops up and what happens. p.s. I would center the text in the box instead of left align it.

[nicolashery]

No worries @skrugman, it was just a suggestion as I was playing around with this. Let's go for the white background like you initially proposed :)

[nicolashery]

Oh and the text that's not centered, that's a bug good catch. It should be. Will fix it

[nicolashery]

Done in https://github.com/tidepool-org/blip/commit/223f33698f4565a0fc3236eadba38ef893fc7ec0

[cheddar]

You didn't like the video @skrugman? ;)

[skrugman]

I loved it. And I love how smart you are @cheddar ;)

[jh-bate]

Nico - do these colours need to be pushed into clamshell also?

On Tue, Jun 3, 2014 at 6:51 AM, skrugman notifications@github.com wrote:

I loved it. And I love how smart you are @cheddar https://github.com/cheddar ;)

— Reply to this email directly or view it on GitHub https://github.com/tidepool-org/blip/issues/85#issuecomment-44876280.

[nicolashery]

Yes good point @jh-bate. I can take care of it if you'd like?

[jh-bate]

I think I verbally said yes to this - but yes Nico that would be good if you could port these changes to clamshell also.

On Tue, Jun 3, 2014 at 8:36 AM, Nicolas Hery notifications@github.com wrote:

Yes good point @jh-bate https://github.com/jh-bate. I can take care of it if you'd like?

— Reply to this email directly or view it on GitHub https://github.com/tidepool-org/blip/issues/85#issuecomment-44887695.