Use colorblind-safe colors for red, orange and green

RESOLVED FIXED

Status

Tree Management Graveyard
TBPL
RESOLVED FIXED
8 years ago
3 years ago

People

(Reporter: mfinkle, Assigned: Justin Lebar (not reading bugmail))

Tracking

Details

Attachments

(1 attachment)

3.39 KB, patch
mstange
: review+
Justin Lebar (not reading bugmail)
: feedback+
Details | Diff | Splinter Review
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
(Assignee)

Comment 1

8 years ago
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.
(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
(Assignee)

Comment 3

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

Updated

8 years ago
OS: Mac OS X → All
Hardware: x86 → All
(Assignee)

Comment 4

8 years ago
Created attachment 461699 [details] [diff] [review]
Patch v1

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

  http://people.mozilla.org/~jlebar/tinderboxpushlog/
Attachment #461699 - Flags: feedback?(mark.finkle)
(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
(Assignee)

Updated

8 years ago
Attachment #461699 - Flags: review?(mstange)
Attachment #461699 - Flags: feedback?(mark.finkle)
Attachment #461699 - Flags: feedback+
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.
Attachment #461699 - Flags: review?(mstange) → review+
(Assignee)

Comment 7

8 years ago
(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.
(Assignee)

Comment 8

8 years ago
http://hg.mozilla.org/users/mstange_themasta.com/tinderboxpushlog/rev/dedfbb521fe2
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED

Updated

7 years ago
Assignee: nobody → justin.lebar+bug
Product: Webtools → Tree Management
Product: Tree Management → Tree Management Graveyard
You need to log in before you can comment on or make changes to this bug.