As I promised last week, today I want to talk about the importance of color contrast with regards to buttons design.
Buttons are used for the purpose of introducing CTAs – Call-To-Action – placed strategically to entice our visitors to, well, take action.
Depending on the website’s objectives, CTAs should be designed to have a visitor complete a certain task, such as: subscribe to a list, sign up to a receive a newsletter, make a purchase, book a call, enroll in a course, try a product, learn more about a topic or service, join a community, etc.
In essence, CTA buttons are the invitations for the visitor to engage with the content of the website.
Getting the CTA buttons to effectively influence a visitor to take the desired action, is closely tied with the design and placement of the button.
The most important thing is Contrast.
I use a tool (that I absolutely LOVE) called Contrast Ratio. You enter the background and text colors of the buttons, and you get the ratio between the 2. For best readability the contrast ratio should be no lower than 4.0 but a higher number is preferable.
Let’s look at these examples:
This button’s background color is #145DA0, and the text color is #ffffff The resulting contrast ratio is 6.75 – excellent!
This button’s background color is #1f85e3, and the text color is #ffffff
The resulting contrast ratio is 3.8 – not bad, but not as effective as the button in example 1)
The button’s background color is #318fe5, and the text color is #bd081c
The resulting contrast ratio is 1.92 – yikes! No, no, and NO!
So as you can see, getting the contrast ratio as far as the button color and the CTA copy’s color right, will have a massive effect on the engagement and conversion of your visitor.
I will talk more about CTA’s placement and other factors of readability in future issues.
Others have seen what is and asked why. I have seen what could be and asked why not. ~ Pablo Picasso
The Business of Design 💼
If there’s one skill that is always useful, it’s creativity. This ability to think outside of traditional methods can help you find new answers to old questions and achieve greater success. However, it’s no natural skill – creative thinking is something that takes a little encouragement and brain training to succeed.
Tools of the Trade 🧰
Flaticon is a great resource for finding and implementing UI icons in “regular”, “bold”, and “solid” – all are vector based and ready to implement in websites and apps.
Another great resource for icons is The Noun Project – a huge collection icons suitable for any application.
Bookishly Smart 📚
I’ve seen a lot of interest in the foundations and principles of good UX.
Follow the real-life UX process from start-to-finish and apply the skills as you learn, or refresh your memory before the next meeting. UX for Beginners is perfect for non-designers who want to become designers, managers who teach UX, and programmers, salespeople, or marketers who want to learn more.