Adjust components to meet accessibility standards
When you are editing components in Theme Builder, you may encounter an error symbol (
) that indicates components are not within WCAG 2.1 compliance for color contrast.
Before you begin
Role required: admin
About this task
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. For those not familiar with the contrast ratio, the first digit shows the level of bright colors, and the second 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.
The total number of accessibility violations per component are indicated on the editing panel page.
Procedure
-
On the Component styles tab, select a component you are using that displays the accessibility warning symbol.
The configurable style panel displays the editable hooks available for the selected component. -
You can select the icon to view a description of the warning.
Figure 1. Accessibility warning -
As indicated in the warning message, you can select the pencil icon to improve the contrast issue.
Figure 2. Component Editor -
Select the accessibility warning symbol in the configurable style panel to obtain more information for fixing the issue.
-
Select either of the links in the warning to fix either the background fill color or the icon color.
Note:After you have saved changes to any of the color hooks, an undo symbol appears. Select the undo symbol to revert all of your changes back to the original color.
