Contrast in UI design
How to use this design principle
Why should you add contrast?
By making elements that are in close proximity to each other look different, you can:
- direct the viewer’s attention (e.g. to an error message)
- attach meaning to these things being different
- add visual interest
An example
By applying contrast, you can help users discover the primary action(s) more easily. It is useful to do a “squint test”: squint with your eyes (or apply a layer blur): what elements stand out? Primary actions should guide users to the next step of their user flow, while secondary actions should be less prominent.
Here is what happens if there is no clear distinction between the available actions (btw. sometimes it is the result of a deliberate design decision, sometimes the given choices are equally important):
Add enough contrast!
What is worse than no contract at all? Not enough contrast! Almost undistinguishable differences, e.g. almost the same colors, almost the same typefaces, shapes, font sizes and so on.
These almost the same elements create conflict, and make the user think: “is it a mistake”?
Here is an example: on the first card, the two serif typefaces are too similar. The primary and secondary action buttons’ colors are almost the same. Also, there is not enough contrast between the headline and the body text (font size, color).
The “twin” principles
Contrast and similarity are like twin brothers. If two elements are not in contrast, they are similar. If two elements are similar, they are not in contrast.
If two UI elements have different purposes or roles on a UI, make them look different, and vica versa. We assume that similar objects have the same function or role.
Scannability and contrast
Contrast makes your content more scannable (however, overdone contrast might cause eyestrain).
By applying contrast, you can
- create a meaningful visual hierarch
- highlight the most important parts (focal points)
- add a logical flow
It’s a good exercise to conduct 5-second tests: what does the participant notice first on your page (screen)? What are the most prominent elements?
Your toolbox: how to add contrast
Some examples:
- color — e.g. complementary; accent
- typography — e.g. small vs. big font size, different weights, serif vs. sans-serif
- layout — e.g. horizontal vs. vertical
- texture
- images, illustrations vs. textual content
- spacing, position (~using whitespace)
- shapes
- size
- orientation
Accessibility and contrast
One important aspect is that your content should be legible and readable, and theUI components should be easily discoverable. WCAG defined different conformance levels for their guidelines. The intent of these guidelines is “to provide enough contrast between text and its background so that it can be read by people with moderately low vision.”
Reaching level AA is the goal of many organizations, so here are the minimum contrast ratio values in case of level AA:
- Text: 4.5:1
- Large text: 3:1
- Decorative (“serving only an aesthetic purpose, providing no information, and having no functionality”) or inactive: no requirements
- UI components, states (exception: inactive), graphical objects (graphics required to understand the content): 3:1
Here you can see a color combination that barely passes the test: the contrast ratio in case of #757575 gray on a white background is 4.6:1
Two more closely related principles
Next to the already mentioned similarity, these gestalt principles are closely related to contrast:
- Figure-Ground: We try to separate the figure from the background, without contrast, it is hard to determine which is which
- Focal Points: By applying contrast and making an element look different, you can grab the viewer’s attention and define focal points that stand out.
A practice activity for you
Here are some examples from various pages. Notice how contrast is applied, e.g. how it helps establish borders between the different sections.
Recommended practice activity: get a sheet of paper, and list out the different ways contrast is applied on these pages.
Do you like my sketches? Support my work!
If you like my sketches, you can buy me a coffee to support my work! Thanks, I really appreciate your encouragement! 🙏
If you like my sketches, check out my Sketching for UX Designers course on Udemy, use the coupon code SKETCHFORUX202303 to get 86% off! Click here to apply the code.
Please feel free to join the Sketching for UX Designers group on Facebook, post your UX sketches, share your favorite links, ask questions etc.
You can subscribe to my Sketching for UX newsletter to get my UX Knowledge Base Sketches directly to your inbox each month. I also share my favorite design and visual thinking links.
Get my Sketching for UX Designers Workbook here for free (and you can choose to support me by paying a couple of dollars, I really appreciate your support!)
💬Please let me know what you think, I always appreciate you feedback!
