New to Telerik UI for ASP.NET Core? Download free 30-day trial

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:

     .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"/>

See Also

In this article