| Line 27: | Line 27: | ||
== Size matters == |
== Size matters == |
||
| ⚫ | |||
[[File:AA Large.png|thumb|right|This combo only ''barely'' passes AA, and '''then''' only for large text. You '''should not use''' combos like this for your normal article text.]] |
[[File:AA Large.png|thumb|right|This combo only ''barely'' passes AA, and '''then''' only for large text. You '''should not use''' combos like this for your normal article text.]] |
||
| ⚫ | |||
| + | |||
Generally, contrast analysers will tell you whether your achieved CR only applies to large text. If it doesn't say '''''large''''', then it typically means the CR applies to both large and regular text. |
Generally, contrast analysers will tell you whether your achieved CR only applies to large text. If it doesn't say '''''large''''', then it typically means the CR applies to both large and regular text. |
||
Revision as of 07:28, 17 August 2021
Many of your readers don't see your wiki the same way you do. They may have contrast sensitivity -- 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.
Though a perfect example of high contrast, you can achieve good contrast levels for your readers with tens of thousands of color combinations.
A problem for all your readers
There are many eye maladies that can keep people away from your wiki. Glaucoma, retinopathy[1] and astigmatism are just a few. These don't affect only people of older age, so keep in mind that readers of any wiki might have visual impairments and disabilities.
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.[2]
Contrast ratios
So how do you get higher contrast onto your wiki? Easy: contrast ratios (CR). There's some pretty fancy math behind these web-standard ratios, but mastering the math is not essential to making your wiki better.
Readily available tools
All you need is an easy-to-use tool called a contrast analyzer. There is a ton of them out there to help you. Colorable is demonstrated in the video above, but there are others, such as:
- The WCAG Contrast Checker.
- Firefox's Accessibility Inspector
- Chrome's Color Picker,
- Other browser extensions to check the CR.
Adhering to standards
There are two web standards: AA and AAA. All contrast analyzers will make it obvious when you hit these targets. Accept no less than the AA contrast ratio between your background and text colors[3]. Try for the higher AAA standard whenever you can, so that you can help a wider range of readers[4].
To pass the AA standard you should also pay attention to the contrast of graphic elements, such as icons, required to understand the wiki content[5]. They should be easy to see, like the text, or otherwise some readers may lose the context or other valuable information.
Size matters
This combo only barely passes AA, and then only for large text. You should not use combos like this for your normal article text.
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.
Generally, contrast analysers will tell you whether your achieved CR only applies to large text. If it doesn't say large, then it typically means the CR applies to both large and regular 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.
White on black, or black on white
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 than the reverse[6] It seems to depend on the reader and the reader's type of visual impairment.
It is known that white text on a black background makes the text harder to read for people with astigmatism[7].
However, black text on a pure white background causes glare that's problematic to some. In general, the best solution is dark text on a light background or to use colours such as navy for a dark background and pastel colours for light text, while still adhering to the AA and AAA standards[8][9].
Best practices
Here are a few best practices that will help you achieve the goal of adhering to the W3C standards.
- Please at least hit AA for your normal body copy — but try to get to AAA if you can.
- 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 (even nearly) opposite from each other on the color wheel. Particularly bad combos? Red-on-green, cyan-on-red, green-on-magenta, red-on-blue, blue-on-yellow, and their reverses.[10]
Following these tips will help more people comfortably see your wiki — and therefore stay on it longer!
References
- ↑ Monsido. "Web Accessibility for Visual Impairments". 9 October 2018. monsido.com
- ↑ Sheedy, Jim and Kevin Larson Monitor. "Blink: the stress of reading". Spring 2008. eyemagazine.com
- ↑ WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum). Level AA
- ↑ WCAG 2.1 Success Criterion 1.4.6 Contrast (Enhanced). Level AAA
- ↑ WCAG 2.1 Success Criterion 1.4.11 Non-text Contrast. Level AA
- ↑ anthony. "When to Use White Text on a Dark Background". 28 April 2011. uxmovement.com Read in particular the many comments at the bottom of the article.
- ↑ Jessica Otis. "Never Use White Text on a Black Background: Astygmatism and Conference Slides". 6 November 2017. jessicaotis.com
- ↑ commsection. "Resource of the Week: What is most accessible, light text on dark background or vice versa?". 3 August 2018. esa.org
- ↑ W3C Easy Checks – A First Review of Web Accessibility. See the Contrast ratio ("color contrast") section
- ↑ Gabriel-Petit, Pabini. "Applying Color Theory to Digital Displays". 20 January 2007. uxmatters.com Note that much of this article is out-of-date, as it pertains to types of displays that are not in wide use in 2018. Nevertheless, this one point, at least, still stands.
See also
Related topics here at Fandom
- A deeper explanation of contrast ratios
- 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
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article