/All articles
Clear as Day, understanding the importance of contrast and opacity in design
May 08, 2024 · 5 minutes
Authors
- Izabela Łaszczuk
Authors
- Izabela Łaszczuk
Categories
Contrast
I think no one will be surprised if I say that when selecting colors for applications (if you haven’t seen my post about colors yet, you should definitely check it out first, here), you should pay attention to contrast. Although it can sound like a cliché, contrast is one of the most crucial aspects that holds significant importance for users.
Low contrast between text and background (pay special attention to background images) can hinder content readability. Eliminating such errors improves accessibility (link to article about accessibility comming soon) and also has a positive impact on the website's search engine optimization (as it is assessed by search engine bots, and they determine whether it's okay or not).
Low contrast between text and background (pay special attention to background images) can hinder content readability. Eliminating such errors improves accessibility (link to article about accessibility comming soon) and also has a positive impact on the website's search engine optimization (as it is assessed by search engine bots, and they determine whether it's okay or not).
Check your contrast
In an ideal world, designers provide polished mockups and verify contrast before handing them over to developers. However, this doesn't always happen, and when developers receive mockups, they should, in case of uncertainty, check whether the font colors have appropriate contrast against their background and ensure that button colors do not blend with label colors. If the contrast is too low, it should be reported to the designer, who will make the necessary adjustments.
Contrast can be checked, for example, here: https://webaim.org/resources/contrastchecker/
Here is an example of the results of both good and bad contrast.
Contrast can be checked, for example, here: https://webaim.org/resources/contrastchecker/
Here is an example of the results of both good and bad contrast.
Opacity
I think it will be best if we start with an example. Take a look at this:
I guess there is no point in me asking if you noticed anything wrong. Designers created a navbar with opacity intending it to be sticky. However, they didn’t anticipate the background changing colors as the page scrolls. This illustrates the trickiness of using opacity in design. Designers must remember that applying opacity can have unexpected consequences.
Opacity is a powerful tool in a designer's arsenal, allowing for the creation of translucent elements that add depth and sophistication to a design. However, its implementation requires careful consideration.
If you want your element to be lighter than the main color, for example, a button in a disabled state, use a variable with a lower value, so instead of orange-500, use orange-300.
Only add opacity if you want the button to be transparent, remembering that changing the background will also alter the button's color.
Keep in mind that opacity effects can also impact readability and accessibility. Make sure that after applying opacity, the contrast remains sufficient.
I guess there is no point in me asking if you noticed anything wrong. Designers created a navbar with opacity intending it to be sticky. However, they didn’t anticipate the background changing colors as the page scrolls. This illustrates the trickiness of using opacity in design. Designers must remember that applying opacity can have unexpected consequences.
Opacity is a powerful tool in a designer's arsenal, allowing for the creation of translucent elements that add depth and sophistication to a design. However, its implementation requires careful consideration.
If you want your element to be lighter than the main color, for example, a button in a disabled state, use a variable with a lower value, so instead of orange-500, use orange-300.
Only add opacity if you want the button to be transparent, remembering that changing the background will also alter the button's color.
Keep in mind that opacity effects can also impact readability and accessibility. Make sure that after applying opacity, the contrast remains sufficient.
Conclusion
The principles of contrast and opacity play pivotal roles in effective design, ensuring not only aesthetic appeal but also user accessibility and optimization for search engines. Striking the right balance ensures not only a visually appealing interface but also a design that is inclusive, accessible, and optimized for various digital environments.
Let the colors speak with clarity.
Happy coding/ happy designing!
Let the colors speak with clarity.
Happy coding/ happy designing!
To provide services at the highest level, we use cookies as described in our cookie policy. By using our website, cookies will be placed on your device. You can change your browser settings at any time. Check our cookie policy.