TC Design
Are Telerik UI components WCAG AA compliant for colour contrast?
- Allison Batoff
Telerik UI components using our Internal theme have been tested for compliance with 1.4.3 Contrast (Minimum) Level AA. Some changes were made to notifications and badges to resolve contrast issues. Most components, as designed, meet minimum contrast requirements for text and icons.
Things to Watch Out For
Solid Dropdown List Component
The invalid and invalid focused states of the medium solid Drop Down List component do not have sufficient contrast between the error icon and the background due to the dark background colour.
If your application uses dropdowns that do not require validation, this style can be safely used. If your application uses dropdowns that do require validation, it is recommended to either use the medium outline dropdown list or medium flat dropdown list styles.
Grid Component
The grid component, as designed, does not have known contrast issues. However, there is the potential for an insufficient contrast error if links are used within the grid in combination with the functionality to select rows.
If teams come across this issue, let us know.
Similarly, the solid Drop Down List component does not have sufficient non-text contrast against default hover, alternate, alternate hover, or grid rows in a selected or selected hover state.
Colour Styles
The Telerik UI Kit for Figma provides many different colour styles. Sufficient contrast for these colour styles cannot be guaranteed as this is dependent on their context of use. Please use your judgement and test the contrast in context when using these styles.
Resources
Understanding Success Criterion 1.4.3: Contrast (Minimum) (w3.org)
Understanding Success Criterion 1.4.11: Non-text Contrast (w3.org)
TC Design