Why does color contrast matter?

Color contrast

Color contrast matters for people that have low vision and can't differentiate between the foreground and background color.

According to WCAG 2.1 Guideline 1.4 , users must be able to see and hear content. The contrast ratio between foreground and background colors needs to be high enough so that people with low vision can read content.

WCAG 2.1 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Bad use of colors on login page
Good use of colors on login page

Color-blindness

Color-blindness does not literally mean that a person can't see any color at all (except in very rare cases). Color-blindness refers to the inability to distinguish between certain kinds of colors, especially colors that are of equal brightness or luminosity, even if the colors themselves appear quite different to people without color-blindness.

At Nationwide, we are recommending that content creators and developers use color contrast checker to ensure we consider every customer persona when building digital content, to include audiences who may have color blindness.

Types of color-blindness

The most prevalent form of color-blindness is red-green color-blindness. Deuteranopia and Protanopia are two common sub-types of red-green color-blindness. Some people may also have what is known as Tritanopia, or blue-yellow color-blindness. Though very rare, there are those who inherit an insensitivity to all colors. People who have Achromatopsia see colors in grayscale.

3 traffic lights viewed with normal vision
3 traffic lights viewed with protanopia vision
Graphs in a textbook viewed with normal vision
Graphs in a textbook viewed with Deuteranopia vision

How is it relevant to us?

Bad Example
Good Example

Most organizations don't take account of whether all of their target audience can read or understand most of the documents or presentations which they produce. Amazingly hardly any businesses have yet to realize that they may be missing out on about 5% of their target markets because they are not aware of the effects of color blindness or low vision.

At Nationwide, we continue to build our culture of inclusivity. By building digital content according to the Web Content Accessibility Guidelines (WCAG) to ensure equal access to everyone regardless of their disabilities we are supporting our vision and mission to provide extraordinary care.

Consider the digital assets such as advertising, presentations, videos, emails, brochures, statements, websites, or mobile applications you create or influence. What can you do today to be more inclusive? Everyone plays an important role on the accessibility journey. Use a color contrast checker to make sure your digital content meets the “AA” conformance level.