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.
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.
