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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build success and failure indicators don't contrast enough (accessibility issue) #754

Closed
jakepetroules opened this Issue Nov 10, 2012 · 25 comments

Comments

Projects
None yet
@jakepetroules
Copy link

jakepetroules commented Nov 10, 2012

The green and red success and failure indicators on the new Travis design don't contrast well enough from each other. This presents an accessibility issue for persons with red-green color blindness.

Might I suggest that the red be made brighter so that they are easier to tell apart?

@sarahhodne

This comment has been minimized.

Copy link
Contributor

sarahhodne commented Nov 11, 2012

Not the best contrast still, but I think this is at least better?

This is #FF3E3E for the red and #2E7623 for green.

@jakepetroules

This comment has been minimized.

Copy link
Author

jakepetroules commented Nov 11, 2012

That is significantly better, yes.

@svenfuchs

This comment has been minimized.

Copy link
Member

svenfuchs commented Nov 11, 2012

hmmm, this suggests it's not really a solution though: http://colorfilter.wickline.org

how about having a separate set of styles that make a bigger difference?

@sarahhodne

This comment has been minimized.

Copy link
Contributor

sarahhodne commented Nov 11, 2012

We can have a "color blind mode" button or user setting that switches to blue and red/green. Red/green becomes sort of tan-ish, so that should be high when if comes to contrast.

@joshk

This comment has been minimized.

Copy link
Member

joshk commented Nov 11, 2012

This idea sounds pretty good, a nicer name would be good but the concept is great

On 10/11/2012, at 7:18 PM, Henrik Hodne notifications@github.com wrote:

We can have a "color blind mode" button or user setting that switches to blue and red/green. Red/green becomes sort of tan-ish, so that should be high when if comes to contrast.


Reply to this email directly or view it on GitHub.

@sarahhodne

This comment has been minimized.

Copy link
Contributor

sarahhodne commented Nov 11, 2012

High contrast mode? I feel like we need to do something slightly different then.

@rkh

This comment has been minimized.

Copy link
Member

rkh commented Nov 11, 2012

Jenkins mode?

Sent from my iPhone

On 2012-11-11, at 4:53 AM, Henrik Hodne notifications@github.com wrote:

High contrast mode? I feel like we need to do something slightly different then.


Reply to this email directly or view it on GitHub.

@joshk

This comment has been minimized.

Copy link
Member

joshk commented Nov 11, 2012

checkbox for 'Accessibility Improvements'

On 10/11/2012, at 10:31 PM, Konstantin Haase notifications@github.com wrote:

Jenkins mode?

Sent from my iPhone

On 2012-11-11, at 4:53 AM, Henrik Hodne notifications@github.com wrote:

High contrast mode? I feel like we need to do something slightly different then.


Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHub.

@sarahhodne

This comment has been minimized.

Copy link
Contributor

sarahhodne commented Nov 11, 2012

checkbox for 'Accessibility Improvements'

I like that, but I still feel like that should probably include other things, like maybe a larger font.

Maybe we can have a set of "Accessibility Improvements" settings, and "alternative colors" is one of them?

@svenfuchs

This comment has been minimized.

Copy link
Member

svenfuchs commented Nov 11, 2012

don't overcomplicate it :) "alternative colors" is just fine. store that setting to localStorage, load an extra stylesheet.

we might get more requests once we've added this and can then interate

@joshk

This comment has been minimized.

Copy link
Member

joshk commented Nov 11, 2012

https://twitter.com/nex3/status/267079477329285120

These changes seem related to accessibility, so why not call them accessibility related?

Anyhow, I'm all for starting small and iterating.

On 11/11/2012, at 1:16 AM, Henrik Hodne notifications@github.com wrote:

checkbox for 'Accessibility Improvements'
I like that, but I still feel like that should probably include other things, like maybe a larger font.

Maybe we can have a set of "Accessibility Improvements" settings, and "alternative colors" is one of them?


Reply to this email directly or view it on GitHub.

@coffeejunk

This comment has been minimized.

Copy link

coffeejunk commented Nov 15, 2012

the color changes proposed by @henrikhodne are much, much better (at least for me as a R/G color-blind). however this would just fix the issue for R/G color-blind, but not other issues like monochromacy (though rare, it does happen: wikipedia).

a possible solution for this could be to use different shaped (and also colored) icons, like the omnipresent utf-8 check mark (✓), ballot x (✘) and "black right pointing pointer" ►.

@jakepetroules

This comment has been minimized.

Copy link
Author

jakepetroules commented Nov 15, 2012

@coffeejunk Excellent idea with the different shapes as well as icons, that would be perfect!

@jakepetroules

This comment has been minimized.

Copy link
Author

jakepetroules commented Nov 15, 2012

Perhaps a check for successful, x for failing, and keep the dot for "in progress"?

@kmcphillips

This comment has been minimized.

Copy link

kmcphillips commented Nov 20, 2012

High contrast, hover descriptions, icons, anything is fine.
Travis is such a useful tool except that I have no idea if my builds passed or failed without clicking around a whole bunch.

@MarkNijhof

This comment has been minimized.

Copy link

MarkNijhof commented Nov 28, 2012

I was going to suggest exactly what Jake suggested! Make the icons vissually different regardles of color. Then you can keep the colors for those who are not colorblind

@joshk

This comment has been minimized.

Copy link
Member

joshk commented Nov 28, 2012

Hey Guys,

We are looking into adding descriptive icons to help with the colour blind build state issues.

Right now we are hunting for a icon designer who can help us.

We will let you all know more when we know more :)

Josh

On 29/11/2012, at 3:24 AM, Mark Nijhof notifications@github.com wrote:

I was going to suggest exactly what Jake suggested! Make the icons vissually different regardles of color. Then you can keep the colors for those who are not colorblind


Reply to this email directly or view it on GitHub.

@svenfuchs

This comment has been minimized.

Copy link
Member

svenfuchs commented Dec 7, 2012

I am going to merge a change that adds status icons to the current plain circles, which should hopefully help with this issue, too.

I'd appreciate any feedback on this.

I am also looking for a designer person who can help me with some (fairly simple) icon font changes in order to optimize this a little.

@coffeejunk

This comment has been minimized.

Copy link

coffeejunk commented Dec 7, 2012

Awesome, Thank you. This is so much better!

On 07.12.2012, at 18:41, Sven Fuchs notifications@github.com wrote:

I am going to merge a change that adds status icons to the current plain
circles, which should hopefully help with this issue, too.

https://a248.e.akamai.net/camo.github.com/b8f94872a84b68bb0c0ead95c2c2ceec62e5dc82/687474703a2f2f7333697463682e7376656e66756368732e636f6d2f7374617475735f636f6c6f72732d32303132313230372d3138333534302e6a7067

I'd appreciate any feedback on this.

I am also looking for a designer person who can help me with some (fairly
simple) icon font changes in order to optimize this a little.


Reply to this email directly or view it on
GitHubhttps://github.com//issues/754#issuecomment-11139094.

@kmcphillips

This comment has been minimized.

Copy link

kmcphillips commented Dec 7, 2012

Oh this is wonderful. This makes a world of difference.

Thank you!

@jakepetroules

This comment has been minimized.

Copy link
Author

jakepetroules commented Dec 7, 2012

Looks pretty good so far but perhaps the icons could be made larger? And I still think the red should be brighter.

@magnars

This comment has been minimized.

Copy link

magnars commented Dec 12, 2012

This made Travis five times better for me. I can finally tell the difference between build success and failures without clicking into the build.

Thanks a lot!

@sarahhodne sarahhodne closed this Dec 12, 2012

@brandur

This comment has been minimized.

Copy link

brandur commented Dec 12, 2012

Just came over to open an issue about this. Thanks for the fix, it makes a huge difference! Please consider porting it to travis-ci.com!

@roidrage

This comment has been minimized.

Copy link
Contributor

roidrage commented Dec 12, 2012

@brandur we're working on getting that shipped to Travis for private repositories!

@coffeejunk

This comment has been minimized.

Copy link

coffeejunk commented Dec 21, 2012

I just wanted to say thanks again for addressing this. This little fix makes Travis so much more awesome for me. ❤️ ❤️ ❤️

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