Skip to content

Accessible and delightful colors [Ui v2]

As a user, I want the colors to indicate the states of user interface elements so that I know what is happening and what I can do.

As a developer, I need the color palette to be maintainable and predictable.

Current situation:

We have had some omissions and some regressions with states not being indicated.

We have a stylesheet (colors.scss) which:

  1. defines the color palette (inherited from ui.funkwhale.audio)
  2. declares color shades for light and dark and for different situations
  3. applies these shades to elements with certain classes.

We have a utility module (color.ts) which turns props into classes automatically

Acceptance criteria:

  • All interactive elements that can be tabbed have focus-visible (so that people can interact without a mouse)

  • All interactive elements that can be autofocused show a focus indicator when focused (otherwise autofocus would make no sense)

  • All clickable elements have states for :hover and :active (while clicking) (to make using a mouse delightful)

  • All elements that can be turned on ([aria-pressed]) indicate their state through color

  • The colors follow a consistent semantics so that their function is easily recognizable:

  • one color used for indicating the single important thing on a page ("primary")

  • one color for indicating position (tab indicators, play-seek-bar)

  • one color for indicating choice (selection in a dropdown, [aria-pressed], toggle/switch)

  • one color for indicating links (alternatively: underline)

  • secondary and default no longer clash (in light mode)

  • All components have the correct color props applied

  • default for everything that is not interactive (this prop can be omitted unless used to overwrite an inherited class in the cascade)

  • primary for the single most important item on the page

  • raised for surfaces that are auxiliary to the main content (and usually volatile)

  • destructive for actions that delete data on the database

  • Color differenciations are realized with border, outline, background, text-decoration and color. We are using box-shadow only for decorative purposes because e.g. 4% of Windows users won't see any shadows because they have High Contrast mode turned on.

Edited by Flupsi (they)