Color contrast is one of the most underrated terms in user experience. An experienced graphic designer will consider contrast between 2 colors as a top priority, as web developers who build sites with accessibility in mind.

What is Color Contrast?

In simple terms, it's the difference in brightness between the background and foreground of an element. Whether it is a page, button, or text, there should be sufficient contrast. This particularly helps users with low vision to identify text.

Contrast and Accessibility

Sufficient contrast between text and its background is key for accessibility. Most accessibility testing tools will have low contrast as a violation of accessibility guidelines. In addition, accessibility guidelines recommend a 4.5:1 ratio between the color of text and the background color. Below are two examples of color contrast:

See how the button on the left, the text is hard to read. This would be very challenging for a user with low vision to see the text. Also, compare it with the image on the right, the text is more readable and passes the contrast test.

WebAIM created a great tool for checking contrast between the foreground (text, links) and the background. It also provides the contrast ratio between these colors; and even shows a preview along with how it passes, or fails the Web Content Accessibility Guidelines (WCAG) tests.

Brands Color Design

Some brands have already established their colors; which may present a challenge for designers to work around these specifications, if the colors do not have enough contrast. Finding other complementary colors to use for elements such as navigation and buttons; that will support the original brand colors is an option.

Contrast and User Experience

In terms of user experience, in general, contrast is something that could either deter, or attract users to your site. Even if they don't have low vision, having a black background with a medium gray text would be hard to read, and not user-friendly.

In conclusion, color contrast is a definitive factor when it comes to user experience; it can determine if the user will be able to enjoy reading what you offer, or simply leaving the site and finding a better website to provide the details they are looking for, where they can read clearly. This is why great contrast is key!