Caution

This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.

Considerations for Using Color in Expressions

Reference: How to Switch to Grayscale Display

Color is often used to convey information.

Common examples of expressions that utilize color include:

  • Displaying labels of required fields in forms in red.

  • Showing error messages in red.

  • Indicating clickable links by changing their color.

  • Changing the color of text to emphasize it.

  • Using different colors in a pie chart to represent the distribution of responses.

Using color in expressions is not problematic in itself, but if the intended meaning is not conveyed through means other than color differences, it will not be accessible to people with color blindness or visual impairments.

For text information, it’s advisable to use clever wording in combination with color to ensure the intent is communicated.

Reference: The Role of Wording in Text Information and Accessibility

In the case of links, it’s acceptable to use color along with another visual element like an underline.

For images, one approach is to provide textual descriptions alongside them. In the example of a pie chart, altering the background pattern could be one strategy.

It is crucial to express intent through means other than just color differences.

Additionally, employing color combinations that consider those with color vision deficiencies—known as Color Universal Design (CUD)—is also effective. While using expressions that do not rely on color alone can make the information accessible to those who have significant difficulties with color perception, implementing CUD can make the information even more comprehensible for people with color blindness.

The Color Universal Design Organization (CUDO) [1] highlights the following three points of CUD:

  1. Choose color schemes that are easily distinguishable by as many people as possible.

  2. Ensure information is clear to both people who have difficulty distinguishing colors and in situations where colors are hard to distinguish.

  3. Facilitate communication using color names.

—「カラーユニバーサルデザイン３つのポイント」とは？ – NPO法人 カラーユニバーサルデザイン機構 CUDO

When implementing CUD, use color schemes that meet the points above. Specifically, you can consider using color palettes like the ones published as the Color Universal Design Recommended Color Set. [2] However, color choices often need to align with the brand colors of products or services. Taking such constraints into account, it is advisable to predefine your own color palette.

When verifying whether a design or implementation is accessible to people with color vision deficiencies, it is advisable to use simulators like the ones listed below.