Staging Review finding: Low contrast on `hover`

[shiragoodman]

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

Product Information

Team: Cartographers Product: MHV on VA.gov Feature: MHV Secondary Nav

Findings details

VA.gov Experience Standard - issue: User can't perceive an element. VA.gov Experience Standard - category: Comprehension Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

The hover state of each link meets WCAG minimum requirements --- but only just barely. The vads-color-primary-dark against 0.6 opacity white has a contrast ratio of 4.91:1, which meets WCAG AA's requirement of 4.5:1 but is well below the contrast at the default state (9.6:1).

Even though it meets WCAG AA requirements, I found the change in contrast to be noticeable and the text to be noticeably more difficult to read on hover. Even though it's technically accessible, I think it's a potential point of friction that could be smoothed out.

Link, screenshot or steps to recreate


Recommended action

From the testing artifact it sounds like this is something you worked on a bit already with Brea, but I'd recommend going back and trying a few more color combinations to see if you can find something with a little higher contrast. I would encourage you to aim for the AAA contrast requirement here, which is a 7:1 contrast ratio.

References

• Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
• WCAG Success Criteria: WCAG 1.4.6 Contrast (Enhanced) - Level AAA
• Modality: N/A
• Design System Component: 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 the VFS Team

• [ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
• [ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
• [ ] Close this ticket when the issue has been resolved or validated by your Product Owner.
• [ ]

Cartographers ACs

• Implemented improved contrast using Brea's suggestion:

  • I would recommend updating the color of the copy to: vads-color-primary-darker (hex #162e51). This raise the color contrast pretty close to the AAA requirement of 7:1 (it is coming back as 6.94 with a normal font weight). Since the copy is bold in the hover state, it comes back as passing AAA requirements.

• Corners of hover-state highlight stay rounded during fade-out when user moves away from hover state
• UX: Updated Figma component library to reflect changes
• Design review
• QA review

  
  ### Tasks

• [x] Implemented rounded corners for items AFTER the hover state.
• [x] Implemented improved contrast for items in hover state.
• [x] UX Updated Figma component library to reflect changes to hover state.

[brea11y]

I would recommend updating the color of the copy to: vads-color-primary-darker (hex #162e51). This raise the color contrast pretty close to the AAA requirement of 7:1 (it is coming back as 6.94 with a normal font weight). Since the copy is bold in the hover state, it comes back as passing AAA requirements.

[allanto-ah]

Verified the color change on hover and the rounded edges when moving away from hover state.