A large portion of the population experiences some form of color perception problem and as such, we need to be judicious with the use of non-standard colors. Reds and greens tend to be the most problematic and are often perceived as shades of brown. Other than base black and white, blues tend to perform the best and do well with color perception.
Make sure there is enough contrast between text and the background color
Steps to take
- Avoid using light font weights for body text.
- Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.
- Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
- Measure the contrast between text and background colors with tools like WebAIM’s Color Contrast Checker, using the US Web Design System color wheel concept or other testing tools (link for VA staff only).
- Color contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality.
- Slightly temper the contrast between your text and background color. For example: don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome.
- To use text over images, add a solid background behind the text or a dark overlay to the image.
- Non-textual elements such as form fields must also maintain the appropriate color contrast.
Don’t rely solely on color
You must not rely on color as the only way to convey information. Simply using red text to show importance or an error is not acceptable. You should use the appropriate heading levels, or bold to draw attention to important topics — do not use underlines for anything except hyperlinks. Text should remain the base black color except for hyperlinks. For websites and web-based applications, the use of commonly understood iconography can help, but like color, cannot be used alone.
