Back to Silas S. Brown's home page

Stylesheets for low vision

Many modern Web browsers allow users to set their own CSS stylesheets for accessibility purposes.  It can be difficult to write a comprehensive accessibility stylesheet by hand, especially if you want to work around browser bugs and the difficulties posed by complex websites.  So I made a stylesheet generator program in Python which generates user CSS files that are hundreds of lines long and contain workarounds for many problems.

If you are a programmer, you can download the program (above) and adjust it to your needs.  Alternatively, you can try one of these presets:

Download pre-generated low-vision stylesheets


(above stylesheets generated by version 0.972)

If you need to change white backgrounds only

I've received several emails from people who don't need to change the size or layout, but just reduce the brightness of bright backgrounds. Effective CSS accessibility usually means changing everything; CSS was not designed to say "if the text is light on dark then leave it alone, but if it's dark on light then reduce the brightness". You could use Javascript instead, for example the "zap white background" userscript works in Opera, in Firefox with the Greasemonkey add-on, or as a bookmark.

What is the best pixel size?

You could just experiment, but if you frequently change between different setups and/or have variable sight then it might help to know how to choose a size without constantly re-experimenting:
  1. You need to know the best size in points (36, 48 or whatever) for text you read at the distance of the screen.
    1. First you need to know your normal distance to the screen.  You can move the screen nearer, but the limits will vary with the type of mounting and the size of your keyboard, desk, chair, etc; you need to be aware of this variation if you use different computers.  Also, if you have variable sight, remember to allow yourself room to get even nearer when your sight is worse (and without hurting your posture too much), which is usually easier than temporary size changes.
    2. Divide the screen's distance by your normal reading distance for printed text (both measured from your eyes to the text itself, ignoring any magnifying device in between), and multiply by the size in points of the printed text you prefer to read.
    3. If you normally use a magnifier for printed text but cannot use it for the screen, multiply your answer by the scale factor of this magnifier.
    4. If you have a full-screen magnifier (fresnel lens) permanently mounted to the screen, then divide your answer by the scale factor of this magnifier.
    5. Do not try to work out your size by setting the ``point size'' on the screen of a wordprocessor or similar, because that might not be calibrated correctly.
  2. Let P be your on-screen point size, H and V be the horizontal and vertical resolution of your monitor, and D be its size in inches (measure across the diagonal if you don't know, and if you're on a CRT monitor then you should subtract about an inch from the rated figure whereas TFT monitors' figures are OK as they are).  Your pixel size is the square root of (H*H + V*V), divided by D, multiplied by P and divided by 72.  (If your monitor has the standard 4x3 aspect ratio then this simplifies to P*V/D * 5/216.)
  3. In some cases you may then need to adjust for browser scaling of pixels; see "note on browser bugs" below.

How to install a stylesheet

Save the stylesheet to a file on your disk, and:

Note on browser bugs etc

Some versions of some browsers contain bugs that manifest themselves when these stylesheets are used, or have other unexpected behaviour you might need to know about.  You may need the following workarounds:

  1. Some versions of Firefox 3 on Windows scale their pixels at high DPI settings, so the stylesheet size needs to be reduced to compensate.
  2. You might need to set text and background colours and check ``always use these colours'' as well as having the stylesheet, e.g. with some versions of Mozilla and Galeon.  In other browsers (e.g. Internet Explorer) you shouldn't do this because it will override the stylesheet.
  3. Some versions of Firefox 2 on Windows display a white background around the page (so any overspill text that is not dark will become unreadable) unless you go into high contrast mode.  However if you then come out of high contrast mode, the fix will persist.  (High contrast mode is a nice idea but it does break a lot of applications.)
  4. Some versions of Mozilla (around 1.2) incorrectly scale their ``pixels'' to a different size depending on the DPI setting in X Freetype library.  If you can't upgrade then you may have to change your stylesheet size to compensate.  If you know the DPI setting (if you're using my .Xresources file, it's near the beginning of that file) then divide your pixel size by this number and multiply by 75 to get the size to use.  You should also edit the appropriate stylesheet file and look for all instances of max-width and change its value (multiply by the DPI value and divide by 75).  Remember to re-do the stylesheet if you upgrade Mozilla later.
  5. Some versions of Windows XP will override this stylesheet when in high contrast mode, and the result is not always readable.  You may have to come out of high contrast mode when browsing.
All material © Silas S. Brown unless otherwise stated.