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 program to generate long CSS files with workarounds for many problems.

If you are a programmer, you can adjust the Python code to your needs (works in both Python 2 and Python 3).  Alternatively, you can try one of the presets linked from this page.

=> the Python code

Download pre-generated low-vision stylesheets

=> unchanged yellow on black
=> unchanged green on black
=> unchanged white on black
=> unchanged soft greys
=> unchanged black on linen
=> unchanged black on white
=> 18 pixels yellow on black
=> 18px green on black
=> 18px white on black
=> 18px soft greys
=> 18px black on linen
=> 18px black on white
=> 20 pixels yellow on black
=> 20px green on black
=> 20px white on black
=> 20px soft greys
=> 20px black on linen
=> 20px black on white
=> 25 pixels yellow on black
=> 25px green on black
=> 25px white on black
=> 25px soft greys
=> 25px black on linen
=> 25px black on white
=> 30 pixels yellow on black
=> 30px green on black
=> 30px white on black
=> 30px soft greys
=> 30px black on linen
=> 30px black on white
=> 35 pixels yellow on black
=> 35px green on black
=> 35px white on black
=> 35px soft greys
=> 35px black on linen
=> 35px black on white
=> 40 pixels yellow on black
=> 40px green on black
=> 40px white on black
=> 40px soft greys
=> 40px black on linen
=> 40px black on white
=> 45 pixels yellow on black
=> 45px green on black
=> 45px white on black
=> 45px soft greys
=> 45px black on linen
=> 45px black on white
=> 50 pixels yellow on black
=> 50px green on black
=> 50px white on black
=> 50px soft greys
=> 50px black on linen
=> 50px black on white
=> 60 pixels yellow on black
=> 60px green on black
=> 60px white on black
=> 60px soft greys
=> 60px black on linen
=> 60px black on white
=> 75 pixels yellow on black
=> 75px green on black
=> 75px white on black
=> 75px soft greys
=> 75px black on linen
=> 75px black on white
=> 100 pixels yellow on black
=> 100px green on black
=> 100px white on black
=> 100px soft greys
=> 100px black on linen
=> 100px black on white

(above stylesheets generated by version 0.9939)

Size “unchanged” lacks size-related layout changes; this can be useful if you do not need large print, or your monitor is big enough for the browser’s built-in zoom controls to be enough, but you still need to change the colours (see advantages of dark backgrounds).

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.

Details:

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.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.

1.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.

1.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.

1.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.

1.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 an old 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 (HH + VV), divided by D, multiplied by P and divided by 72.  (If your monitor has the old standard 4x3 aspect ratio then this simplifies to P*V/D * 5/216.)

3. With some browsers, you’ll need to divide this by the browser’s setting of window.devicePixelRatio .

How to install a stylesheet

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

Firefox:

On the desktop version, locate your profile directory as described on mozilla.org, and save the file as userContent.css in the chrome subdirectory of your profile directory (if no chrome subdirectory exists, create it).

• On Firefox 69+, you also have to go to about:config and turn on toolkit.legacyUserProfileCustomizations.stylesheets
• You have to restart Firefox when changing userContent.css; on GNU/Linux you might want this togglecss script to toggle the presence of userContent.css and restart Firefox.

=> togglecss script

• On Firefox 51, you’ll also need to go into about:config, set browser.tabs.remote.autostart.2 to false and restart. This was fixed in Firefox 52 (bug 1333157).
• Not always possible on mobile Firefox: for example in Android you’ll need to “root” your device before you can see the profile directory (and that’s not always feasible). You might try the “Stylish” plugin, but it doesn’t always work as well as installing a local stylesheet (colours are occasionally overridden by the site; black-on-white might work better).
• Some versions of Firefox scale their pixels at high DPI settings, so the stylesheet size needs to be reduced to compensate. (E.g. Firefox 3+ on Windows, and more recent versions of Firefox on GNOME 3 with text-scaling-factor set.)
• If you use dark backgrounds, 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.)

Internet Explorer:

Go to Tools / Internet Options / Accessibility and set that file as a user-supplied stylesheet.

• If you are using a low resolution or a high DPI setting as a means of getting Windows to magnify consistently, and if as a result of this the dialogue boxes won’t entirely fit on your screen, you may be able to reach Accessibility by clicking on General in Tools/Internet Options, pressing Tab 13 times (in IE6) or 12 times (in IE7), and pressing Enter.  But this is likely to change in different versions of IE.
• If you also set text and background colours, do not check “always use these colours” because it will override the stylesheet.
• 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.

Safari:

Go to Safari / Preferences / Advanced / Style sheet, select Other, and select the file

Google Chrome:

Create a directory with the stylesheet saved as userContent.css and a file called manifest.json with the following content: {"manifest_version": 3, "name": "Low-vision stylesheet", "version": "1", "content_scripts": [{"matches": [""], "css": ["userContent.css"]}]} then go to chrome://extensions and with Developer Mode turned on “load unpacked extension” and point to this directory.

• On recent Chrome versions you can also try chrome://flags/#enable-force-dark instead of using this CSS for dark mode
• Or you could try running Chrome with Web Adjuster, e.g. on GNU/Linux set up a /usr/local/bin/x-www-browser script to do python (full path to adjuster.py) --browser="google-chrome --proxy-server=localhost:28080 $*" --real_proxy --delete_doctype --address=localhost --headAppendCSS=http://(URL of stylesheet goes here), although SSL sites will need domain-rewriting
• A white background will still show in Chrome’s blank page and new tab screen etc (so you might want to set a homepage); when navigating within sites it should happen rarely if ever. (If reloading already-visited pages, clear the cache.) At any rate, Chrome is likely to cope less well than other browsers with some sites’ use of CSS priorities, because the CSS we insert does not have the extra privileges given it by other browsers.

Midori:

Before version 0.0.20, use Edit / Preferences / Behaviour / User Stylesheet. In later versions, go to Tools / Extensions (or Preferences / Extensions), enable ‘User Addons’, and save the .css file in .local/share/midori/styles/. Some versions of Midori do not have this functionality.

KDE browsers:

In Rekonq, use Configure / Appearance / Stylesheets. In the older Konqueror browser, go to “Settings”, “Configure Konqueror”, “Stylesheets” (in some versions it’s a tab of “Appearance”), “user-defined stylesheet” and set the filename; you may have to restart Konqueror. Some Konqueror versions have a bug that causes it to completely fail to apply the stylesheet; if you have an affected version then you might need to switch to another browser.

Opera 12 or below:

(these instructions do not apply to the new Opera 15 which is basically Chromium see above) Opera menu / Settings / Preferences / Advanced / Content / Style options / My style sheet

• Some versions (e.g. 12) will not style “textarea” edit controls unless you apply the stylesheet from a bookmarklet. Even then the borders may be missing.
• Opera 12 can crash on some sites. You might be able to make it more stable by disabling the :first-letter, :first-line and :hover rules (e.g. replace :first with :girst and :hover with :gover throughout), but this is not a complete solution.
• You might also want to set a background colour in the “Web pages” tab: this will be shown when new tabs etc are taking a while to load

Otter:

Go to Tools / Preferences / Advanced / Content / User style sheet and type in the full path or Browse to it. Not yet working if you’re using the newer QtWebEngine instead of QtWebKit.

OLPC browser:

Save the file as ~/.sugar/default/gecko/user-stylesheet.css and restart. (When calculating the best stylesheet size, remember the OLPC’s screen is 1200x900 and 7.5 inches.)

For other setups (including some mobiles) you can try Web Adjuster; for demonstration purposes there is an installation of Web Adjuster with these stylesheets at large-print-websites.appspot.com.

Legal

All material © Silas S. Brown unless otherwise stated. Android is a trademark of Google LLC. Firefox is a registered trademark of The Mozilla Foundation. Google is a trademark of Google LLC. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Python is a trademark of the Python Software Foundation. Safari is a registered trademark of Apple Inc. Windows is a registered trademark of Microsoft Corp. Any other trademarks I mentioned without realising are trademarks of their respective holders.