Preview image. Unlock full-res
Sidebar-nav slide showing approved type-on-color pairings as a column of "Shockingly Simple." samples across yellow, black, and grey backgrounds.
Summary
The type-on-color page: approved text-and-background combinations shown as a stack of "Shockingly Simple." samples across the palette.
Visual description
A content slide with the dark sidebar (Typography highlighted yellow) and copy on combining colors legibly. The right side is a column of rounded sample bars, each setting the phrase "Shockingly Simple." in a different type-on-background pairing: black and grey text on Lightning Yellow; off-white and yellow text on Bolt Black; off-white and yellow text on Dark Grey; black text on Mid Grey; and black text on Light Grey. The grid pairs each background with one or two safe text colors.
Key takeaway
Documenting legible type-on-color combinations with the exact same sample phrase repeated across every background, so contrast and readability can be compared directly down the column without any other variable changing.
Reuse notes
A reusable type-on-color or color-pairing page. Holding the sample text constant across all backgrounds is the key technique. Pairs naturally with the palette page and the highlights page; useful for any brand with a small fixed palette.
