---
path: foundation/color/usage
title: Usage
position: 4
seo_title: Color Usage in the Telerik and Kendo UI Design System
seo_description: Get acquainted with the usage recommendations for color and
  learn what are the basic principles that will allow you to improve the user
  experience when working with the Telerik and Kendo UI Design System.
---

## Usage Guidelines

The application of color is a vital part of every digital product and interface. When used in a meaningful and consistent way, color reinforces the content hierarchy and keeps the cognitive load low.

This article describes several basic principles that will allow you to improve the user experience.

### Emphasizing Primary Actions

Color, as one of the most powerful tools, allows you to draw the user's attention and increase usability. The use of accent or primary color serves to emphasize the main call to action.

<DosDonts>
<Do description="Use color to emphasize primary actions.">![](images/foundation-color-usage-emphasize-do.png "Using the primary color to emphasize actions as recommended by the Telerik and Kendo UI Design System")</Do>
<Dont description="Avoid using secondary colors on primary action buttons.">![](images/foundation-color-usage-emphasize-dont.png "Incorrect usage of secondary colors on primary action buttons against the recommendations in the Telerik and Kendo UI Design System")</Dont>
</DosDonts>

### Providing Sufficient Contrast

Contrast is the difference in lightness between two color values. Provide sufficient contrast to improve readability and to ensure that meaning is not lost for color-blind users. According to [WCAG AA contrast minimums](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), the calculated [contrast ratio](https://www.w3.org/TR/WCAG20/#contrast-ratiodef) between the text and the background layer must be:

- At least 4.5:1 for normal text (less than 18 pts; less than 14 pts bold).
- At least 3:1 for large text (more than 18 pts; more than 14 pts bold).

<DosDonts>
<Do description="For text, icons, illustrations, and backgrounds use color tones that provide sufficient contrast.">![](images/foundation-color-usage-contrast-do.png "Using color tones with sufficient contrast as recommended by the Telerik and Kendo UI Design System")</Do>
<Dont description="For text, icons, illustrations, and backgrounds, avoid using color tones that do not provide sufficient contrast.">![](images/foundation-color-usage-contrast-dont.png "Using color tones with insufficient contrast against the recommendations of the Telerik and Kendo UI Design System")</Dont>
</DosDonts>

### Conveying Meaning

Color can never be the only way to identify statuses or convey meaning. Some color-blind people, for example, cannot tell the difference between certain color combinations. Along with color, always utilize additional means of identification, such as visible text, underlines, borders for visible focus styles, and icons that correspond to the content.

<DosDonts>
<Do description="Use semantic colors accompanied by text and icons to convey meaning more effectively.">![](images/foundation-color-usage-meaning-do.png "Using semantic colors accompanied by text and icons as recommended by the Telerik and Kendo UI Design System")</Do>
<Dont description="Avoid using colors as the only way to convey information.">![](images/foundation-color-usage-meaning-dont.png "Incorrect usage of colors as the only way to conveying information against the recommendations of the Telerik and Kendo UI Design System")</Dont>
</DosDonts>