DST Staging Review (Consider): Possible color contrast improvements

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

The details of this ticket are for consideration only. No Staging Review issue was found. High-priority: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

There are a few color combinations that meet WCAG AA requirements but might be able to meet AAA with a minor tweak. This isn't strictly necessary, but meeting those higher contrast standards is a definite nice-to-have.

change-file on :hover and :focus -- --vads-color-link on --vads-color-primary-lighter has a contrast ratio of 5.38:1
cancel and delete in the default state -- --vads-color-error on white has a contrast ratio of 4.52:1

Note that there's a bigger contrast issue for the :hover and :focus states for cancel and delete addressed in another ticket.

Recommended action

I think it's worth exploring some darker shades to see if you can get over 7:1. It looks like --vads-color-secondary-dark is tantalizingly close with a 6.98:1 ratio against white.

References

Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
WCAG Success Criteria: N/A
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

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