Color adds flavor to life. This goes for what we create online. But how we view color can differ from person to person. Some people are impacted by different types of problems in relation to what they see. This can be from color blindness, age-related vision issues, or even screens that have problems showing certain color spectrums. The way color is used may impact their ability for these users to read your web page or document. The topic of use of color is huge and does not always have the most direct answer. That said, this article seeks to condense the topic for considerations of best practices for use of color in web pages and documents.
Use Strong Contrast for Text
When it comes to reading text, the contrast between the color of the text and the background is going to dictate how readable it is. Web Content Accessibility Guidelines (WCAG) 2.1 suggests that “the visual presentation of text and images of text should have a contrast ratio of at least 4.5:1. The only exceptions where this criteria is not necessary is with decorative text components that are not necessary to understanding the content and logos.
As a general rule, Black text on white background is going to have the strongest color contrast for readability. The same goes for white text on black background. If you want to use more color with your text:
- Highlighting black text is better than changing the color of text. Make sure that the color being used for the highlighting has good contrast with the black text. The lighter the color of the highlighting, the better the better for readability.
- It is advised to not add color to text itself. Especially if the color is the same color of web links in the page. If you do add a color, make sure that the color contrasts well with the background and that it is one that will contrast well for users with various types of color blindness.
If you want to test out the contrast ratio of your text to the background, you can use something like the WebAIM Contrast Checker.
Don’t Use Color Alone for Emphasis
Emphasized text if highlighted or given a different color should be bolded so that the emphasis is still made even if users can’t see the highlighting or text with color. For more information on guidelines about adding emphasis in text, please see our article Accessibility for Organization and Text Formatting Emphasis.
Other Cues for Differentiation in Images
Like not using color alone for emphasis in text, there are considerations for images. The Contrast article from Accessible U has an excellent example with charts. Due to different ways your user may perceive color, certain colors might appear more similar to each other than to people that don’t have these barriers. For that reason there are a few other methods you can use alone or combine to create differentiation in charts or graphs:
- Use size differentiation
- Different patterns or textures
- Differing symbols
Test Images
A great tool you can use to see how your image will appear to users with a different way of viewing color is to use color blindness simulators. You can upload your image into the simulator and set it to different types of color blindness to see what those users might see. These simulations are never 100% perfect because the screen you are using might be different from another user’s screen. But they are a good way to attempt giving an idea of where there might be contrast issues.
When looking at the image in different simulations ask yourself:
- Does the image I am looking at relay the information I want the user to see?
- Is anything obscured because of a certain color?
Here is a list of different simulators that you can try using:
