Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AIP-38 | Add colorblind friendly color schemes #43054

Open
bbovenzi opened this issue Oct 15, 2024 · 9 comments
Open

AIP-38 | Add colorblind friendly color schemes #43054

bbovenzi opened this issue Oct 15, 2024 · 9 comments
Assignees
Labels
area:UI Related to UI/UX. For Frontend Developers.

Comments

@bbovenzi
Copy link
Contributor

bbovenzi commented Oct 15, 2024

We are starting to add status colors to the new UI. Before we build out too much we should make sure to think about a11y from the get go. A lot of status colors are hard for people (particularly red/green).

  • Update our theme to always use semantic names instead of colors (ex: "error" instead of "red", "success" instead of "green)

  • Decide to use a colorblind friendly color palette for everyone, or add a user setting to switch between common semantic colors and a friendlier palette

@bbovenzi bbovenzi converted this from a draft issue Oct 15, 2024
@bbovenzi bbovenzi self-assigned this Oct 15, 2024
@dosubot dosubot bot added the area:UI Related to UI/UX. For Frontend Developers. label Oct 15, 2024
@potiuk
Copy link
Member

potiuk commented Oct 15, 2024

❤️

@bbovenzi
Copy link
Contributor Author

bbovenzi commented Oct 17, 2024

We have 12 state colors right now, which is a lot, and leaves us with three options:

  1. Switch our state colors to an imperfect colorblind friendly palette for everyone. No need for settings but a lot of colors will really change: https://mk.bcgsc.ca/colorblind/palettes.mhtml#12-color-palette-for-colorbliness

Ex: Image

  1. Add a color-blind friendly mode to allow users to opt-in to a more accessible mode

  2. Use a better color blind friendly palette, but with fewer colors and the need to consolidate task states.
    With dag versioning, will we have Removed or just None or Skipped?
    Or can we move to a status/sub status model

In all scenarios, we should always try to depict state through other means than simply color.

@bbovenzi
Copy link
Contributor Author

Possible groupings with the same color but some indication that they're separate:

Pre run: queued, schedule, deferred
Re do: restarting, up_for_retry, up_for_reschedule
Nothing: no_status, skipped, removed, upstream_failed
Failed
Success
Running

@ashb
Copy link
Member

ashb commented Oct 17, 2024

I think queued and scheduled are distinct enough to need different colors.

And skipped /upstream_failedcould be the same colour, but I don't think no_status/null should be in the same grouping. One has never been, the other ran and failed. Removed I could se go in either side.

@shahar1
Copy link
Contributor

shahar1 commented Oct 17, 2024

3. Use a better color blind friendly palette, but with fewer colors and the need to consolidate task states.
With dag versioning, will we have Removed or just None or Skipped?
Or can we move to a status/sub status model

In general - great idea and kudos for making the UI more accessible for those in need!

My two cents regarding your suggestions:

  1. Not too bad, but some of the colors in the pallette are too similar:
    a. restarting - skipping
    b. deferred - removed
  2. In any case I'd make this transition optional for now (long term - maybe even user customized?).
  3. I think that I'd go with the first option rather than having less and too similar colors.
    If we go in the direction of less colors, maybe we could utilize other features like opacity/fill/shape?

+ Don't forget the dark mode :)

@bbovenzi
Copy link
Contributor Author

  1. With some user testing, the 12 color palette I linked didn't help much.

  2. I am definitely moving forward with a version of this. Looking at a hue rotation that let's a user shift the whole UI as they see fit: https://stackoverflow.com/questions/46553023/use-slider-to-change-image-css-filter-with-javascript/46553057#46553057

  3. I need to figure out which other changes can work well with colors. I definitely like the idea of visually separating tasks that are in pending or final states. Pending can be a circle while final is more square shaped or we can animate a gradient bg for pending states.

@potiuk
Copy link
Member

potiuk commented Oct 17, 2024

FYI Animation is also against guidelines for accessibility - we had issue about it #34019

@potiuk
Copy link
Member

potiuk commented Oct 17, 2024

We could also let the user pick their own colors for each state.

@bbovenzi
Copy link
Contributor Author

Yes, we do allow STATE_COLORS to be edited via settings but on a deployment, not a user basis. I don't think that should exist in the browser's localstorage either. It would be great to create actual user settings we save on the db which can also include other requests like "favorite_dags".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:UI Related to UI/UX. For Frontend Developers.
Projects
Development

No branches or pull requests

4 participants