Imagine a user stuck with indecision when they encounter a pair of buttons on your interface. The user looks to the left one and then to the right one, comparing them. After doing some thinking, they make a selection. Their selection comes late and uncertain because your buttons lack hierarchy.
To establish a strong and clear hierarchy, avoid the following color contrast mistakes. They’re the most common mistakes designers make when pairing buttons. Use an online color calculator based on the Web Content Accessibility Guidelines (WCAG) color contrast formula to assess contrast levels.
Don’t use a same color outline button
Designers often like to use an outline shape of the primary button for the secondary one. The button styles may look different, but it’s not enough. They’ll still compete with each other because of their equal color contrast ratios.
To give the primary button more attention, weaken the outline button’s contrast level. Instead of using an accent color for it, use its shade. You can create the shade by reducing the brightness and saturation level of the accent color. Make sure the contrast is high enough to meet the acceptable level for legibility.
Don’t use a black secondary button
Another tendency of designers is to make the secondary button black. They think that by using a neutral color, it won’t compete. However, the black button is winning the battle because it has a much higher contrast ratio.
Instead of using black, use a tint of your accent color so that the secondary button is weaker than the primary. To do this, increase the brightness and decrease the saturation levels.
Don’t use a light accent color on a primary
Pairing a colored button with a neutral gray doesn’t always mean the colored one will get more attention. If a primary button’s accent is too light, the neutral secondary button will win out.
To prevent this mistake, choose an accent color that isn’t too bright. A bright accent color may look appealing, but it doesn’t contrast well with white backgrounds or text. Use a darker accent on the primary button so that the secondary can’t steal attention from it.
Access Full Article
Get access to the full article to learn how to pick the right color contrast for dark mode buttons. Your subscription gets you access to this article and all future articles.
Book
Affiliate
