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

ColorPicker Color Contrast Tool

The ColorPicker 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, utilize the gradientSettings option and set its 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 ColorPicker value and white.

The ColorPicker contrast tool is only available as part of the gradient view.

The following example demonstrates the color contrast tool in action.

Example
View Source
Change Theme:

In this article

Not finding the help you need?