Color

Color names are unambiguous and direct. "Blue" means blue. We do this to avoid unneeded abstractions. Extended color names, like black-300 are variations that, like font-weight values, denote increasingly darker (500, 600) and increasingly lighter shades (300, 200).

Accessibility is important for everyone, and it should not forgotten in the design process. 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.

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.