Wikipedia:Style sheets for visually impaired users

From Wikipedia, the free encyclopedia
Jump to: navigation, search

You are here: main page >Collaborations >WikiProjects >Accessibility > Style sheets for visually impaired users

Here is a collection of style sheets for visually impaired users. It aims to improve color contrast and text size, for example.

Green on black[edit]

On the Monobook skin, there is a gadget in the account preferences that allows to restyle Wikipedia. The background is black, text is green, links are unchanged, etc. It is aimed at users who are sensitive to high luminosity (photophobia), and provides a comfortable design for them.

Unfortunately, there are several changes needed for it to work nicely with vector. The gadget is MediaWiki:Gadget-Blackskin.css. Mostly, the problem lies with the navigation menu, the editing toolbar and the preference menu. There are a few other issues not specific with vector (for example with infobox, navbox, other navigation menus, warnings at the top of the page, table headers, etc.).

Other color schemes should be tested. The current green on black has a few issues. The green is pretty bright, is it really fine? If yes, could a white on black work too? Pure black and pure white background are known to cause eye strain for normal users. Does pure black affects users with photophobia too? If it affects them, we could use a slightly lighter black, such as #161616, or #202020. Try #BBBB8E (a matt shade of white) either as or background color text color. Testing a grey background or a shade of orange not too bright could be interesting too. Some inspiration from Windows and a powerpoint template for photophobic users (apparently designed by a doctor?).

Contrast in Navboxes[edit]

Note : This works with all navboxes, because of the "!important" declarations that overrides both the default color set in common.css and inline styles.

.navbox-title,
table.navbox th {
    background: #e6e6ff !important;    /* Level 1 color */
}
.navbox-abovebelow,
.navbox-group,
.navbox-subgroup .navbox-title {
    background: #eeeeff !important;    /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
    background: #efefff !important ;    /* Level 3 color */
}
 
div.NavFrame div.NavHead {
    background-color: #e6e6ff !important ;
}