DST Staging Review: Insufficient color contrast on focus/hover states

shiragoodman commented 2 weeks ago

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Design System Staging Information

Component: Button Icon Staging Review ticket: Staging Review: Design System Button Icon Component

Findings details

VA.gov Experience Standard - issue: User can't perceive an element. VA.gov Experience Standard - category: Comprehension This is an issue with the: code High-priority: yes Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

In the Delete and Cancel button types, the --vads-color-error text color against the --vads-color-secondary-lightest background color has a contrast ratio of 3.59:1, which doesn't meet WCAG AA requirements.

Recommended action

A darker red on :hover and :focus should solve this. Changing the text color to --vads-color-secondary-dark for those states gets you to a 5.53:1 ratio and passes AA. Bump it up to --vads-color-secondary-darkest and you're at a 7.76:1 ratio that passes AAA.

References

Accessibility Defect Severity: 1: Critical. Must be fixed before launch.
WCAG Success Criteria: WCAG 1.4.3 Contrast (Minimum) - Level AA
Modality: N/A
Design System Pattern or Template: N/A
Design System Foundation: N/A
Content Style Guide: N/A
Context: N/A

Next Steps for DST

Close the ticket when the issue has been resolved or validated by your Product Owner
If your team has additional questions or needs Governance help validating the issue, please comment on the ticket
If this ticket has a high-priority label, please address as soon as possible so VFS teams are not impacted
If this ticket has a consider label, please consider for future implementation

caw310 commented 2 weeks ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

danbrady commented 2 weeks ago

There are difference in the colors that Figma has vs. code. However, as mentioned in the recommendations above, since some colors were so close to achieving AAA, I've tweaked them all slightly. Below are the Figma annotations or find them here:

cc: @briandeconinck

department-of-veterans-affairs / vets-design-system-documentation