Briefle words · UI design
Background contrast
Also called surface contrast
The small difference in lightness between a page and the containers on it that lets you see where each container ends.
Say it to an AI
Itinerary with a light grey page and white booking cards on top, so the surfaces separate through background contrast. Give each card a hairline border and a barely-there shadow for elevation; don't rely on white-on-white.
How an expert would brief the stronger version of “Trip itinerary”.
See it
Try it as a puzzle →Upcoming trip overview in a travel booking app, light mode.
Why: A's white cards on #F1F5F9 grey are just different enough to show their edges; B's white on white shows none.
Related words
Room 4 · Color
Learn “Background contrast” in a five-minute lesson