Principle 04 · Contrast
Contrast
Contrast is the visible difference between elements. It keeps text readable, separates surfaces, and helps important actions stand out while supporting information stays quieter.
Different contrast levels give text, surfaces, and actions distinct roles.
See the principle
Weak contrast. Effective contrast.
New workspace
Bring every project into focus.
Plan work, share decisions, and keep momentum visible in one calm workspace.
New workspace
Bring every project into focus.
Plan work, share decisions, and keep momentum visible in one calm workspace.
Nothing moved or changed size. Clear contrast roles made the content readable, the surface distinct, and the primary action easy to find.
Practice
Now give each element the right contrast.
Find the elements whose contrast feels wrong, then give each one the right visual role.
Interactive exercise
Fix the contrast.
Some elements are too weak. Others demand too much attention.
Selected
Nothing selected
Choose something in the design that you think needs fixing.
Complete
Contrast fixed ✓
Good contrast creates clear roles. Important actions stand out, supporting information stays quieter, and everything remains readable.
Compare
New workspace
Bring every project into focus.
The principle
Why contrast works
Contrast creates meaningful differences. It separates text from its background, distinguishes one surface from another, and directs attention toward important actions.
More contrast is not always better. Strong contrast should lead, while supporting information can remain quieter as long as it is still comfortable to read.
Continue learning
Next principle · 05
Balance
Distribute visual weight so a composition feels stable and intentional.
View all principles