FlatColorPicker Color Contrast Tool
The FlatColorPicker 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 FlatColorPicker value and white.
The FlatColorPicker contrast tool is only available as part of the gradient view.
The following example demonstrates the color contrast tool in action.