Contributed by Marc Alderman and Pradeep Kumar Karuppanan
Symptoms
Various scenarios report the failure of the color contrast test in user interface elements of Pega applications. This problem impedes compliance with Web Content Accessibility Guidelines (WCAG) and primarily affects application users who are color blind.
Scenario 1 Pega Platform operator avatars
One scenario, reported for Pega Platform™ versions 8.8.1, 8.6.4, 8.5.1, and 8.4.1, is that the color contrast test fails for operator avatars or icons, which are displayed in case comments, pulse notes, and other contexts.
Scenario 2 Pega Customer Service colors for Deadline and Passed Deadline
Another scenario, reported for Pega Customer Service™ version 8.6.4, is that the call timer color codes for Deadline and Passed Deadline fail the color contrast test.
Explanation
The colors of Pega Platform operator avatars are defined in the CSS Text file rule py-Avatar.css that is used in the UserWorkForm CSS. You can edit this Pega-provided rule in your application to set colors according to your business requirements. You specify the color on the first letter of the username in the Style class defined in format name-<first letter> from a-z . This Style class gives you full control over the different colors used. See the Scenario 1 Solution to learn how to modify the py-Avatar.css Text file rule in the application skin and change the color scheme for operator avatars or icons.
Pega Customer Service call timer colors did not meet the WCAG standard for high color contrast. See the Scenario 2 Solution for the documented Release Notes for the Pega Customer Relationship Management (CRM) suite of applications, versions 8.7.5 and 8.8.2.
Environments
The problem was reported in the following environments:
- Pega Platform version 8.8.1 on-premises
- Pega Platform version 8.6.4 on-premises
- Pega Platform version 8.5.1 on-premises
- Pega Platform version 8.4.1 on-premises
- Pega Customer Service version 8.6.4
Solutions
Choose the solution that matches your problem scenario.
Scenario 1 Solution for operator avatar high-contrast color
To apply a high-contrast color to the avatar of an operator, modify the py-Avatar.css Text file rule that is used by the UserWorkForm CSS, as shown in the following example.
In this example, the avatar for an operator with the username initials MO displays with inadequate color contrast and fails the WCAG color contrast test because the Text file rule py-Avatar.css specifies a low-contrast color Fill value:
.name-m circle {
fill: #9933aa;
}
Change the low-contrast color Fill value to red, a high-contrast color Fill value:
.name-m circle {
fill: red;
}
Scenario 2 Solution for Pega Customer Service call timer Deadline and Passed Deadline high-contrast colors
Best Practice: Update to the latest version of Pega Customer Service. See Keeping current with Pega.
For Pega Customer Service, the call timer issue is resolved in Pega CRM version 8.7.5 and version 8.8.2.
Go to Pega Customer Service 8.7.5 patch release notes and search the page for 783950. This is the Pega BUG ID that is the ISSUE ID.
Go to Pega Customer Service 8.8.2 patch release notes and search the page for 783838. This is the Pega BUG ID that is the ISSUE ID.
Related content
Web Accessibility Initiative
Pega Documentation
Custom configuration options for accessibility