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 : 1for normal text. - AAA level (enhanced contrast)—Requires a contrast ratio of at least
7 : 1for 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.