New to Kendo UI for AngularStart a free 30-day trial

Ocean Blue A11y Accessibility Swatch

The 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) Web Content Accessibility Guidelines sections 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.

The Kendo UI for Angular library conforms to WCAG Level AA with the Default Ocean Blue A11y theme swatch coming with enabled contrast focus indicators, available as of version 6.0.1 of the Default Theme.

Setup

Kendo UI for Angular distributes the Default Ocean Blue A11y theme swatch with the @progress/kendo-theme-default package. If you don't need to apply any customization to the theme, reference the precompiled CSS directly from unpkg CDN:

html
<head>
    ...
    <!--This is an example link and 6.2.0 represents the version of the theme.
    It is recommended to use the latest version.-->
    <link
        rel="stylesheet"
        href="https://cdn.kendostatic.com/themes/6.2.0/default/default-ocean-blue-a11y.css"/>
</head>

To customize the provided accessibility swatch, install the Default theme and import the swatch styles directly:

jsx
// Import the Default theme accessibility swatch
import '@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss';

To test the Ocean Blue A11y accessibility swatch, select the option from the Change Theme menu available in all Kendo UI for Angular demos:

Ocean Blue A11y Accessibility Swatch

Known Limitations

The BottomNavigation and ColorPalette components do not meet the WCAG success criteria 1.4.11 Non-text contrast for the focus indicator on their items.

In this article
SetupKnown LimitationsSuggested Links
Not finding the help you need?
Contact Support