Improving color and contrast on topic progress widget


(Sam Saffron) #1

I find the contrast on and colors used for the topic progress widget to be extremely problematic.

  1. It does not mesh with the default theme - its an outlier color
  2. It has terrible contrast so its very hard to read for many

For my theme I ended switching colors to something I like many times more:

However, its not a trivial change, we need to make sure it works in all themes and uses some sort of function based on the themes colors

@awesomerobot is there anything we can do here to get a color that meshes better with good contrast?


Accessibility: Color contrast
(Jeff Atwood) #2

OK so @awesomerobot changed it to this

I agree the green was a bit much, and mapping it to “success” color made no sense. The motion of the bar as you progress in a topic is enough to make it visible without needing a special brighter color.

Also: less grey! yay.


#3

When tapping @awesomerobot and navigating to his user page. I’m not able to navigate back to this topic using the back button in my browser. I had to close the tab and find this post again.
Also: may I suggest something a bit more contrasty on the progress bar? Say white on black or white on dark blue or something like that?
Low contrast is a problem for people with color blindness (and otherwise )


(Jeff Atwood) #4

Hmm, no repro in Google chrome:

  1. Click @awesomerobot to expand user card
  2. Click his avatar on the user card
  3. Press back button

That took me back to this topic.

As for colors:

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

Gives this a pass for large text, which it is…


#5

User card does not expand for me. I navigate directly to his user page. It’s repeatable for me. http://i.imgur.com/e1fIyma.jpg
Happens on this device and my nexus 7.
It seems to work in Firefox.


(Jeff Atwood) #6

Oh you are on mobile. Yeah that’s different.