[COLORBLINDNESS]: Buttons - CONSIDER adding a non-color element to differentiate primary from default

[1Copenut]

@1Copenut commented on Thu May 14 2020

508-defect-4

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Description

While auditing our design system, I discovered the default (blue) and primary action (green) buttons are the same tonal value for colorblind users who see in monochromacy or grayscale. We don't have good data for the number of users who this might affect, but it would be worth considering an icon or other non-color means to differentiate the two buttons. Screenshots attached below.

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

• [ ] Testers can differentiate primary buttons from default buttons using plugins like Colorblinding or ChromeLens when Monochromacy is selected.
• [ ] Create and/or modify unit tests for this component to include an aXe scan

Environment

• https://design.va.gov/components/buttons

WCAG or Vendor Guidance (optional)

• Use of Color: Understanding SC 1.4.1

Screenshots or Trace Logs

---

[rjohnson2011]

@GnatalieH Reaching out regarding this ticket relating to buttons as well. The issue is the view of default and primary buttons on monochrome displays. Do you have a recommendation on clearing up this accessibility visibility issue?

[GnatalieH]

@cvalarida and @bkjohnson, can you explain Default vs. Primary buttons? I only see Default, Wizard and Secondary buttons listed on the design.va.gov Buttons documentation. Looking at va.gov, however, I see the green button is used for things other than wizards, specifically as a sign-in call to action. What else is the green button used for?

I know this is an aside to the color issue at-hand, but the naming of the buttons in our documentation website seems confusing. Perhaps I can give a style recommendation for the green button if I can better understand its usage intent. Thanks!

[rjohnson2011]

Just checking in to see if there's any updates on this.

[GnatalieH]

@noahgelman Hi. Would you review this ticket and please provide feedback on how we can use a non-color element to differentiate our primary button style (solid green) from default and secondary button styles (default is solid blue and secondary is outlined)? This is an issue I haven't experienced before.

[pjhill]

@noahgelman Hi. Would you review this ticket and please provide feedback on how we can use a non-color element to differentiate our primary button style (solid green) from default and secondary button styles (default is solid blue and secondary is outlined)? This is an issue I haven't experienced before.

@noahgelman , when you get a chance, please provide some expertise as to how we can achieve WCAG compliance with regard to conveying meaning without color for these buttons.

[noahgelman]

@GnatalieH @rjohnson2011

The best way to visually differentiate between buttons for color blind is adding a consistent icon for each button to help the user tell them apart.

Another way is to have the color of the buttons have a color contrast ratio between of them of least 1:3.

Neither of those may be feasible for the buttons since the colors are locked in and they do a lot of different things so a consistent icon maybe be difficult to agree on.

The secondary is inverted which is a really nice way of telling it apart from the rest.

Between the Green and Blue (Default and Primary) there's not much else you can do besides the above suggestions.

[rjohnson2011]

@GnatalieH @rtwell Which of the approaches described above would you prefer?

[GnatalieH]

@rjohnson2011 I will ask Ryan about these today, as I was out on Friday and Monday. I believe we are going to be phasing out the green button, eventually, so this may be a moot point.

[rjohnson2011]

@GnatalieH Just checking in so I can close out this ticket.

[GnatalieH]

I just pinged Ryan and will let you know what he says, ASAP.

Update @rjohnson2011: From Ryan: "I think the focus should be purging the green button altogether and slimming down to a primary/secondary button + action link setup."

So can we close this ticket based on his feedback? The green button is being phased out. Thanks.

[rjohnson2011]

Thanks, sounds good to me, I'll close this out.