Open dqateam opened 11 months ago
For design consideration, should we accommodate color contrast with rating
, or does the outline of each item provide sufficient contrast and we can close the above? cc @ashetland @SkyeSeitz
Thanks, @geospatialem. Would like to explore a potential change to the yellow star color displayed for the average
prop.
During the exploration of this, we realised that the Read-only
property of this component is missing. We should explore adding it back as part of this ticket. Here's a design example of what it should look like.
Following the design exploration, we decided to update the global warning color used in the Rating component. The Warning token color has been adjusted, providing sufficient contrast with the Rating component.
Link fo Figma: https://www.figma.com/design/rkpMoRvtpYb9SD9dYHXg2i/%5BRating%5D-star-color-accessibility?node-id=547-8706&t=AEBuNETvNwMxHt82-4
We're aware that this is a global change hence we identified two potential risks associated with this change:
We looked at the components that are using the Warning color and found that there’s no immediate issues.
We also ran a few visual impairment contrast tests between the same components using the new warning color and the danger color and found that there’s no issues as well.
Example of Protanopia
cc @geospatialem,. @brittneytewks
cc @geospatialem, @brittneytewks
During the exploration of this, we realized that the
Read-only
property of this component is missing. We should explore adding it back as part of this ticket...
As mentioned above, in addition to updating the warning colors, can we also implement an updated read-only
styling to improve distinction? This change would use the star-f
icon with a border.1
fill to distinguish itself from the outlined star
used in the default state.
Violation:
Ensure parts of graphical objects essential for understanding content have sufficient contrast
WCAG Reference:
Severity:
5
Media Type:
Color and Contrast
Areas for Remediation:
Foreground: #EDD317 Background: #F8F8F8 Contrast ratio: 1.4:1
Examples include:
User Impact Users with low vision will have difficulty identifying this content.
Code Reference
Suggestion Ensure parts of graphical objects essential for understanding content have sufficient contrast. The required minimum contrast ratio is 3.00:1.
Common examples of qualifying objects include lines in a chart, meaningful icons, and annotations within an image.
Graphics that require particular presentation to preserve their meaning are exempt from this requirement.
To evaluate color contrast, see the Accessible Color Picker extension: https://www.accessibility.dev/
Additional Resources: