Web Accessibility: Color

Color plays an important part in a design. Colors evoke emotions, feelings, and ideas. Colors can also help strengthen a brand’s message and perception. Yet the power of colors is lost when a user can’t see them or perceives them differently (Lambert, 2018).

Color perception

Color blindness affects roughly 1 in 12 men and 1 in 200 women. Deuteranopia (red-green color blindness) is the most common form of color blindness, affecting about 6% of men. Users with red-green color blindness typically perceive reds, greens, and oranges as yellowish (Lambert, 2018).

In addition, colors mean different things in different countries and cultures. For example: in Western cultures, red is typically used to represent something negative and green something positive, but the opposite is true in Eastern and Asian cultures (Lambert, 2018).

Tips:

Do not rely solely on color to convey meaning. You should always add a non-color identifier (Lambert, 2018). These can include:
- Using text emphasis like bold or italics. Example: The deadline for applications is April 1.
- Icons can help bridge cultural differences (when used well).
- Patterns work well to help distinguish between colors.
Avoid using large amounts of oversaturated colors or high-contrasting colors, as they can be hard on the eyes as well as uncomfortable to some users. Some colors to avoid include orange, red & green, and blue and green (Lambert, 2018; Penn State, n.d.).

Color contrast

Text color that is too similar to the background color will be hard to read (Kalbag, 2017, p. 75). Poor contrast between the foreground and background colors also makes content harder to see for people with low vision, those using a low-end monitor, or people in direct sunlight (Lambert, 2018).

Contrast issues can also occur when text is on a textured background or on an image. Sufficient contrast between foreground and background colors makes text much easier to read (Kalbag, 2017, p. 75).

Tips:

The best combination is black vs. white, but other good options are navy/white, yellow/black and other similar color schemes (Penn State, n.d.).
Using big type can help your text stand out from the background (Kalbag, 2017, p. 75).
If your content includes the use of a background image, it’s better to use a subtle color and/or pattern to aid in legibility. See examples on Penn State’s Accessibility: Textured Backgrounds webpage.
Some modern designs are so subtle that the contrast can actually be insufficient for some readers. Examples include contrasting light grey vs. middle grey or white vs. light blue. If you plan to use a subtle color scheme, make sure that the content can be easily read on a black and white printout (Penn State, n.d.).
If the contrast between text and background is too high, the text can appear to dance on the screen (Kalbag, 2017, p. 75). There are examples on Penn State’s Accessibility: Vibrating Color Combinations webpage.

To check if you’re using the right amount of contrast, there is a list of color-contrast checking tools in the color section of the Web Accessibility: Resources webpage.

References:

Lambert, S. (2018, April 9). Designing for Accessibility and Inclusion. Smashing Magazine. https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/.
Kalbag, L. (2017). Accessibility for Everyone. Jeffrey Zeldman.
Penn State. (n.d.) Contrast or Luminosity/Brightness. Retrieved March 18, 2019, from https://accessibility.psu.edu/legibility/contrast/.