Preview image. Unlock full-res
A grid of rounded tiles each showing an "AaBbCc" text-color-on-background-color pairing (White on Cobalt, Ecru on Inkwell, Cobalt on Ecru, and so on) that all pass accessibility.
Summary
An approved text-on-color reference: a grid of rounded tiles, each one a colored background with a text-color "AaBbCc" sample and a label naming the pairing, all of which pass accessibility for large text.
Visual description
Standard guideline layout on white. The left column holds "Color in Typography" and a paragraph noting every pairing shown passes accessibility for large text. The right is a 3-column grid of large rounded tiles. The top three rows are dark backgrounds (Cobalt, Deep Violet, Inkwell) each carrying White, Mist, and Ecru "AaBbCc" samples. The lower rows flip to light backgrounds (White, Ecru, Mist) carrying dark text colors (Inkwell, Deep Violet, Cobalt). Each tile has a small label in its top-left ("White on Cobalt", "Ecru on Inkwell", "Cobalt on Ecru", and so on) above a large "AaBbCc" specimen. Running header: "Typography / Color in Typography / 44".
Key takeaway
A single grid that pairs every approved text color with every approved background, each labeled and shown as a real specimen, gives designers a copy-ready palette of legible combinations. Splitting dark-ground and light-ground rows keeps the logic visible.
Reuse notes
A practical reference page for any brand or design system with a constrained palette. The "X on Y" labeled specimen tile is directly reusable. Pair with the contrast pass/fail matrix so designers know these are vetted, not just suggested.
From this deck: Color in typography pairing grid
View deck
