Contents

Depending on the colors your wiki uses, some people with CVD may not be able to distinguish between text and background. Your articles could be difficult -- even impossible -- for them to read.

Fortunately, learning how to include the color-blind in your community is possible. You just have to spend a bit of time understanding CVD. Then, figure out how you want to address it.

Learning about CVD

The most important thing to understand is that not everyone is color-blind in the same way. Although there are many different types of CVD, most color-blind people have a form of red-green color-blindness, which itself has several different varieties, including protanopia and deuteranopia. Planning for this type of color-blindness should be integral to any strategy you have for your wiki.

For example, a red-green color blind person may not be capable of distinguishing dark reds and/or dark greens from black. If you use black as your wiki’s article background color, a reader with protanopia will not be able to distinguish your red links. Equally, if you make your main text color green on a black background, you’re making your wiki less legible to those who have some degree of deuteranamoly -- by far the most common form of color blindness.

Strategies to help color-blind users

Site-wide solutions

In a sense, there is no single “fix” for your color-blind readers because there are so many types of CVD. But there are steps you can take — either in the theme designer or your site-wide CSS — which can make it easier for well over 90% of color-blind visitors to use your wiki.

Take a deeper dive with this excellent seminar by Geri Coady, one of the web’s experts in designing for the color blind.

Have high contrast ratios between background colors and text. If your background is dark, make the text colors light. Dark text colors on dark backgrounds will probably trip up some of your readers. Remember that Wikipedia has default color scheme of black letters on very light backgrounds for a reason. There’s almost no one unable to read their default color scheme.

Avoid color-coding just about anything. Attaching some kind of syntax to color can be completely meaningless to some color-blind readers. (It can also be highly confusing to some non-CVD readers. For instance, cultural differences mean that some people associate red with prosperity, while others think it signifies danger.)

If you must color-code make sure that color is not the only means of differentiation. Colored squares with a letter or word inside them will be useful identification for many color blind readers. As long as you’re mindful of the legibility of the foreground text, you could also use some gradients in backgrounds. Whichever method you choose, just make sure that if you’re attaching meaning to a color, you should provide a legend somewhere on your wiki.

Avoid whimsical color changes. Such changes to infoboxes and navboxes -- “I like these colors just because they’re pretty!” -- can alienate readers with visual issues for no reason.

If you take these steps, you’re probably not going to get many complaints from your readers.

Helping individual users

Of course, there may be a good reason why you chose color schemes that are not particularly CVD-friendly. Maybe your wiki’s topic is simply associated with those colors. After all, it’s not your fault that Stranger Things has a dark red logo on a black background!

In such a case, you’ll likely need to adapt a more individualistic solution.

Fandom users can always change the way the site looks and behaves to them via their personal CSS. They can alter colors of header, page background, page titles, links, fonts, tabber, gallery, infobox and other page elements to meet their specific requirements.

Recently, a color blind user helped us develop a sample Cascading Style Sheet which should help render most elements of most wikis in CVD-friendly ways. Of course, a lot of wikis have local CSS elements that might require individual attention, so space has been allowed at the bottom of the sheet for adjustments to particular wikis.
Obviously, this code can’t be guaranteed to work for your particular needs. It should be considered an “alpha” approach to the issue. And because this is for Personal CSS only, it uses selectors that you can’t normally modify in community-wide CSS.
If you find it's working quite poorly in a particular situation, you are welcome to contact us directly and our staff members will help to address your specific needs.