Content switcher carries the same visual weight as the primary button.

[noah-kawashbarnes]

The content switcher’s visual weight equals that of the primary button, dividing the user’s attention and preventing them from easily identifying the primary action on the page.

Detailed Description

The current design uses high contrast to help the user distinguish which of the content switcher options are selected, but in many cases this contrast makes the content switcher appear too prominently on the page, or it directly conflicts with the primary button component. Overcoming this issue is difficult as concept itself relies on contrast to make the selected option obvious to the user. To add to this difficulty, accessibility concerns have also been raised in regard to the contrast between the content switcher’s unselected items, and the theme backgrounds.

A proposed solution is to provide a second content switcher option, which would have a lower visual weight than the original design, but still retains enough contrast to meet WCAG requirements and provide the user with an easily identifiable ‘selected’ state.

All of the following designs have been tested against the accessibility concerns raised here and are compliant with WCAG contrast regulations. These designs have also been tested to ensure they are as usable as the current design, and that users are able to easily identify which item is selected, even when using the 2-option variant.

White Theme

Grey 10 Theme

Grey 90 Theme

Grey 100 Theme

[dakahn]

@carbon-design-system/design proposal to lower the contrast of the content switchers selected...switch so it doesn't have the same visual weight as a call to action button (for example)

We can track any accessibility issues with the Content Switcher Component in #6745 and we can discuss visual weight concerns in this issue.

[aagonzales]

Some ideas from Mitchell. They have not been vetted for contrast accessibility just posting for posterity.

[aagonzales]

I'm actually liking this direction, especially in context (see comment above).

[aagonzales]

Other ideas I had

[noah-kawashbarnes]

@aagonzales With a small tweak to the borders that approach should comply with contrast accessibility rules. I went ahead and mocked it up with the necessary borders and threw in a few alternatives here: https://ibm.invisionapp.com/share/MHO16NYFBPK#/screens/319971991?browse

[joshblack]

Great article in this space https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57 👀

[noah-kawashbarnes]

Link to the updated designs and completed sketch symbols: https://ibm.box.com/s/0tfwkywn8a4ym8zv2vt82d9qitagx2oq

[kingtraceyj]

PLG teams using subtle content switcher:

NS1:

Instana:

[mjabbink]

@aagonzales I like what you and Mitchell have sketched out.