Color-blindness — also known as color vision deficiency or just CVD — refers to those who are unable to tell the difference between certain colors. On wikis, many people with color-blindness see a wiki differently, and may have difficulty viewing it.
Fortunately, learning how to include the color-blind in your community is possible by understanding CVD. Then, figure out how you want to address it.
Color-blindness is a genetic condition; about 8% of all men and 0.5% of all women have some kind of color deficit in their vision. Color-blindness is caused by cells in your eyes, known as cone receptors, that are unable to detect and differentiate specific parts of visible light, and as a result, may appear as a similar color.
The most important thing to understand is that not everyone is color-blind in the same way. Although there are many types of CVD, most color-blind people have a form of red-green color-blindness, which itself has several varieties, including protanopia and deuteranopia. Planning for this type of color-blindness should be integral to any strategy you have for your wiki. Other types of color-blindness also exist, such as tritanopia (blue-yellow color-blindness).
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.
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.
Strategies to help color-blind users
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.
- Have high contrast ratios between background colors and text. Depending on which mode you use, make the text colors the opposite of the mode's theme. For example, in dark mode, which tends to have a dark background, use light text; and in light mode, use dark text. Dark text colors on dark backgrounds will probably trip up some of your readers. Remember that Wikipedia has a 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. Using high-contrast complementary color pairs also works, but make sure to use the exact opposite color; colors that are too close will be hard for normal-vision.
- 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, symbol, 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.
If you find the color contrast is 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.
- What is color blindness?
- Coblis, a Color Blindness Simulator
- Improving Color Accessibility For Color-Blind Users
- Help:Personal CSS and JS - creating customizations that only affect you
- Help:Light and dark themes
- Help:Contrast and advanced