Color

Overview of Color

Color is a powerful communication instrument in every interface design. It allows you to activate the visual perceptions of the user and deliver a message at first sight.

Play with Colors

Discover how color changes an interface's look and feel with our interactive demo. Click the color button to adjust the primary hue and observe its immediate effect on key components. This live demo vividly demonstrates color's significant role in design, offering you a direct experience of its transformative power.

Basic Concepts

The color system concept of the Telerik and Kendo UI Default theme revolves around a carefully organized structure of Color Swatches. These swatches represent collections of colors that have been selected to perform specific functions in the user interface. Each color in the Color Swatch is drawn from a wider Color Palette to provide a harmonious and coherent visual language for the overall theme.

This approach allows for both aesthetic consistency and functional clarity. By systematically aligning colors with their intended use, the theme's color system creates a streamlined, intuitive design process that allows designers to create interfaces that are both visually appealing and user-centric.

Key Color Principles

The Telerik and Kendo UI design system endorses several basic principles related to color. These principles are mirrored in the Telerik and Kendo UI Default theme:

• Visual hierarchy and communication—Color supports the purpose of the content and indicates how elements relate to each other.
• Color for emphasis—Color attracts attention and highlights primary actions.
• Simple minimal palette—To avoid confusion and cognitive load, color is used sparingly.
• Colors have meaning—Colors carry a specific meaning based on how they function within the interface.
• Legibility and Readability—Text, icons, and other elements must meet the contrast minimums specified by the accessibility standards.

Implementation through Tokens

The Telerik and Kendo UI Default theme uses design tokens to manage color. Color design tokens allow you to give a name to a hard-coded color value and ensure flexibility and unity across the design system. You can apply design tokens to every color-related element such as background color, text color, border color, and so on. Using color design tokens enables you to scale every color change. For example, by changing the value of a color token, you update every element that uses the changed token, thus enabling you to apply changes globally.

For more information, see the Design Tokens page.

Color and Accessibility

While colors can bring a specific mood and set the conversational tone, you must also consider two other qualities of color, especially when creating an accessible design—contrast ratio and the ability to convey information accessibly.

Color Contrast

Color contrast is the difference between the brightness of the text or graphic and the brightness of the background color behind them. This difference is expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white). In the context of accessibility, the higher the contrast ratio, the more readable your content is for color-blind or visually impaired users.

Conveying Information with Color

To convey information in an accessible manner, never use color as the only visual means to indicate status, prompt a response, or distinguish a visual element. Many people see color differently and you risk that they don't recognize the specific function and meaning of a given color. To be accessible to everyone, your designs must be color-agnostic and always feature a backup communication mechanism:

• To deliver an error message, use symbols or icons along with colors.
• Add text labels to the messages.
• Choose the colors wisely and test them to verify that people with vision deficiencies can differentiate them.

For more information, see the Accessibility page.