Document published status icons inaccessible to people with color vision deficiencies

[echocrow]

Describe the bug

The Studio (specifically the Structure tool) displays alongside each document small, circular status icons, indicating whether the document has a published and/or draft version. These only vary by color, specifically green and orange, and are otherwise identical in shape and size.

To people without color deficiencies, this looks something like this:

However, to people with e.g. Deuteranomaly or Protanopia, these status icons are nearly indistinguishable:

As a result, it's very hard to tell in a list docs which document was published or only exists as draft.
The same is true in low contrast situations regardless of color deficiencies – e.g. while on a phone in a bright environment.

To Reproduce

Steps to reproduce the behavior:

1. Go to Sanity Studio
2. Open the Structure tool
3. Navigate to any list of documents
4. In e.g. Chrome Dev Tools, enable a vision deficiency
   1. Specifically in Chrome, navigate to "Rendering"
   2. Under "Emulate vision deficiencies" select e.g. "Deuteranomaly"
5. Try to differentiate between published and draft documents.

Which versions of Sanity are you using?

@sanity/cli (global)  4.19.0 (up to date)
@sanity/icons          3.7.4 (up to date)
@sanity/ui            3.1.11 (up to date)
@sanity/vision        4.19.0 (up to date)
sanity                4.19.0 (up to date)

What operating system are you using?

n/a

Which versions of Node.js / npm are you running?

n/a

Additional context

The minimal look of the current status icons is nice, but sadly inaccessible in a few scenarios.

In our case, one of our marketing and content managers has Deuteranomaly and particularly in Sanity Studio is regularly struggling to keep an overview of draft vs published documents.

Not an accessibility expert, but some potential solutions may include:

• Use different shapes for published vs draft icons
  • This would be a change in the minimal UI, but would improve accessibility for all scenarios.
• Add an account-level option to alter the UI, such as using shapes instead/in addition to colors, or selecting a different color palette.
  • Less preferred, as it requires discovery and personalized settings to address this for some users, and does not help in scenarios with temporary impairments (e.g. low perceived contrast)

[bjoerge]

Thank you for this @echocrow, really good feedback. Added to our list of things to address.