WCAG 1.4.1: Use of Color

Back to all WCAG criteria

OVERVIEW

Effort:

  • Complexity:Easy
  • Duration:Slow

Important for:

Design

What's it about?

A website must also work for people with color vision deficiencies. If something is conveyed through color alone (for example: green dot = active, red = inactive), then additional visual elements or text are required.

Illustration of a website shown in grayscale with the text 'This design also works in black and white.' Below it is an illustration of a round character looking upward with a questioning expression.

How to

Depending on your situation, you can implement one of the following options to meet the criterion. For a deeper dive, please refer to the linked WCAG techniques.

  • Convey meaning not only through color

    Whenever color itself is important and must be recognized to understand what the design is conveying, there must be an alternative.

    For example, consider a faulty form field.

    If only a red border is shown to indicate the error, this is problematic. I must be able to recognize this color to understand that it is an error.

    To avoid relying solely on color, I can either add text explaining the error or use an icon that shows an error symbol. Both are valid alternatives according to this criterion.

    Technique(s):

    Two password input fields. The first one shows an error only through the color red, and the second one shows the error through both the red color and accompanying text.

  • Do not convey important information in infographics through color alone

    If an image distinguishes important information only through color – such as in maps or infographics – it needs to include additional patterns, symbols, or labels. This ensures that the information is still understandable without the perception of color.

    The key factor is whether the color itself carries meaning. If the color green alone represents “positive,” another distinguishing feature is needed. If the colors do not have their own meaning, as in the segments of a pie chart, an adequate color contrast of at least 3:1 is sufficient

    Technique(s):

    Two pie charts. One communicates the information through color only, while the other also includes a striped pattern for additional clarity.

    Notes

        • Example of a filter in both active and inactive states. In the first example, the contrast from active to inactive is less than 3:1, making it incorrect. In the second example, the contrast is sufficient.

          Hint: When is a contrast of over 3:1 sufficient as a difference?

          When colors differ not only in hue but also significantly in brightness, this alone counts as an additional visual distinction, provided the contrast is at least 3:1 compared to the other color.

          However, it’s important to note: Once exact color perception is required (e.g., green = valid, red = invalid), an additional distinguishing feature is necessary, such as symbols or text.

          However, we always recommend using an additional feature. Relying solely on color contrast is not optimal for every user.

          Create accessible designs?

          Our workshop for designers!

          Learn everything you need to know as a designer to create accessible design systems for digital products and entire brands.

          Learn more about the workshop
          Four principles of the Web Content Accessibility Guidelines: Perceivable – a red triangle holding a magnifier. Operable – a yellow circle with question marks overhead. Understandable – a green rectangle looking confused at a screen. Robust – a blue square wearing sunglasses and holding a keyboard.

          Learn accessibility with us?

          Looking to implement WCAG best practices in your design, development, or content workflow? Book a workshop for your team or contact us directly to learn more.

          Send us an email!