Color for UI

Contrast is a great way to differentiate elements on a page. However, by doing so to all elements, it can cause a cognitive overload for users. When there are a lot of competing elements, everything is vying for their attention, which can lead to nothing being dominant on the page.

When thinking about and applying contrast to a page through the use of color, it's important to limit the overall amount of contrast. This helps you as the designer to highlight only the most important parts of the page—the actions you want the users to focus on and take.

Having a neutral background (any color with low lightness or saturation) is a good base, because it allows you to add high contrast to the parts of the site where you want to direct a user's attention.

Similarly, a dark background with light colored text can be a reasonable alternative, depending on the assets like image or video, that you are displaying on the site.

On the other hand, a medium background is a little bit more tricky because it can be hard to create enough contrast and allow for clear visibility.

Contrast Constraints

Congratulations! You gained some knowledge on using color for UI design and how to ensure your websites are usable while remaining aesthetically pleasing.

Remember, the keys to designing for UI:

* Select a dominant brand color and supporting accent colors
* Use contrast to define sections and differentiate actions
* Use semantic colors for error and success messages
* Incorporate default colors for text and backgrounds where needed
* Neutral colors can provide good contrast
* Keep users in mind when selecting color

Following these guidelines allow you to create more elegant, engaging and beautiful websites!

Review

As a Visual UI designer, aesthetics are important to the overall user experience. However, if usability and aesthetics conflict, it's always best to err on the side of usability.

Testing and iteration are essential parts of the user-centered design process. Test early and test often is the motto of designers! No amount of design knowledge can replace putting your designs in front of users to gain appropriate and helpful feedback. 

As some users are different from others, gaining a better understanding of who you are building for will help in ensuring the color choices work. So it's important to understand that while you may fall in love with that shade of blue, you should be prepared to change your color choices based on the feedback you receive.

Diagram of the steps in the design process: research, define, develop, test, and then back to research again!

Iterations

Buttons are one type of element where accent colors can be used effectively. As these provide ways for the user to navigate, submit a form, or move onto the next task, the color of a button can determine a lot in the user's eyes.

In addition to selecting the right color for your buttons, there are different states a button has as the user interacts with them. These different states provide a visible signal to the user that an interaction is or is not possible. Two common states used are the **hover state** and the **disabled state**.

The hover state typically features a shade or tint of the accent color used for the buttons. This helps a user comprehend that something is happening as they scroll over top of an action.

As a designer, you must also consider how to communicate to your users that a button has been disabled and is no longer actionable. The disabled state implies that the button cannot be clicked, either because it's not an active button or the user must complete steps prior to the button activating. 

A good example is a user sign-in form. We can disable the button for signing in until the user has provided us a username or email and a valid password. 

Buttons

Space is an important aspect of creating balanced and harmonious layouts in web design. As a designer, it's important to understand how space can enhance as well as hurt your designs.

Whitespace, or negative space, refers to the emptiness between elements. It's not necessarily white in color, even though, that is sometimes the case. 

For example, you will notice that <a href="http://www.google.com" target="_blank">Google</a> embraces whitespace on its landing page. It focuses the user's attention solely on the primary action, which is searching for content.

Too much whitespace can negatively impact the flow of your site. By including too much spacing in-between elements, it can cause issues for users trying to navigate seamlessly through the content.

As a designer, don't fear using space to enhance the usability of your site and prioritize the most important content.

Whitespace

In addition to your brand and accent colors, you have to remember to provide additional indications to the user when something goes right or wrong.

People make mistakes. We're all human. So when designing user input elements, you must understand that errors will arise. When this happens, users should be alerted to understand where they went wrong. A common design pattern color used for this indicator is red. 

Red is also used to provide more emphasis for delete buttons. If the user wishes or is required to delete something, it should be abundantly clear that the delete action is different from a normal action.

On the other hand, when a user achieves their goal without issue or does something right, you should reward them! A good way to do that is through the use of green as a success message. Green is also often used for actions that entice the user to submit, move forward, or go.

Not all errors are caused by the user. Sometimes, the code just breaks! If an error occurs on the website and we need to notify the user, we should consider selecting a color that indicates the issue level and one that does not conflict with our action colors. A typical color for these warning situations is yellow.

The visual feedback you provide users with when they interact with your interface is incredibly important. It can help alleviate pain points some users might experience. 

Semantic Colors

Making sure that the colors you choose for your UI components are accessible is a really important aspect of visual design. 

Using contrasting colors will help users that need assistance understand and differentiate the content you have designed. 

However, many users can experience different types of color blindness:
* __red-green__, where users have a difficult time differentiating between the red and green colors.
* __blue-yellow__, where the blues tend to appear greener
* __monochromatic__, when users can’t see color at all.

To make your sites more accessible, try pairing another indicator along with color to convey information. Earlier, we mentioned using green as a success indicator and red as an error alert indicator. Consider using a label indicator such as a green check for success and a red “x” for error to ensure the user has a full understanding of the message. 

If you are having trouble deciding on an accessible color palette you can visit <a href="http://colorsafe.co/" target="_blank">Color Safe</a> which creates accessible color palettes for your site or app based on Web Content Accessibility Guidelines (WCAG). 

Already decided on colors? You can go to <a href="https://webaim.org/resources/contrastchecker/" target="_blank">WebAIM Color Contrast Checker</a> to test how your selected colors work with web usability.

As you can see in our example, we placed an icon next to the alert message to provide an additional visual cue for the user. 

Accessibility

It's important to consider how contrast will also be affected when using different colors for backgrounds and text.

Neutral colors, or hues with low lightness and/or saturation, make for good base colors as it allows you to add flourishes to the parts of the site where you want to direct the user's attention. 

For example, similar to using a dark gray with white text, you can use a darker shade of a color with light colored text. Using a medium shade or tint of a color can be difficult to achieve the same result, as the contrast is lower.

Neutral Colors

While brand colors typically dominate the makeup of a web site, accent colors are equally important. These supplementary hues provide small pops of color within your designs and can be used to draw the user's attention.

For instance, if you've selected a color scheme, one (or more) of the colors from your palette would be used as an accent color. This would allow you to apply these accent colors in various parts of your design to help the user decipher calls-to-action, which are an important part of guiding the user to achieve their goal.

Accent Colors

When diving deeper into the use of color in web design, there's more to creating a usable experience than just selecting beautiful, harmonious colors.

While aesthetics can enhance the display of your website, an important part of being a designer is ensuring your audience understands how to interact with your product and make effective decisions to solve their goals.

As you continue to grow as a designer, you'll begin to look at a site holistically through the eyes of a user. More importantly, when it comes to color, applying the right hues to actions and messaging that the user will perceive and act on will be a powerful tool to improve the UI of your site.

In this lesson, we'll explore

* How to use contrast to imply hierarchy on a page and draw a user's attention
* How to establish brand and accent colors and then how to properly apply them
* What states are necessary for buttons and forms
* How to properly provide feedback on error, success and warning messages
* How to use neutral colors to effectively communicate your content
* Why whitespace is important to the usability and aesthetic quality of your designs
* How to ensure your website is usable for all individuals

We will be applying the knowledge you learn during this lesson to update the wireframe to your right.

Please note that the browser view of the website has been scaled to fit the viewport's size. If you expand your browser view the site will change based on the viewing area.

Let's begin by talking about contrast constraints.

Introduction

Form inputs are another type of component that use color to indicate an action to a user. Similar to buttons, form inputs have certain states.

There is the default state, which is how the user views the inputs when they first arrive at a page. 

The second state is the selected, or active, state. These provide the user with a visual cue that they have highlighted the field and have the ability to type within it. This is typically achieved by using a border color or a box shadow effect. 

If the input field is unable to be edited or typed within, there should be a disabled state as well. This should render much like the disabled button, in that it is grayed out.

Inputs also have other colors that indicate success and failure. These are called semantic colors. 

Forms

A diagram of the grayscale color gradient with their hexadecimal color values.

Next, let's discuss default or structural colors. Almost every site you design will incorporate black, white, and shades of gray in some way. These default colors are used often as the color for text within your designs, as they provide plenty of contrast for reading and can fit into many other different color schemes.

When selecting the color of your text, it's important to ensure the contrast is high enough for the text to be legible. However, too much contrast can also be an issue.

Pure black on white can be hard on the user's eyes because of the stark contrast. Using a darker gray for text on a white background, or white text on a dark gray background, helps soften the feel while still providing clear enough contrast to be legible without issue.

Default Colors

Each company, whether it be an internet startup, a sports team, or a multinational clothing label, has a defined brand color. For instance, Facebook has its iconic blue, as does Twitter, while Coca-Cola features red as its primary color.

Just think about all of the brands you know and love and colors you associate with them. There's even a site, called <a href="https://brandcolors.net/" target="_blank">BrandColors</a>, dedicated to showing those for various companies.

When working on a design, it's essential to select and apply a brand color. This is a hue that should dominate your color palette. This brand color will account for roughly 60% of the color used on your site, and helps build a bridge between your product and the user's recognition of it.