Skip to content

Accessibility

One reader in twelve cannot separate red from green, and every reader loses contrast on a projector in a lit room. Three habits cover nearly all of it, and none of them needs a designer.

Measured by the same instrument that gates the components. The floor is 4.5 for text under 24 px and 3.0 for text at 24 px and above — WCAG AA’s own line. The one exception is the red subtitle of a slide, at 2.83 on a card.

Text On Ratio Verdict
The ink the page 20.51 Safe at any size — the default, and the one to reach for
White the brand red 4.58 Safe at any size — a red panel with white text on it
The brand red the page 4.58 Safe at any size — red text on white. It passes, and it still reads as an alarm: use it for a word, not a paragraph
White the blue 8.86 Safe at any size — a blue panel with white text on it
The ink the yellow 12.65 Safe at any size — why text on yellow goes to ink and never to white
White the yellow 1.62 Do not use for text — the pairing the system refuses to make for you
  • Text on a photograph, with nothing behind it. A photograph has every value in it, so no text colour is safe on one. Put the text on a solid panel over the image, or darken the image under it.
  • Colour as the only signal. Green means good, red means bad is invisible to a reader who cannot separate them. Add the word, an arrow or a symbol — colour repeats the message, it never carries it alone.
  • Body text below 14 px, or Poppins Light at any size. The smallest a sentence goes is body/x-small at 14px; label/medium at 12px is a label, never a sentence, and on a slide nothing is set under 15.

Every text and surface pairing the system offers is measured on every commit — 63 promised pairs, each with a verdict, plus the focus ring and the keyboard behaviour of every component. The results, and the instruments that produce them, are on Accessibility. This page is the part that applies to a document; that one is the part that applies to a product.

Pepper UI v1.5.0

The Mobupps design system. 386 tokens, 88 components, 65 pages in the workshop — every page of this site generated from the repository, so nothing here is typed twice.