Accessibility

Color usage plays a key role in how we convey emotions, establishing brand identity, and guiding user interactions. Consistent and thoughtful color choices also improve usability, highlight important elements, and create a cohesive design language across the product.

Accessible colors are vital for those with color blindness or other vision impairments. By using a high color contrast ratio, you can make sure that your design is accessible to as many people as possible.

All text, including text in images and link text, should have enough contrast to stand out. This is especially important for links that aren’t underlined (and should apply to all states, including default, hover, and focus). See WCAG 2.1 AA success criterion for contrast for the current requirements.

The color system is set up to provide an accessible experience by combining a particular range of color values from Thumbprint. The combinations include any 100-level color paired with any 600-level color values. For example, when using the blue-100 background color, the blue-600 color should be used for the text.

A common and preferred pattern for non-interactive elements when applying a background color uses the 100-level values for backgrounds. The 600-level color of the same hue will ensure an accessible color contrast ratio combined with this background treatment. Any value below the 600-level (500, 400, 300, 200, 100) will not meet the minimum CCR requirement, and the use of these combinations should be avoided.

When moments in the user experience call for bringing more emphasis to the moment, then a darker value of of the color system can be used a background. These are more commonly going to be used as a 500 (Yellow 600) value. White text or 100-level color should be used.

The foreground text should use the 500 value when using a white background with the exclusion of yellow, which will require the use of yellow-600. This combination ensures that the color contrast ratio meets the 4.5:1 minimum. Any value below the 500-level (400, 300, 200, 100) will not meet the minimum CCR requirement, and the use of these combinations should be avoided.

When using a combination of neutral colors, not all combinations of colors will provide an accessible experience. The following graph represents the minimum color combinations expressed by the WCAG AA color contrast ratio and our established color palette.

Colors can also be used to convey information. For example, using red for error messages or green for success messages can help users understand your interface more quickly. Ultimately, accessible colors can help create a better experience for all users, regardless of their abilities.

However, color alone should not be used exclusively as an indicator for a user experience especially when an action or response from the user is required. To provide a more inclusive experience, additional information, such as supportive text, should be included.

For example, when expressing an error state on an input in a form, the input color should provide a visual indicator that the element needs attention. However, the color change should not be the sole indicator. The color change should be paired with supportive text that gives the user more information on how to recover from the error state.