Test Environment:
OS: Windows_11URL: https://demos.telerik.com/aspnet-ajax/calendar/overview/defaultcs.aspx
Tool: Accessibility Insight for web.
Repro Steps:
1. Open URL: https://demos.telerik.com/aspnet-ajax/calendar/overview/defaultcs.aspx page in Edge Browser.
2. Navigate to calendar under overview Section by using tab key.
3. Run Accessibility Insight tool.
4. Verify the bug.
Actual Behavior:
Ensures the contrast foreground and background colors doesn't meet WCAG 2AA contrast ratio thresholds.
Expected Behavior:
Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds.
Hi eDAD,
I hope you are doing well!
I am afraid that presently the Telerik UI for ASP.NET AJAX suite does not offer a skin that fully satisfies the sufficient color contrast requirement for WCAG 2.1 since this not only differs from the initial design of the respective skins but also would require a considerable redesign and introduction of breaking changes in the customers' projects.
Even the high-contrast swatch available in the Theme Builder app, which is developed with the idea of accessibility, does not satisfy this requirement.
The available approaches are:
<style>
.RadCalendar_Silk .rcTitlebar {
border-color: #cdcccc;
color: #0D707E;
background-color: #e3e3e3;
background-image: none !important;
}
.RadCalendar .rcOtherMonth a, .RadCalendar .rcOtherMonth span {
filter: alpha(opacity=1);
opacity: 1;
color: #0D707E;
background-color: #e3e3e3;
}
.RadCalendar_Silk .rcSelected a, .RadCalendar_Silk .rcSelected span {
color: #ffffff;
background-color: #0E8195;
background-image: none !important;
}
.RadCalendar_Silk th, .RadCalendar_Silk .rcWeek th {
color: #0D707E;
background-color: #e3e3e3;
}
</style>
<telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" Skin="Silk" Width="100%" EnableAriaSupport="true" EnableMultiSelect="false" EnableKeyboardNavigation="true"
ShowColumnHeaders="true" ShowDayCellToolTips="true" SelectedDate="08/10/2015" ShowRowHeaders="true" runat="server"
AutoPostBack="true">
<FastNavigationSettings EnableTodayButtonSelection="true">
</FastNavigationSettings>
</telerik:RadCalendar>
Regards,
Rumen
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.