578994 - Use colorblind-safe colors for red, orange and green

Status: RESOLVED FIXED

(Tree Management Graveyard :: TBPL, defect)

Description

[Mark Finkle (:mfinkle) (use needinfo?)]

I find it almost impossible to see the difference in the colors used to denote pass (green), test-fail (orange) and build-fail (red)

Suggestions:
Green: 339900 (grass green)
http://www.toledo-bend.com/colorblind/GreenChart.asp

Orange: FF6600 (orange)
http://www.toledo-bend.com/colorblind/OrangeChart.asp

Red: 990000 (brick red)
http://www.toledo-bend.com/colorblind/RedChart.asp

Comment 1

[Justin Lebar (not reading bugmail)]

Mark, do you think it would be worth also using typography to differentiate the greens, oranges, and reds?  I could imagine greens as regular text, oranges as bold, and reds as bold italic.

Comment 2

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #1)
> Mark, do you think it would be worth also using typography to differentiate the
> greens, oranges, and reds?  I could imagine greens as regular text, oranges as
> bold, and reds as bold italic.

That might help too, but I didn't want to change any typography (or layout) in this bug

Comment 3

[Justin Lebar (not reading bugmail)]

Brick red (#990000) looks brown, almost black to me (I have full-color sight).  Does #FF0000 have enough contrast?

Comment 4

[Justin Lebar (not reading bugmail)]

Attachment: Patch v1

mfinkle, what do you think of these colors?  You can see them in context at

  http://people.mozilla.org/~jlebar/tinderboxpushlog/

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to comment #4)
> Created attachment 461699 [details] [diff] [review]
> Patch v1
> 
> mfinkle, what do you think of these colors?

Looks much better to me. The green vs. orange is much easier to see. I still have trouble with the red but it's improved.

I'm fine with these colors, thanks

Comment 6

[Markus Stange [:mstange]]

Comment on attachment 461699 [details] [diff] [review]
Patch v1

>diff --git a/css/style.css b/css/style.css

>-#status a.testfailed {
>-  background-color: #F90 !important;
>-}
>-#status a.busted {
>-  background-color: #D00 !important;
>-}

Don't just remove this, it's used for the "N Jobs are failing:" squares in the top right corner.
Thanks for fixing this! I'll deploy it when you've pushed.

Comment 7

[Justin Lebar (not reading bugmail)]

(In reply to comment #6)
> Don't just remove this, it's used for the "N Jobs are failing:" squares in the
> top right corner.

Oh, oops.  I thought I could get rid of them because the boxes have the .machintest.{testfailed,busted} class.  But that only gives them a color, not a background-color.  I'll update their colors to match the other boxes.

I need to update the color of starredbox.png to match the new green, and then I'll push.

Comment 8

[Justin Lebar (not reading bugmail)]

http://hg.mozilla.org/users/mstange_themasta.com/tinderboxpushlog/rev/dedfbb521fe2