New to Kendo UI for Angular? Start a free 30-day trial

ColorGradient Color Contrast Tool

The ColorGradient provides an option for displaying a color contrast tool, which checks the contrast ratio between two colors. It ensures that the selected color meets certain contrast requirements like AA or AAA. Color contrast between text and background is important on web pages as it affects the ability to perceive presented information.

The color contrast tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible. The WCAG standard defines two levels of contrast ratio regarding colors:

  • AA level (minimum contrast)—Requires a contrast ratio of at least 4.5 : 1 for normal text.
  • AAA level (enhanced contrast)—Requires a contrast ratio of at least 7 : 1 for normal text.

To enable the contrast tool, set the contrastTool property. It accepts string color values in rgba or HEX format, and represents the color that should be compared to the component value. For example, if contrastTool is set to #ffffff, the contrast will be measured between the current ColorGradient value and white.

The following example demonstrates the color contrast tool in action.

Example
View Source
Change Theme:

In this article

Not finding the help you need?