2.3 KiB
| title | page_title | description | slug | tags | published | position |
|---|---|---|---|---|---|---|
| Ocean Blue Accessibility Swatch | Default Ocean Blue Accessibility Swatch | Learn about the Default Ocean Blue Accessibility Swatch in the Telerik UI for Blazor suite. This is a theme color variation with enhanced accessibility that complies with accessibility standards. | themes-accessibility-swatch | telerik, blazor, accessibility, theme, swatch | True | 7 |
Ocean Blue Accessibility Swatch
The Web Content Accessibility Guidelines sections 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) define contrast ratios for accessibility compliance. The Default Ocean Blue A11y [theme swatch]({%slug themes-overview%}#basics) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least:
- 4.5:1 for normal text
- 3:1 for large text
Testing the Accessibility Swatch
To preview and test the Default Ocean Blue A11y swatch, visit the Telerik UI for Blazor live demos. Enable the swatch from the Change Theme dropdown above any of the examples.
The Default Ocean Blue A11y swatch is built on top of the Default Ocean Blue swatch. The main difference is that the Ocean Blue A11y swatch has high-contrast focus indicators to comply with WCAG requirements.
Using the Accessibility Swatch
You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overview%}#swatch) starting from the following component and theme versions:
Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) for more information about how to align Telerik UI for Blazor versions with theme versions.
An existing limitation is that the ColorPalette component fails WCAG success criterion 1.4.11. "Non-text contrast for the focus indicator on its items".
See Also
- [Accessibility Overview]({%slug accessibility-overview%})
- [Component Accessibility Compliance]({%slug accessibility-standards%}#accessibility-compliance-components-table)