-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(common): Styling and Themes revamp (#2205)
* docs(common): Themes documentation revamp * docs(common): Themes revamp next * docs(common): Themes revamp continued * docs(common): Themes revamp continued * docs(common): Themes revamp continued * chore: replace URLs with slugs * docs(common): Themes revamp continued * docs(common): Themes revamp continued * fix slug * add more links to the color system * Update accessibility/accessibility-swatch.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update accessibility/accessibility-swatch.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update common-features/cdn.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update getting-started/vs-integration/upgrade-wizard.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update getting-started/vs-integration/upgrade-wizard.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/common-telerik-themes-libman.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/common-telerik-themes-libman.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update knowledge-base/common-telerik-themes-libman.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update styling-and-themes/theme-swatches.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * polishing * Update getting-started/vs-code-integration/new-project-wizard.md * fix slug * Improve Change Theme Runtime KB --------- Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
- Loading branch information
1 parent
b083d2e
commit 37a6cf4
Showing
60 changed files
with
896 additions
and
891 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,37 +1,41 @@ | ||
--- | ||
title: Ocean Blue Accessibility Swatches | ||
page_title: Ocean Blue Accessibility Swatches | ||
description: Ocean Blue Accessibility Swatches in the Telerik UI for Blazor suite. | ||
title: Ocean Blue Accessibility Swatch | ||
page_title: Default Ocean Blue Accessibility Swatch | ||
description: 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. | ||
slug: themes-accessibility-swatch | ||
tags: telerik,blazor,accessibility,swatch,theme,ocean,blue,default | ||
tags: telerik, blazor, accessibility, theme, swatch | ||
published: True | ||
position: 7 | ||
--- | ||
|
||
# Ocean Blue Accessibility Swatch | ||
|
||
The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define the required contrast ratio for compliance. The WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Telerik UI for Blazor library conforms to WCAG Level AA with the Default Ocean Blue theme swatch (available as of **3.2.0** version). | ||
The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define contrast ratios for accessibility compliance. The *Default Ocean Blue A11y* [theme swatch]({%slug themes-swatches%}) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least: | ||
|
||
You can test the accessibility swatch in our [live demos](https://demos.telerik.com/blazor-ui/grid/overview) - it is initially selected in the `Change Theme` menu. | ||
* 4.5:1 for normal text | ||
* 3:1 for large text | ||
|
||
# Default Ocean Blue Accessibility Swatch | ||
|
||
The Default Ocean Blue Accessibility Swatch is built on top of [Ocean Blue](#ocean-blue-accessibility-swatch). The difference is that it has contrast focus indicators and is compliant with WCAG requirements. | ||
## Testing the Accessibility Swatch | ||
|
||
You can test the accessibility swatch in our [live demos](https://demos.telerik.com/blazor-ui/grid/overview) - select the `Default Ocean Blue` option in the `Change Theme` dropdown menu. | ||
To preview and test the Default Ocean Blue A11y swatch, visit the [Telerik UI for Blazor live demos](https://demos.telerik.com/blazor-ui/grid/overview). Enable the swatch from the **Change Theme** dropdown above any of the examples. | ||
|
||
> **Limitations:** ColorPalette fails WCAG success criteria 1.4.11. - "Non-text contrast for the focus indicator on its items". | ||
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. | ||
|
||
Telerik UI for Blazor distributes the Default Ocean Blue theme and the Ocean Blue theme swatches via several resources. Read more in the [Swatch Distribution]({%slug themes-swatch-distribution%}) article. | ||
|
||
In addition, both themes are also available in: | ||
## Using the Accessibility Swatch | ||
|
||
You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-swatches%}#using-built-in-swatches) starting from the following component and theme versions: | ||
|
||
* [Telerik UI for Blazor version 4.0.1](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-4-0-1) | ||
* [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3) | ||
|
||
Check section [Theme Version Compatibility]({%slug themes-built-in%}#theme-version-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". | ||
* [Themes CDN]({%slug themes-swatches%}#built-in-themes-and-swatches-list) | ||
* [ThemeBuilder](https://themebuilderapp.telerik.com)—for testing and [color customization]({%slug themes-custom%}) | ||
* [kendo-themes repository](https://github.com/telerik/kendo-themes) | ||
|
||
## See Also | ||
|
||
* [Accessibility Overview]({%slug accessibility-overview%}) | ||
* [Accessibility Compliance Components Table]({%slug accessibility-standards%}#accessibility-compliance-components-table) | ||
* [Globalization Overview]({%slug globalization-overview%}) | ||
* [Accessibility Overview]({%slug accessibility-overview%}) | ||
* [Component Accessibility Compliance]({%slug accessibility-standards%}#accessibility-compliance-components-table) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.