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.
The pairings that are always safe
Section titled “The pairings that are always safe”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 |
Three things that break a document
Section titled “Three things that break a document”- 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-smallat 14px;label/mediumat 12px is a label, never a sentence, and on a slide nothing is set under 15.
What is measured, and where
Section titled “What is measured, and where”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.