High-Contrast Theme
In addition to providing WAI-ARIA and keyboard support, Kendo UI ships with a high-contrast theme that can be used to serve users with low vision or other visual disabilities, which require a high contrast ratio between foreground and background elements.
Overview
The high contrast theme is a full Kendo UI theme that you can use in place of an existing theme like BlueOpal or Metro. Assuming Kendo UI stylesheets are in a stylesheets directory, add a reference to the stylesheet in your application to use the high-contrast theme.
<link rel='stylesheet' href='/stylesheets/kendo.highcontrast.min.css' />
Once you add this reference, all Kendo UI widgets and visual elements with a Kendo UI class, such as k-textbox, will receive high-contrast styles. This may cause the rest of your site, for example, the background and other visual elements, to look out of sync with the new theme.
To address this issue, apply the high-contrast styles to all or part of a page by applying the k-content class to a container element. For example, to apply the high-contrast theme to your entire page, and not only to Kendo UI elements, apply this class to the body element:
<body class='k-content'>
<!-- your app here -->
</body>
WCAG 2.1
The Web Content Accessibility Guidelines sections 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced) state that to be compliant, text and images in a web page must adhere to minimum contrast ratios (with respect to their background elements). The Kendo UI High Contrast theme was tested by using an online color contrast checker which yielded the following results:
- Normal Text Color / Background = 15.9
- Selected Text Color / Background = 8.59
- Hover Text Color (Large Text) / Background = 5.94
The first two results exceed the enhanced minimum ratio of seven that is specified in WCAG 2.1 while the third result exceeds the enhanced minimum ratio of 4.5 for large-scale text. As such, the Kendo UI High Contrast theme is WCAG 2.1 AAA compliant.