Help:Contrast

Many of your wiki's readers have contrast sensitivity. That is, they have trouble reading text that has low contrast with the background color underneath it. While they may be able to make out black letters on a white background, other color combinations are much harder to read — and can even induce headaches.

Luckily, you can help them out. Obey web contrast standards, and more people will be able to stay on your wiki longer.

Low contrast: a problem for all your readers
There are many eye maladies that can keep people away from your wiki. Glaucoma, reitonpathy and astigmatism are just a few. And although some of these are usually contracted by older people, they can strike everyone — even young kids.

Yet it's not just the visually impaired who benefit from higher-contrast designs. Bad color combinations can, by themselves, induce eyestrain and discomfort, making even those with great eyesight turn away from your wiki.

Understanding visual acuity
To make your wiki easier for people to read, you need to know a bit about visual acuity — a measurement of how well you can read black letters on a white background from a particular distance.

Think about your eye doctor's office. In the US, patients are seated 20 feet from the chart. Visual acuity is a fraction where the numerator is 20 and the denominator is the number assigned to that line on the chart, Statistically average visual acuity is being able to read the line marked 20 from 20 feet away: 20/20. In other words, you can read at 20 feet what the statistically average person can read at 20 feet.

Contrast ratios
The visual acuity fraction is directly related to what's known as a contrast ratio — a mathematical expression of the comfort a person has in reading your wiki.

Put another way, a contrast ratio is the relationship between the brightnesses of the background color and the text color. The highest ratio is 21:1, which is black text on a white background, while the lowest is 1:1 — white text on a white background. A person with 20/20 vision could probably see a page with a 2:1 contrast ratio, but it wouldn't be pleasant. So the minimum contrast ratio for the normally-sighted is 3:1.

But you can't deliver a wiki that's only good for people with 20/20 vision. That's why the World Wide Web Consortium (W3C) recommends two standards: AA and AAA.

With AA, the aim is to account for people who have 20/40 vision by providing a CR of 4.5:1. AAA has a minimum contrast ratio of 7:1. This higher rating will allow people with 20/80 vision to comfortably use your wiki. Those with worse than 20/80 vision usually employ additional assistive technologies, making that the lowest visual acuity that needs to be considered by your CSS alone.

Size matters
Bigger letters don't need super-high contrast ratios to be easily readable. For that reason, you can usually express a little more creative freedom with section headers than you can with your normal article text. All good contrast analysers will therefore express whether you've hit the mark for a certain size of text.

But your wordmark typically has no minimum CR, It's too big and too stylised. That doesn't mean you should forget contrast altogether. A logo that's white will get lost on a white background. But if you're really set on using white-on-white, just throw some darker borders or shadows around it.

Best practices
There's a lot of debate about how best to offer contrast to readers — particularly when it comes to whether dark text on a light background is better or worse than the reverse. But there's virtually no debate about the importance of adhering to the W3C standards. Here are a few best practices that will help you achieve that goal.


 * Please at least hit AA for your normal body copy — but try to get to AAA if you can. How do you do that?  Well, there are all sorts of handy tools, from browser extensions to websites. A great one is this clear beauty, but there are surely others.
 * Make sure you're reading your CR analyser correctly. Match the ratio with the text size in which you're interested. It does your readers no good to have a color combo that works at 18px when you're examining the situation at 11px.
 * Don't combine colors that are far apart from each other on the color wheel. The absolute worst combinations are red-on-green, cyan-on-red, green-on-magenta, red-on-blue, blue-on-yellow, and their reverses.

Related topics here at FANDOM

 * Including the color blind at your wiki
 * An overview of wiki design
 * A video town hall about CSS with a section about color theory, starting roughly at the 58-minute mark.

Around the web

 * An interactive walk through the importance of contrast in web design
 * Colorable, a simple contrast-checker for when you're planning your wiki's color palette.
 * CheckMyColours - a tool for checking all your wiki's current foreground and background color combinations.