Contrast Tool
The FlatColorPicker provides a Color Contrast Tool. It offers the capability for checking the color contrast ratio between two colors.
Color contrast between text and background is important on web pages. It affects some people’s ability to perceive the required information. The tool follows the WCAG recommendations for web accessibility.
According to the WCAG standard, there are two levels of contrast ratio:
- AA (minimum contrast)—The level AA requires a contrast ratio of at least 4.5:1 for normal text.
- AAA (enhanced contrast)—The level AAA requires a contrast ratio of at least 7:1 for normal text.
The example below demonstrates how to enable the contrast tool in the ColorPicker:
@(Html.Kendo().FlatColorPicker()
.Name("foreground-picker")
.Opacity(true)
.Value("#d13838ff")
.ContrastTool(c=>c.BackgroundColor("#ffffff"))
.Events(ev => ev.Change("foregroundSelect"))
)
@addTagHelper *, Kendo.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
string[] views = new string[] { "gradient" };
}
<kendo-flatcolorpicker name="foreground-picker" value="#d13838ff" on-change="foregroundSelect" opacity="true">
<contrast-tool background-color="#ffffff"/>
</kendo-flatcolorpicker>