Help:Contrast/Advanced

Contrast ratios (CR) describe a mathematical relationship between the background and foreground of a bit of text on your wiki. That math gives a wider range of people the opportunity to comfortably read your wiki.

Understanding visual acuity
Consider visual acuity. It's a measurement of how well you can read black letters on a white background from a particular distance, and it's something you've probably done before.

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 the smallest line on the chart that a person can read. Statistically average visual acuity is being able to read the line marked 20 from 20 feet away: 20/20 — or 6/6, if you use the metric system.

Finding the contrast ratio
The visual acuity fraction is directly related to the contrast ratio — a mathematical expression of the comfort a person has in reading your wiki. The highest ratio is 21:1, which is black text on a white background — or white text on a black background. The lowest is 1:1, meaning that both background and text are the same color. 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 for regular text, and 3:1 for larger copy. AAA has a minimum contrast ratio of 7:1 for regular text, and 4.5:1 for large text.

For both standards, good non-text contrast is also needed. It applies to graphic elements, such as icons, that are required to understand the wiki content. These need to have a contrast ratio of at least 3:1. For example, an icon indicating gold in a game used in an infobox instead of the word "gold"; it conveys information, so it should be visible.

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.

Related topics here at Fandom

 * An introduction to this topic
 * 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

 * W3C Web Accessibility Initiative's guide to colors with good contrast
 * An interactive examination of the importance of contrast in web design
 * Colorable - a simple contrast-checker for when you're planning your wiki's color palette.
 * WCAG Contrast Checker - a tool for checking if the contrast meets WCAG guidelines for AA and AAA standards.
 * CheckMyColours - a tool for checking all your wiki's current foreground and background color combinations.
 * W3C's list of contrast ratio checking tools
 * The Braille Institute's digital tech section and various free apps that help you simulate several eye disorders.

Further help and feedback
fr:Aide:Contraste/Avancé it:Aiuto:Contrasto/Avanzato ja:ヘルプ:コントラスト/高度な情報 tr:Yardım:Kontrast/Gelişmiş uk:Довідка:Контрастність/Розширено