13

I just visited ux.stackexchange and here is what I saw. Is it possible for you to correct it?

I experienced the same on another site too, webmasters.stackexchange

  • 2
    I repro'ed on chrome version 43.0.2357.130 m. Seems that on hover, the color changes to a color very similar to the blue they use for the button. Could be an easy CSS fix. – Marshmallow Jul 5 '15 at 18:36
  • 3
    +1 but shouldn't this be on User Experience Meta? Edit: Wait - might not - because it happens on 2 different sites... hmmm... I guess it should stay here then (?) – ᔕᖺᘎᕊ Jul 5 '15 at 18:39
  • 1
    Probably related: meta.stackexchange.com/questions/250748/… – nicael Jul 5 '15 at 19:07
  • ^ though profile design has changed and lacks this button now. The styling problems are the same however :) – nicael Jul 5 '15 at 19:11
7

This is a problem on a lot of sites. I'm going to make the guess that this has something to do with the site update that's sort of in progress... Different sites have slightly different... "issues".

To add to the issue, if you've "visited" the link, the colored font goes away. I'm guessing that the "unvisited hover" CSS is the issue.

Here are the ones I think are problematic (Chrome for OSX):

  • Beta Sites:

Beta Sites No Hover Beta Sites Hover Beta Sites Hover Link visited

Here, you can see the orange darkens slightly and the text turns blue. This orange/blue combo is pretty... awful. If you've visited the link, though, the text stays white and the button darkens.

  • Academia:

Academia No Hover Academia Hover

Here the entire button changes to blue and the text is a similar, barely legible blue.

  • Android Enthusiasts:

Android Enthusiasts No Hover Android Enthusiasts Hover

This blue/red combo is also pretty awful.

  • Ask Different:

Ask Different No Hover Ask Different Hover

Can't read this one, either.

  • Ask Ubuntu:

Ask Ubuntu No Hover Ask Ubuntu Hover

Ubuntu gets underlined as well as having the text color change... to a nearly identical shade of red. The button color does not seem to change.

  • Bicycles:

Bicycles No Hover Bicycles Hover

This one is at least still legible but after visiting the link, the text color doesn't change, so I'm guessing it's not really supposed to change here.

  • Biology:

Biology No Hover Biology Hover

It's Christmas over on Biology, apparently.

  • Chemistry:

Chemistry No Hover Chemistry Hover

Similar to Android but with bold text.

  • Cross Validated:

Cross Validated No Hover Cross Validated Hover

Well, this one's legible and doesn't quite make my eyes bleed... but no color change if link is visited, so I think that's the better option.

  • Database Administrators:

Data Admin No Hover Data Admin Hover

Same as Cross Validated.

  • Drupal:

Drupal No Hover Drupal Hover

Can't read that...

  • English Language & Usage:

ELU No Hover ELU Hover

This one gets an underline, too.

  • Expression Engine:

Expression Engine No Hover Expression Engine Hover

I can read this one, though it's close. If already visited, the text doesn't change, only the background darkens.

  • Graphic Design:

Graphic Design No Hover Graphic Design Hover

This one has a fun color-change but I'm pretty sure the text here should remain white. That's what happens when the link's been visited already.

  • Home Improvement:

Home Improvement No Hover Home Improvement Hover

The clash of the colors!

  • Mathematica -

Mathematica No Hover Mathematica Hover

This raspberry hover text color is really pretty but I'm not sure it's intentional as the text color stays white if the link has been visited.

  • Mathematics:

Mathematics No Hover Mathematics Hover

Same as Mathematica. Nice color but not sure it's intentional.

  • Movies & TV:

M&TV No Hover M&TV Hover

Clash-y blue and red again.

  • Network Engineering:

Network Engineering No Hover Network Engineering Hover

This blue isn't actually bad. It's the link color for the rest of the site and fits with the logo, seeing as the site is pretty neutrally colored but, when visited, the text stays white.

  • Programmers:

Programmers No Hover Programmers Hover

Is that orange? Whatever it is, it's not legible.

  • SharePoint:

Sharepoint No Hover Sharepoint Hover

This one's almost legible but, again, pretty sure the text color shouldn't change as it doesn't if the link's visited already.

  • TeX & LaTeX:

TeX No Hover TeX Hover

Gets an underline text decoration and a dark blue color that doesn't seem to be part of the site design.

  • The Workplace:

Workplace No Hover Workplace Hover

The button color change seems to be intentional but I don't think the text color is.

  • Travel:

Travel No Hover Travel Hover

This pink is sort of out of place here.

  • User Experience:

UX No Hover UX Hover

These colors are so similar it's really difficult to read.

  • Web Applications:

Web Apps No Hover Web Apps Hover

This is legible but it's not a great color match. As with others, the text remains white if the link's already visited.

  • Webmasters:

Webmasters No Hover Webmasters Hover

The text is actually darker here, due to the button lightening. Still not very legible.


Some sites aren't affected at all by the hover effect, or aren't affected in a bad way:

  • Arquade - Doesn't change at all on hover.
  • Ask Patents - Minor dropshadow change to button, no change to text.
  • Christianity - Doesn't apparently get a button, just text. The hover color is a bit faded but legible.
  • Electrical Engineering - Doesn't change at all on hover.
  • Game Development - Doesn't change at all on hover.
  • Geographic Information Systems - Doesn't change at all on hover.
  • Information Security - Doesn't change at all on hover.
  • MathOverflow - Background lightens and link gets underlined. Same behavior if visited. Nice pop of orange on click, too.
  • Mi Yodeya - Button color changes but no text color change.
  • Personal Finance & Money - Button color darkens but no text color change.
  • Photography - Doesn't change at all on hover.
  • Physics - Doesn't change at all on hover.
  • Role-Playing Games - Button color darkens but no text color change.
  • Science Fiction & Fantasy - Doesn't change at all on hover.
  • Seasoned Advice - Doesn't change at all on hover.
  • Server Fault - Button color darkens ever so slightly but no text color change.
  • Skeptics - Text changes to safety yellow on hover, does this regardless of visited status or not.
  • Stack Apps - Doesn't change at all on hover.
  • Stack Overflow (including all language versions) - Button color darkens but no text color change.
  • SuperUser - Text gets underline decoration.
  • Theoretical Computer Science - Doesn't change at all on hover.
  • Unix & Linux - Text gets underline decoration.
  • WordPress Development - Doesn't change at all on hover.
  • This sounds like it could be related to this thing. – Christian Rau Jul 6 '15 at 0:30
  • @ChristianRau That was actually a thought I had, too. But it's almost the opposite as that has a different link color when visited and this one has a different link color when unvisited but highlighted. – Catija Jul 6 '15 at 0:32
  • 55 images!! Calm down! :P – ᔕᖺᘎᕊ Jul 6 '15 at 19:05
  • @ᔕᖺᘎᕊ I'm going for the "Most images in one answer" achievement... that's a thing, right? – Catija Jul 6 '15 at 19:08
  • lol... ask nicael to post a feature-request for one :P – ᔕᖺᘎᕊ Jul 6 '15 at 19:08
  • 1
    @ᔕᖺᘎᕊ I do have to admit that it's pretty fun to see so many of the buttons in one place. – Catija Jul 6 '15 at 19:10
3

The reason is that when you hover over the button, the color of the white text becomes a very similar color to the button's color, which is blue. This cannot be seen normally, you have to zoom in or have 20 out of 20 vision to see it.

This should be a easy fix, either the color of the button changes to something like red or the text color when hovered changes to another color that stands out/is different from the blue used.

  • 2
    There is honestly zero reason for any button or the text on it to change color at all on hover. – Catija Jul 5 '15 at 21:59

You must log in to answer this question.

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