I've heard that proper "color contrast" is important on my website. What does this mean?
The term "web accessibility" means that a website should be usable by everyone, so various disabilities should be kept in mind. Disabilities can include, but are not limited to, the inability to use a mouse or see the screen.
When someone has low visual acuity, certain color palettes on websites may make it difficult for that person to fully see and understand the website content.
How can I tell if someone with low visual acuity can properly see the text on my website?
If possible, it is always a good idea to try and locate a few people who can provide direct end-user testing; in this case, a person with low vision could look at the use of color on your website and provide feedback.
Additionally, there are testing tools available that can be used to test the color contrast of your website. See Self-Assessment: Tools for Finding Issues for a list of color contrast testing tools.
Do I need to restrict the number of colors used on my site to keep the color contrast even throughout the site?
Not at all! You can make your site as colorful as you'd like. Just make sure that the colors are not too distracting, or poorly focused, which may make your site unappealing overall.
Is there anything I should do in particular about fonts, or use of bold text, or use of larger/smaller text size?
Here are some recommendations given by the W3C on the requirements for color contrast and use of fonts:
- The WCAG 2.0 Success Criterion 1.4.3: Contrast states the following:
- For "normal" sized text or images of text, the minimum contrast ratio is 4:5:1.
- For "large" text (or images of large text), the minimum contrast ratio is 3:1. Large or larger scale text is defined as 18pt at normal font weight or 14pt for bold font weight. 18pt is roughly 1.5em or 150% of the body text when the body text is 1em or 100%. 14pt bold is roughly equivalent to 1.2em bold or 120% bold where body text is 1em or 100%.
- Exceptions (where no contrast minimum is required):
- Inactive user interface controls.
- Images of text where the text is pure decoration.
- Text in logos.
- It is also possible to go too high when it comes to contrast. If your contrast is too high, people with certain learning disabilities may not be able to concentrate on your web content.
The UC (including Berkeley) requires WCAG 2.0 AA (the standard listed above). If you would like to meet an even higher standard, you can refer to the AAA standard.
What about colorblind users?
If your color contrast checker uses the latest formula recommended by the W3C, you should be covered. Their formula takes into account the various types of color deficiency. But it's always good to test with real people as well.
I'm worried that testing for color contrast will take too much time. How difficult will it be to check the color contrast on my website?
Color contrast is one of the easier things to test while you work on your website. Many of the available tools are easy and quick to use, allowing you to test frequently without taking too much time away from the rest of the website development process. If it turns out that you will need to adjust the color contrast on your site, this is easy to do if you are using CSS (Cascading Style Sheets).