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.
Alternatively, you can try one of these presets:
Size "unchanged" lacks size-related layout changes; this can be useful if you do not need large print but just want 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:
You need to know
the best size in points (36, 48 or whatever) for text you
read at the distance of the screen.
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.
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
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.
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.
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.
Let P be your
on-screen point size, H and V be the horizontal and vertical
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.)
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:
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
This is 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.)
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.
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.)
Go to Tools / Internet Options / Accessibility
and set that file as a user-supplied
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.
Go to Safari / Preferences / Advanced / Style
sheet, select Other, and select the file
You can use an extension like userScriptCSS.
In Tools/Extensions/userScriptCSS set the regexp to
.*, paste in the
CSS code, and press ``Save''; it applies to newly-loaded pages.
If you use dark backgrounds,
you might still have to put up with a white background during page
You might get better results with other browsers---if Firefox is too much for an old PC then try Midori
e.g. on 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.)
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/.
In Rekonq, use Configure / Appearance / Stylesheets.
In the older Konqueror browser, go to ``Settings'', ``Configure Konqueror'', ``Stylesheets'',
``user-defined stylesheet'' and set the filename; you may have to restart
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
Go to Tools / Preferences / Advanced / Content / User style sheet
and type in the full path or Browse to it.
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.)