With the new updates applied within the past 24 hours or so I can no longer see the vote up/down buttons.

For accessibility reasons I found it necessary to replace all website specified colors with browser colors, and this also removes all background images, and in fact all images placed by any means other than IMG tags.

Stack Overflow with custom colors

OK, I better explain a little more here. I have an eye problem that results in abnormal eye senstivity ranges. After as little of an hour of using white background screens I get something I call eyeburn (yes, it hurts) and would have to walk away from the computer for an hour or more for it to go away. Using black color themes gets rid of this problem.

Due to the very large number of sites designed in particular ways I found it necessary to set my browser to the accessibility mode that is ignoring web site colors. For obvious reasons this also disables background images as these often go with particular assumptions about the color of the text above them. This completely breaks most methods of CSS sprite sheets.

This link, http://artzstudio.com/2010/04/img-sprites-high-contrast/, describes a way of making sprite sheets that works with IMG tags that works in this environment.

What's it going to take to get a clear and obvious accessibility bug fixed? Any Windows user who enables high contrast accessibility is going to hit this.

It's now been almost been 1 whole year! Fix it already!

  • Please don't change that link to an image as that server struggles under even small loads.
    – Joshua
    Commented May 14, 2010 at 2:20
  • 5
    ok I compacted it with pngout.exe (49% smaller, pixel-identical) and moved it to imageshack.us Commented May 14, 2010 at 6:36
  • Do you happen to use a CRT monitor? Something else?
    – Gnome
    Commented Jun 1, 2010 at 4:15
  • 1
    The Cat: Eye problem.
    – Joshua
    Commented Jun 1, 2010 at 15:39
  • 14
    Almost two months and still no update on this even though it's the top voted bug? What will it take to get an update? If the answer is more votes that's dificult to do considering effected users can't vote this up.
    – Jared
    Commented Jul 8, 2010 at 18:12
  • 2
    @Geoff Broken accessibility is not a bug? Interesting choice.
    – Pollyanna
    Commented Dec 11, 2011 at 21:15
  • 1
    My vision is decaying at an alarming rate. I am now forced into using only monocromatic (blue, lime, red) colors on a black background, and soon to have to add large fonts to that as my glasses can hardly get any stronger. I'm really going to need this bug fixed soon. Help!
    – Joshua
    Commented Mar 26, 2012 at 3:14

4 Answers 4


I think the

<span class="vote-up=off">

Should have some text in it, like:

<span class="vote-up=off">Up</span>

And then use CSS to height using padding instead of height:

.vote_up_off {
    padding-top: 25px;
    height: 0px;
    overflow: hidden;
    background-image: url(http://sstatic.net/mso/img/sprites.png?v=4a60fe5f4b62);

This way it can easily be overridden by an individual user or a "Click here for non graphics version" link to show the text:

body.noGraphics .vote_up_off {
    padding-top: 0px;
    height: 25px;
    background-image: none;

Take a look at the top navigation bar of my company's site as an example.

  • 33
    Here, have some unicode replacement of images used: △/▲ upvote/d; ▽/▼ downvote/d; ☆/★ favourite/d; ⚐/⚑ flag/ged; ☒ delete; ✉/✉! envelope; ✔ accept; ○/◉/● bronze/silver/gold badge.
    – badp
    Commented Sep 5, 2010 at 10:11
  • @badp Unicode is not a proper solution. All those fancy symbols may not be displayed correctly if a user decides to override the default font (e.g. as those with dyslexia or other disabilities often do). Browser support for Unicode is also far from perfect. Also, screen readers will have problems with them too.
    – tomasz86
    Commented Jul 10, 2016 at 6:35
  • @tomasz86 if this wasn't a problem five years ago it's not going to be a problem now.
    – badp
    Commented Jul 10, 2016 at 10:05
  • 3
    @badp This has always been a problem for those who rely on custom fonts (myself included). The reason is that most web developers / designers either do not know or do not care to provide just a minimum of accessibility. The only reliable alternative to such images is simple text that can be accessed both visually and non-visually (e.g. with a screen reader, etc.).
    – tomasz86
    Commented Jul 10, 2016 at 12:01

ok, the markup was changed so it went from

<span class="vote-up-off" title="..."></span> 
<span class="vote-count-post">12</span> 
<span class="vote-down-off" title="..."></span> 


<span class="vote-up-off" title="...">up vote</span> 
<span class="vote-count-post">12</span> 
<span class="vote-down-off" title="...">down vote</span> 
  • 1
    Setting the text and then using text-indent to shift it outside of the div -- clever but unworkable. This particular accessability switch built into the browser tears off background images and colors and leaves everything else.
    – Joshua
    Commented Jul 12, 2010 at 17:14
  • @joshua this part of the fix is for the blind users. That's why I didn't close this as [status-completed]. You've sort of mixed up two issues in one here, which is why I renamed your question to make it more clear. Do Mac users have this same "high contrast mode"? Linux users? Commented Jul 12, 2010 at 18:30
  • There's a standard switch on Firefox web browser that does exactly the same thing.
    – Joshua
    Commented Jul 12, 2010 at 19:29
  • Opera has high contrast mode, too. It makes the up and down vote buttons vanish, at least in the case of meta.
    – Brian
    Commented Aug 31, 2010 at 2:07
  • Confirmed: problem still persists in Opera 10.60 "High Contrast (W/B)" Commented Sep 1, 2010 at 14:36

I sometimes experience this eye-burn, too, but luckily not always. To avoid it, I sometimes just have the screen invert colors. Under gnome use magnifier -fiz 1, under windows vista and 7 you can use the accessibilty feature. For lower win-version you may need additional tools or a suiting option for your graphics driver (I think nVidia has that option). The best option would of course be to invert the V in HSV space and therefore leaving colors intact, but I haven't found a suiting tool yet.

edit see answers to How to invert all the display colors in Windows Vista? and Colour profile to dim the screen .


Based on the changes that Jeff put in place, you can force the text to be displayed with a user style like the following:

@document regexp('^http://(((meta\\.)?(stackoverflow|[^.]+\\.stackexchange|serverfault|askubuntu|superuser))|stackapps)\\.com.*$') {
  .votecell .vote > a,
  .votecell .vote .vote-accepted-on,
  .votecell .vote .vote-accepted-off,
  .comment-actions > a {
     text-indent: 0em!important;
     font-size: 1em!important;
     width: auto!important;

There are other sections of the site that would likely need similar treatment, but this handles the voting aspect at least. This does require additional setup on your part and is by no means a solution to this issue, but under the circumstances it might be preferential to not being able to use the site effectively.

Ideally the site's stylesheet could directly account for users visiting with high-contrast colour schemes, but it seems that Microsoft is the only browser vendor currently who defines a media selector for these purposes (and it's been introduced for Metro, so I'm not sure it's even available in current versions of IE).

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