Open DS

Accessibility

Five questions every design system answers about accessibility. These are Multi-brand’s answers, and each one points back to the reasons that chose it.

View all 4 accessibility tokens ↓

The reasons this scheme answers from

  • R1Business and productSells and converts, many
  • R2People and work contextCustomers who choose us, AA
  • R3Use scenariosAnywhere, on any device, a few minutes

Question 1

Which states get their own visible value?

  • Hover, focus, disabled
  • Those and pressed (chosen)
  • All, including loading

Why Multi-brand picks it: Pressed for touch.

becauseQ4

default2.75rem
compact2.25rem
disabled0.4
focus

Question 2

How many signals carry each meaning?

  • Two: color and word (chosen)
  • Three: color, icon and word

Why Multi-brand picks it: Brand colors vary, so meaning needs a word.

becauseR1

size2
opacity1
teal light1

Question 3

What contrast floor do we hold?

  • AA (chosen)
  • AAA for text

Why Multi-brand picks it: AA in every brand and mode.

becauseR2

  • AA
  • from size
  • from opacity
  • from color.teal.light

Decisions point at primitives, so the rule lives in one place.

Question 4

What is the smallest target?

  • Compact, for a pointer
  • Touch size (chosen)
  • Large

Why Multi-brand picks it: Customers sign up on phones.

becauseR3

  • default
    default
    → size.44
  • compact
    compact
    → size.36
  • disabled
    disabled
    → opacity.40
  • focus
    focus
    → color.teal.light.600· dark → color.teal.dark.700

Question 5

Where are the floors hardest to hold?

  • Dense tables
  • Long text
  • Forms
  • Brand color (chosen)

Why Multi-brand picks it: Brand colors must pass in every mode.

becauseR1

  • button · 2 keys
  • input · 2 keys
  • overlay · 1 keys

When to use

  • Keyboard focusUse: button/focus-ring (from the brand). Not: Removing the outline. Focus follows the brand but always shows.
  • The smallest clickable thingUse: size.control.default (touch). Not: A compact control. Customers are often on phones.

All accessibility tokens

4 tokens · each decision and the primitive it points to

  • size · 2size.442.75rem · 44pxsize.362.25rem · 36px
  • opacity · 1opacity.400.4
  • color.teal.light · 1color.teal.light.600#0F766E
  • Decisions · 4size.control.default{size.44}size.control.compact{size.36}opacity.disabled{opacity.40}color.border.focus{color.teal.light.600}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Accessibility in Multi-brand: touch size. Customers sign up on phones. Brand colors must pass in every mode.