Visual impairments can include low vision, color blindness, and completeblindness. Carbon components are designed to accommodate the entire spectrum ofvisual impairment, though designers still need to exercise diligence to ensurethat the components are used correctly.
- Color contrast
- Low vision
- Tools
- Resources
Color contrast
Carbon strives to meetWCAG AA standardsacross all standard themes in the system, including color contrast ratios.
| Element type | Contrast ratio |
|---|---|
| Standard text | 4.5:1 |
| Large text | 3:1 |
| UI components | 3:1 |
Standard text
Standard text and images of text must have a contrast ratio of at least4.5:1.
Large text
Large text (at least 24 px regular and light / 19 px semi-bold) must have acontrast ratio of 3:1.
Text against non-static backgrounds
When text is rendered on a gradient background or image, make sure the textcolor meets contrast standards in all places it appears. This is especiallyimportant for parallax applications or animations where text and backgrounds aremoving independently of each other.
Visual information used to indicate states and boundaries of UI components musthave a contrast ratio of 3:1 against adjacent colors. SeeIBM checkpoint 1.4.11 Non-text Contrast.
Use of color and color blindness
Don’t rely on color alone to convey meaning. This includes conveyinginformation, indicating an action, prompting the user for a response, ordistinguishing one visual element from another. When designing with color, itmight help to use a color-blind simulator to review visibility of content. Ifyou’re working in Figma, we recommend theStark plugin.
