Briefle words · UI design
Contrast ratio
A number from 1:1 to 21:1 that measures how different the brightness of text is from its background.
Say it to an AI
Trial-ending warning banner inside the invoicing app. Use a pale amber tinted surface with dark amber/brown text and icon, and a deep amber button with white text. Every element must pass WCAG AA contrast ratio: 4.5:1 for text, 3:1 for the icon and button shape.
How an expert would brief the stronger version of “Trial warning banner”.
See it
Try it as a puzzle →In-app warning banner for an invoicing tool whose free trial is ending.
Why: A's body text (#6B4A0F on #FFF8E6) is about 8:1; B's (#C9B27E on the same cream) is under 2:1.
Related words
Room 4 · Color
Learn “Contrast ratio” in a five-minute lesson