4

Whenever I get new reputation events, badges, or comments I end up scrolling too far because the highlight is too light. See for example in this image:

The regular background is white (#FFFFFF) and the highlight is very light blue (#F0FBFF). At some angles, they are the same color.

I also have this problem on the app (iOS).

I don't know if the color can be changed enough to make a difference without messing with the site icons, but it should be possible to add a colored left border if that is the case. For example, my email on my phone puts a blue dot next to unread emails so it looks something like this:

• Unread email
   Read email

  • 1
    It looks very different to me. Maybe your display doesn't have good contrast? – Sonic the Reinstate Monica-hog May 16 at 3:23
  • 1
    "Good contrast" is not an absolute measure. For some kinds of vision problems, the "default good" contrast is painfully bright and needs to be dialed down. I've had to nudge my contrast up more than I'd like to be able to see some sites and some design elements; before that I wasn't able to see the blue highlighting either. Life online is already challenging for people in this situation, so if there's something SE can do to improve this that wouldn't break something else, I'm all for it. – Monica Cellio May 16 at 3:38
3

I agree in principle that something should be done to address this contrast issue, in particular for those who do have problems distinguishing the colours. However, it's not as simple as just darkening the light-blue highlight.

(If you want to skip past all of my analysis, my suggested highlight colour is at the bottom of this post.)


The WebAIM Contrast Color Checker is a tool for determining colours to use for acceptable levels of contrast between background and foreground, based on Web accessibility standards.

According to it, a contrast ratio of 4.5:1 is a minimal contrast ratio between foreground text and background text.


If we think of the regular background colour as background and the highlight colour as foreground, this produces a contrast of only 1.05:1, not enough for some people to clearly distinguish between the two.

current contrast

Unfortunately, I can't input the target contrast ratio I want with the tool, and I have to rely on a slider that isn't precise enough. However, for the point of argument, I have adjusted the contrast ratio to 4.7:1 (slightly above what the site indicates is the minimum for accessibility).

This darkens the highlight colour to #007DA3.

minimal contrast


To me, this seems excessive for a temporary highlight contrast rather than a permanent contrast of foreground font colour against background colour.

So, let's take a midway point. Using a highlight colour of #00C4FA, we get a contrast ratio of 2.04:1.

midway contrast

This seems more reasonable. But there's now another problem.


The darker highlight colour, while now distinguishable enough from the normal white background, results in there being a lack of contrast between it and the blue font itself.

Our regular blue font of #3969A4 against a white background has an acceptable contrast ratio of 5.62:1. But our blue font against a background colour of #00C4FA drops that contrast ratio to an unacceptable 2.75:1.

What does this tell me?

If we darken the light-blue highlight colour to more easily distinguish it from the normal white background, we end up causing a problem with the contrast between the font colour and the new, darker highlight colour.

In short, I think the only way to address this would is to have a highlight colour that isn't blue but something else.

If I go by objective methods, the Colour Calculator at Sessions College for Professional Design suggests that the complement of #3969A4 is #a46239.

complement

Assuming that this brown is the correct colour complement to our blue, it needs to be much lighter in order to meet the contrast ratio requirements.


Returning to the WebAIM tool, it indicates that the correct highlight colour to use for our blue font, based on the complementary brown, is #F3E4D8.

complement and contrast


As a final note, the contrast between this colour and the white may not be sufficient. It seems it's impossible to account for both the text colour and the neighbouring white in contrast to the highlight colour. The #F3E4D8 could be darkened slightly. (But it seems to me that this brown is more easily distinguishable from the white than is the existing light blue.)

  • 1
    I had anticipated something like this being the case. There is also my suggestion: add a dark border to the left side of new events. My email app does something very similar but it’s dots. (See edits to question) – Laurel May 16 at 16:24

You must log in to answer this question.

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