Adjust a component to meet accessibility standards
Adjust a component to meet the Web Content Accessibility Guidelines (WCAG) 2.1. When you're editing a component in Theme Builder and see a warning symbol, that indicates that the component doesn't conform with the guidelines for color contrast.
Before you begin
Role required: ui_builder_admin
For information on granular roles, see Granular admin roles.
You can also watch a short video on how to fix accessibility errors.
[Omitted video] Description: Theme Builder Accessibility Inspector
About this task
When you're editing a component in Theme Builder, you may encounter a warning symbol (
Accessibility error\), which indicates that the component doesn't comply with the Web Content Accessibility Guidelines \(WCAG\) 2.1 for color contrast. The WCAG 2.1 contrast ratio that Theme Builder targets for content and UI variables is 3:1. This ratio determines the contrasts between brighter and darker screen colors and how they relate to the user interface. The first digit shows the level of bright colors, and the second digit shows the relative level of dark colors. The 3:1 threshold provides optimal visibility to visually challenged users. For more information, see the [W3C Recommendation site for WCAG 2.1](https://www.w3.org/TR/WCAG21/).
The total number of accessibility violations are indicated on the red numbered badge (
Accessibility inspector numbered badge.\) alongside the Accessibility inspector panel.
Procedure
- From the Editor page, access the accessibility violations in one of the two ways listed in the following table.
| Option | Description |
|---|---|
| From Accessibility inspector |
Note: The Component Editor page appears and the configurable style panel displays the editable hooks available for the selected component. |
| From the Component styles menu |
Image omitted: tb-editing-tab.png Component styles Editing tab.</p>
Image omitted: tb-accessibility.png Accessibility warning</p>
Image omitted: tb-accessibility-warning.png Description of accessibility warning.</p>
Note: The Component Editor page appears and the configurable style panel displays the editable hooks that are available for the selected component. |
- Select the accessibility warning symbol in the Component Editor to obtain more information for fixing the issue.
Accessibility warning
Select from the link in the warning to fix the contrast issue.
The color picker opens.
Note: You can select the Hide inaccessible choices slider within the color picker to limit the color choices to those colors identified as accessible, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Select the undo symbol to revert your changes back to the original color, if needed.
Undo color changes
When you complete your changes and the accessibility warning symbol is no longer visible, select Save changes.
For example, after you select a color that passes the contrast ratio violation, the warning symbol turns green in the color picker.