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.