Adjust a component to meet accessibility standards
-
- UpdatedAug 1, 2024
- 4 minutes to read
- Xanadu
- Navigation and UI
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 comply with the guidelines for color contrast.
Before you begin
Role required: admin
About this task
When you're editing a component in Theme Builder, you may encounter a warning symbol (), 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.
The total number of accessibility violations are indicated on the red numbered badge () alongside the Accessibility inspector panel.
Procedure