Skip to main contentCarbon Design System

Accessibility

Visual impairments can include low vision, color blindness, and complete blindness. Carbon components are designed to accommodate the entire spectrum of visual impairment, though designers still need to exercise diligence to ensure that the components are used correctly.

Color contrast

Carbon strives to meet WCAG AA standards across all standard themes in the system, including color contrast ratios.

Element typeContrast ratio
Standard text4.5:1
Large text3:1
UI components3:1

Standard text

Standard text and images of text must have a contrast ratio of at least 4.5:1.

Large text

Large text (at least 24 px regular and light / 19 px semi-bold) must have a contrast ratio of 3:1.

Text against non-static backgrounds

When text is rendered on a gradient background or image, make sure the text color meets contrast standards in all places it appears. This is especially important for parallax applications or animations where text and backgrounds are moving independently of each other.

Visual information used to indicate states and boundaries of UI components must have a contrast ratio of 3:1 against adjacent colors. See IBM checkpoint 1.4.11 Non-text Contrast.

Use of color and color blindness

Don’t rely on color alone to convey meaning. This includes conveying information, indicating an action, prompting the user for a response, or distinguishing one visual element from another. When designing with color, it might help to use a color-blind simulator to review visibility of content. If you’re working in Figma, we recommend the Stark plugin.

rainbow palette showing relationship between colors for users with color blindness

Tools

Resources