The chance is brand colors are chosen based on what looks most appealing on a logo, it doesn't consider UX that much. It's okay to pair the brand colors with other ones that have good UX aspects (contrast, accessibility, etc.), but make sure it still supports the aesthetic of your product.

You don't have to use Brand color for a button

<h2 data-selectable-paragraph="">Optimizing call-to-action buttons for all users</h2>Many apps use their brand color on their call-to-action buttons. Doing this may seem like a harmless act of branding, but it can actually hurt the user experience. Brand-colored buttons can lead to inaccessible text labels, button state conflicts, and a lower clickthrough rate.<h2 data-selectable-paragraph="">Inaccessible Text Labels</h2>Brand-colored buttons often have inaccessible text labels. Many brand colors are chosen without any consideration to accessibility. Instead, they’re chosen based on what looks most appealing on a logo. When that same brand color is applied to buttons, the text labels become difficult for visually impaired users to read.<figure><img alt="" src="https://miro.medium.com/max/500/0*pmd5ldW0JKBxM0c" width="642" height="210" srcset="https://miro.medium.com/max/640/0*pmd5ldW0JKBxM0cN.png 640w, https://miro.medium.com/max/720/0*pmd5ldW0JKBxM0cN.png 720w, https://miro.medium.com/max/750/0*pmd5ldW0JKBxM0cN.png 750w, https://miro.medium.com/max/786/0*pmd5ldW0JKBxM0cN.png 786w, https://miro.medium.com/max/828/0*pmd5ldW0JKBxM0cN.png 828w, https://miro.medium.com/max/1100/0*pmd5ldW0JKBxM0cN.png 1100w, https://miro.medium.com/max/1284/0*pmd5ldW0JKBxM0cN.png 1284w"></figure>If a brand’s primary color is orange, making call-to-action buttons orange would render the label inaccessible. For example, applying Home Depot’s orange to a button would give it a color contrast ratio of 3.0. The ratio for optimal accessibility is 4.5. This button color would cause issues for visually impaired users.<h2 data-selectable-paragraph="">Button State Conflicts</h2>Red is a special color on buttons because it’s used to signify a warning state. Buttons that have destructive actions for deleting data are red to warn users of potential danger.<figure><img alt="" src="https://miro.medium.com/max/500/0*IBA_tS-LiJ4nRFU" width="510" height="210" srcset="https://miro.medium.com/max/640/0*IBA_tS-LiJ4nRFUJ.png 640w, https://miro.medium.com/max/720/0*IBA_tS-LiJ4nRFUJ.png 720w, https://miro.medium.com/max/750/0*IBA_tS-LiJ4nRFUJ.png 750w, https://miro.medium.com/max/786/0*IBA_tS-LiJ4nRFUJ.png 786w, https://miro.medium.com/max/828/0*IBA_tS-LiJ4nRFUJ.png 828w, https://miro.medium.com/max/1100/0*IBA_tS-LiJ4nRFUJ.png 1100w, https://miro.medium.com/max/1020/0*IBA_tS-LiJ4nRFUJ.png 1020w"></figure>If your brand color is red, making your buttons the same color could conflict with any destructive actions on the interface. Users could click a dangerous action under the impression that it’s a regular action and delete data accidentally.Conversely, regular actions that are red could cause concern. Users might hesitate to click a red call-to-action button if they’ve already experienced a destructive action.<h2 data-selectable-paragraph="">Lower Clickthrough Rate</h2>The chances are that buttons aren’t the only element on your interface that use your brand color. If any other elements on the screen also use the brand color, users will scroll past your buttons.When you use your brand color everywhere, your buttons will have low contrast and fail to grab attention. Using a higher contrast color would help users find the buttons quicker and easier because the other elements aren’t competing.<figure><img alt="" src="https://miro.medium.com/max/500/0*fd71Cyatft1KcZi" width="420" height="420" srcset="https://miro.medium.com/max/640/0*fd71Cyatft1KcZiX.png 640w, https://miro.medium.com/max/720/0*fd71Cyatft1KcZiX.png 720w, https://miro.medium.com/max/750/0*fd71Cyatft1KcZiX.png 750w, https://miro.medium.com/max/786/0*fd71Cyatft1KcZiX.png 786w, https://miro.medium.com/max/828/0*fd71Cyatft1KcZiX.png 828w, https://miro.medium.com/max/1100/0*fd71Cyatft1KcZiX.png 1100w, https://miro.medium.com/max/840/0*fd71Cyatft1KcZiX.png 840w"></figure>If your buttons use any color other than blue, it isn’t getting as high of a clickthrough rate as possible. There are many reasons why blue buttons get the highest clickthrough rate.For one, it’s the color that users are most familiar with for click interactions. Blue has been the color for links since the web’s inception. When users see a blue button, they’re more inclined to click.Not only that, but blue is also associated with trust and dependability (<a href="https://www.colorpsychology.org/blue/" rel="noopener ugc nofollow" dir="ltr">source</a>). Clicking a button requires users to trust that it’ll take them to where they expect. Blue buttons can utilize color psychology to improve clickthrough rate.Blue buttons are also the most accessible to colorblind users (<a href="https://www.crazyegg.com/blog/why-hyperlinks-are-blue/" rel="noopener ugc nofollow" dir="ltr">source</a>). The most common form of colorblindness is red-green. Users with this color blindness cannot perceive green, red, orange, pink, or purple correctly. However, they still perceive blue as a shade of blue.<figure><img alt="" src="https://miro.medium.com/max/500/0*mnqvf6sqsgDURkH" width="600" height="540" srcset="https://miro.medium.com/max/640/0*mnqvf6sqsgDURkH5.png 640w, https://miro.medium.com/max/720/0*mnqvf6sqsgDURkH5.png 720w, https://miro.medium.com/max/750/0*mnqvf6sqsgDURkH5.png 750w, https://miro.medium.com/max/786/0*mnqvf6sqsgDURkH5.png 786w, https://miro.medium.com/max/828/0*mnqvf6sqsgDURkH5.png 828w, https://miro.medium.com/max/1100/0*mnqvf6sqsgDURkH5.png 1100w, https://miro.medium.com/max/1200/0*mnqvf6sqsgDURkH5.png 1200w"></figure>Here’s what users with protanopia and deuteranopia perceive when they look at different colored buttons. Notice how the blue button maintains a shade of blue while the other colors change.<h2 data-selectable-paragraph="">Shades of Blue for Your Brand</h2>If you want your buttons to be accessible with an optimal clickthrough rate, make them blue. There are different shades of blue you can choose from to complement your brand color.<figure><img alt="" src="https://miro.medium.com/max/500/0*GxOMbIDQO-jcXtx" width="480" height="180" srcset="https://miro.medium.com/max/640/0*GxOMbIDQO-jcXtxY.png 640w, https://miro.medium.com/max/720/0*GxOMbIDQO-jcXtxY.png 720w, https://miro.medium.com/max/750/0*GxOMbIDQO-jcXtxY.png 750w, https://miro.medium.com/max/786/0*GxOMbIDQO-jcXtxY.png 786w, https://miro.medium.com/max/828/0*GxOMbIDQO-jcXtxY.png 828w, https://miro.medium.com/max/1100/0*GxOMbIDQO-jcXtxY.png 1100w, https://miro.medium.com/max/960/0*GxOMbIDQO-jcXtxY.png 960w"></figure>The shades that work best on a light background are true blue, royal blue, indigo blue, navy blue, and turquoise blue. Lighter shades of blue such as aqua blue work better on dark backgrounds.No matter your brand color, you should always include a shade of blue in your color palette for buttons. There are other ways to integrate your brand color with the interface. Apply it to the elements that need highlighting, such as icons, active states, title text, illustrations, and badges.<figure><img alt="" src="https://miro.medium.com/max/500/0*lpBWobpONuzjcW8" width="480" height="360" srcset="https://miro.medium.com/max/640/0*lpBWobpONuzjcW8E.png 640w, https://miro.medium.com/max/720/0*lpBWobpONuzjcW8E.png 720w, https://miro.medium.com/max/750/0*lpBWobpONuzjcW8E.png 750w, https://miro.medium.com/max/786/0*lpBWobpONuzjcW8E.png 786w, https://miro.medium.com/max/828/0*lpBWobpONuzjcW8E.png 828w, https://miro.medium.com/max/1100/0*lpBWobpONuzjcW8E.png 1100w, https://miro.medium.com/max/960/0*lpBWobpONuzjcW8E.png 960w"></figure><h2 data-selectable-paragraph="">The Myth of Brand-Colored Buttons</h2>Many designers believe that brand-colored buttons are necessary for aesthetics. The truth is you do not have to use your brand color on your buttons to make your interface appealing. Using a different color on your buttons won’t hurt your brand image or aesthetics, but it will hurt the user experience.It’s okay to use your brand color for other interface elements, but call-to-action buttons are sacred. They’re the one element that needs a high level of clarity, accessibility, and interaction. Using brand-colored buttons is risky and suboptimal. Next time you’re designing buttons, think about the user experience before you think about branding.

Not every goddamn element in your app/website need to have brand colors in it.

Many apps use their brand color on their call-to-action buttons. Doing this may seem like a harmless act of branding, but it can actually hurt the user experience. Brand-colored buttons can lead to…

marketingandsales

Marketing & Sales

product

Product & Design

Optimizing call-to-action buttons for all users

Many apps use their brand color on their call-to-action buttons. Doing this may seem like a harmless act of branding, but it can actually hurt the user experience. Brand-colored buttons can lead to inaccessible text labels, button state conflicts, and a lower clickthrough rate.

Brand-colored buttons often have inaccessible text labels. Many brand colors are chosen without any consideration to accessibility. Instead, they’re chosen based on what looks most appealing on a logo. When that same brand color is applied to buttons, the text labels become difficult for visually impaired users to read.

If a brand’s primary color is orange, making call-to-action buttons orange would render the label inaccessible. For example, applying Home Depot’s orange to a button would give it a color contrast ratio of 3.0. The ratio for optimal accessibility is 4.5. This button color would cause issues for visually impaired users.

Red is a special color on buttons because it’s used to signify a warning state. Buttons that have destructive actions for deleting data are red to warn users of potential danger.

If your brand color is red, making your buttons the same color could conflict with any destructive actions on the interface. Users could click a dangerous action under the impression that it’s a regular action and delete data accidentally.

Conversely, regular actions that are red could cause concern. Users might hesitate to click a red call-to-action button if they’ve already experienced a destructive action.

The chances are that buttons aren’t the only element on your interface that use your brand color. If any other elements on the screen also use the brand color, users will scroll past your buttons.

When you use your brand color everywhere, your buttons will have low contrast and fail to grab attention. Using a higher contrast color would help users find the buttons quicker and easier because the other elements aren’t competing.

If your buttons use any color other than blue, it isn’t getting as high of a clickthrough rate as possible. There are many reasons why blue buttons get the highest clickthrough rate.

For one, it’s the color that users are most familiar with for click interactions. Blue has been the color for links since the web’s inception. When users see a blue button, they’re more inclined to click.

Not only that, but blue is also associated with trust and dependability (<a href="https://www.colorpsychology.org/blue/">source </a>). Clicking a button requires users to trust that it’ll take them to where they expect. Blue buttons can utilize color psychology to improve clickthrough rate.

Blue buttons are also the most accessible to colorblind users (<a href="https://www.crazyegg.com/blog/why-hyperlinks-are-blue/">source </a>). The most common form of colorblindness is red-green. Users with this color blindness cannot perceive green, red, orange, pink, or purple correctly. However, they still perceive blue as a shade of blue.

Here’s what users with protanopia and deuteranopia perceive when they look at different colored buttons. Notice how the blue button maintains a shade of blue while the other colors change.

If you want your buttons to be accessible with an optimal clickthrough rate, make them blue. There are different shades of blue you can choose from to complement your brand color.

The shades that work best on a light background are true blue, royal blue, indigo blue, navy blue, and turquoise blue. Lighter shades of blue such as aqua blue work better on dark backgrounds.

No matter your brand color, you should always include a shade of blue in your color palette for buttons. There are other ways to integrate your brand color with the interface. Apply it to the elements that need highlighting, such as icons, active states, title text, illustrations, and badges.

Many designers believe that brand-colored buttons are necessary for aesthetics. The truth is you do not have to use your brand color on your buttons to make your interface appealing. Using a different color on your buttons won’t hurt your brand image or aesthetics, but it will hurt the user experience.

It’s okay to use your brand color for other interface elements, but call-to-action buttons are sacred. They’re the one element that needs a high level of clarity, accessibility, and interaction. Using brand-colored buttons is risky and suboptimal. Next time you’re designing buttons, think about the user experience before you think about branding.

Color for a button

You don't have to use Brand color for a button

Idham 's ideas are part of this journey:

Related collections

Similar ideas