Issue Labels color contrast

[andrewmcgivery]

Many of the labels for issues do not have enough color contrast are are causing color contrast errors.

Here's a list of of labels that need some work... I have listed the current colors and colors that would pass AAA level color contrast. We could also go for AA level if we don't want to go all out. Up to you guys. I would suggest going for AA though.

Not sure if you guys want to go for these colors or do a further assessment. Some of these colors aren't the prettiest. :)

Also, it's a fairly big list so it make take a bit of work to solve all of these.

Label	Current Color	Passing Color (AAA Standard)
"Untriaged Issue"	#6fc7fa	#437d9e
"Needs Diagnosis"	#ff8364	#b75c46
"Ready for Outreach"	#a1ebbf	#558066
"Closed"	#799299	#657a80
"firefox"	#FF4E00	#a42f00
"ie"	#00B9EC	#00617d
"mobile"	#009800	#006800
"updated"	#ededed	#595959
"worksforme"	#d4c5f9	#5c556e
"fixed"	#009800	#006800
"ucweb"	#f7c6c7	#6a5354
"iceweasel"	#0052cc	#0050c8
"ios"	#0bd318	#026806
"sitewait"	#006b75	#00636c
"contactready"	#A1EBBF	#3f604d
"android"	#28ACBB	#13626b
"safari"	#1B9BF6	#0c5c95
"chrome"	#F16A5A	#943e34
"needsinfo"	#fbca04	#6d5601
"invalid"	#e6e6e6	#595959
"duplicate"	#cccccc	#595959

NOTE: "updated" label color also affects labels ie11, chromium, internet, nightly, and mozilla.

[miketaylr]

Let's tackle this and #436 at the same time.

[calexity]

I think the most important ones to changes are the states of the bugs (new, needs diagnosis, etc). I don't think the labels need colors, so we can explore an option with no color differences or we can leave them as a decoration. We're getting color crazy anyway on this page:)

How about adding icons to the main labels like @karlcow suggested? Karl, I couldn't find all the ones you thought of, but here are some alts:

New - http://fortawesome.github.io/Font-Awesome/icon/random/
Needs diagnosis - http://fortawesome.github.io/Font-Awesome/icon/stethoscope/
Needs contact - http://fortawesome.github.io/Font-Awesome/icon/user/
Needs outreach (ready for outreach) - http://fortawesome.github.io/Font-Awesome/icon/paper-plane/ or http://fortawesome.github.io/Font-Awesome/icon/comments-o/
Waiting (site contacted) - http://fortawesome.github.io/Font-Awesome/icon/clock-o/
Closed - http://fortawesome.github.io/Font-Awesome/icon/check-square-o/

@andrewmcgivery check out the comments here and let me know what you think - #484 (comment)

[andrewmcgivery]

From the other issue:

That all looks great. Awesome solutions there. I'd love to see this done in staging!

[miketaylr]

Yeah, I like the icons as well.

I'm fine with ditching label colors @calexity -- maybe we just have a gray/whatever underline to indicate it's a clickable filter?

[calexity]

Yes! Our medium gray should be perfect.

On Fri, Jan 2, 2015, 11:13 AM Mike Taylor [email protected] wrote:

Yeah, I like the icons as well.

I'm fine with ditching label colors @calexity
https://github.com/calexity -- maybe we just have a gray/whatever
underline to indicate it's a clickable filter?

—
Reply to this email directly or view it on GitHub
#482 (comment)
.

[calexity]

@karlcow thank you for pulling this one up!

It looks like we addressed the colors and we just haven't put them in the CSS. I would do that myself, but this app is far from the days when I could run it:)

• New - (soft red) #ff8364 with black #000 text
• Needs diagnosis - (gold) #efce82 with black #000 text
• Needs contact - (light green) #b9edce with black #000 text
• Needs outreach - (teal blue) #7abce1 with black #000 text
• Waiting - (light blue) #b0daf0 with black #000 text
• Closed - (gray) #c5d1d5 with black #000 text

See this comment for more: #484 (comment)

Is there something else I'm leaving unfinished here @karlcow?

[magsout]

@calexity

labels are already using these colors

:root {
  --wc-state-new: #ff8364; 
  --wc-state-need: #efce82; 
  --wc-state-needcontact: #b9edce; 
  --wc-state-ready: #7abce1; 
  --wc-state-sitewait: #b0daf0; 
  --wc-state-close: #c5d1d5; 
}

or maybe I missed someting ?

[magsout]

@andrewmcgivery how I can test if a color pass AAA level color contrast ?

[andrewmcgivery]

I tend to use this tool:

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

That help?

[magsout]

@andrewmcgivery oh thanks, sorry I didn't see your message

[magsout]

I tried the filters with colors proposed by @andrewmcgivery

Before:

After:

Filters are more visible. But I liked the progression of color before. @adamopenweb do you think there is a way to keep the old color but with good contrast ?

[miketaylr]

I also prefer the before colors... does contrast improve if we change the text from white to black?

[andrewmcgivery]

@miketaylr Changing white text to black will probably make most of the original colors pass actually.

[miketaylr]

The current design is a little different, but when you hover or select the filter button there's still the low contrast white color. Let's change it to be bolder and maybe that'll pass.

[miketaylr]

ping @magsout