21

The difference between page background color and progress on golden badges is so miniscule that I find it hard to see it at all. I see progress on bronze and silver badges just fine, but the contrast of gold badges is so small that I need to check numbers to know where to look.

Progress badge colors

My sight is far from perfect and I'm protanomalous colorblind, but I don't think this affects the contrast enough. Let's do the math.

Bg color   R   G   B   H    S    L
page     255 255 255   0   0% 100%
bronze   209 166 132  26  46%  67%
silver   180 184 188 210   6%  72%
gold     255 250 230  48 100%  95%

The lightness value of bronze and silver badge progress backgrounds is around 70%, while lightness of gold is 95%, which is displayed on pure white background with 100% lightness. This is probably a mistake as numbers are clearly inconsistent.

This applies to all websites, both to badges displayed directly in profiles and to the popup for choosing a badge to track.

P.S. Even if protanomaly affects the contrast, it's one of the weakest types of color blindness, so people with other types of color blindness will be affected even more. Also slight differences in contrast are very dependent on monitor settings. Almost nobody has perfectly calibrated monitors.

[Edit] While this question turned out to be a dupe, it's higher quality than the first one, has more info and more upvoted already, so I'd rather close the other way.

[Edit 2] Considering this question is in and the other one is , I find it counter-productive to close this question instead of the other one (who was first doesn't matter).

|improve this question
  • 2
    If it's a small comfort it's just as bad for people with perfect vision. It is beneficial to use NCS to specific colors based on perception (rather than RGB, which is percentage of primary colors). This NCS Color Chart Website could assist you to pick two colors which are easier for you to view; though color blindness affects people differently, and thus isn't protected in the USA. – Rob Nov 3 '19 at 17:16
  • They could use SVG Patterns such as Honeycomb or checkerboard which would use different shades instead of only light yellow for the background; equally enhancing contrast for everyone, regardless of sightedness. – Rob Nov 3 '19 at 17:52
  • 2
    I just really fail to see a problem in this or the other question. I'm about to turn 60, but I can clearly see progress on the gold badges, both here and in my user. I did see that the other question said something about different browsers, but I tried several browsers, and I have no problem seeing the gold progress bar. It may be that people with trouble seeing it really just need to adjust their monitors. – Ron Maupin Nov 4 '19 at 2:26
  • Another possible reason here could be a incorrectly calibrated display. If your contrast or gamma is set too low, it may look less clear than it should. – Cerbrus Nov 6 '19 at 9:01
  • 1
    This looks like a monitor issue indeed. I barely see the difference on either of my desktop monitors (and it's close to nonexistent on one), but it's more clear on my mobile phone of all things. Anyway, expecting everyone to have a perfectly calibrated monitor isn't reasonable. Futhermore, color blindness charts from Wikipedia suggest that faint yellow can be a problem. – Athari - Make SE Awesome Again Nov 6 '19 at 12:08
2

ankii has a great idea by making the progress more clear.

However, it would clash with the current horizontal lay-out. How about rotating it around a bit instead?

Like this

By increasing the vertical space per tracker only a bit, a slider of sorts can be added to the existing bars:

Very, very rough sketch

|improve this answer
  • We could even make it completely optional, to put there only for people indicating with a checkbox in their profile they want a colour-blind-friendly version of the site. This change could be the start of a lot more of such functions. – Mast Nov 6 '19 at 8:56
0

A vertical bar that stands out can be used at the end of the progress. So the finish of the progress so far would stand out from the rest of the two colors, yellow and white.

image

In the second example, there is a circle. In the fifth one, there is a unique oval. We can have a vertical line.

|improve this answer
  • 1
    You could even tilt those bars 90 degrees to keep them in the format we already have. – Mast Nov 6 '19 at 7:56
  • It is not a photo I own.. Let me check if html can do it.. – ankii Nov 6 '19 at 8:30
  • A bit of cropping/rotating in paint would do, wouldn't it? – Mast Nov 6 '19 at 8:35
  • I can do that, but the photo comes from here support.visme.co/wp-content/uploads/2016/11/… Have you seen the markdown ? – ankii Nov 6 '19 at 8:37
  • How about this? – Mast Nov 6 '19 at 8:39
  • I am neutral towards this.. Propose an edit if you wish :) – ankii Nov 6 '19 at 8:41
  • I'll write a small answer referring to your answer, let the devs figure out which they prefer. – Mast Nov 6 '19 at 8:47
  • I just wanted to show what the end of the bar will look like, whether horizontal or vertical. I didn't say that it should be vertical. – ankii Nov 6 '19 at 10:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .