Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Color Contrast

In this lesson, we’ll talk about color contrast and why it is important not only for aesthetic purposes but overall accessibility for users with different vision abilities.

What is color contrast?

The word “contrast” simply means “difference”.

Contrasting colors are colors that differ from one another. Levels of contrast vary from high to low, depending on their position on the color wheel. For example, colors that are directly opposite one another on the color wheel have the highest contrast possible, while colors next to one another have a low contrast.

For example, red-orange and orange are colors that have low contrast; red and green are colors that have high contrast.

While many contrasting color schemes are interesting and sometimes even aesthetically pleasing to look at, contrasting colors serve an additional purpose: user accessibility.

Color contrast for the sake of accessibility

Color contrast is more than just an aesthetic; it’s also a necessity, especially on the web. The most important thing to remember here is that if you’re building a website, drafting a presentation, or designing an infographic, it is crucial that the information provided is accessible to everyone involved.

One of the best ways to do this is to ensure that the colors you are using in your design – graphic or web – have high contrast.

Contrast on the web

WCAG (Web Content Accessibility Guide) 2.0 provides specific guidelines to ensure that the color contrast between foreground (text, images, etc.) and background is appropriate by using a ratio. This ratio also varies based on the size and weight of text being used.

When we design for the web, it is extremely important to use a contrast checker such as this one from WebAIM or a plugin like Stark, which is available for most digital design programs, to check the color contrast ratio for text, graphic elements and user interface elements.

Many big design teams work with accessibility specialist who make further recommendations on what designers need to do in order to meet accessibility standards, but at the very least, designers should strive for color contrast to pass AA standard, which requires at least 4.5:1 contrast ratio for normal text against the background, or at least 3:1 for graphic elements and UI elements, which means everything else other than text.

You may see a AAA standard in your contrast checker. While it is great to pass AAA standards, it has a higher contrast ratio, which may not be feasible in every circumstance and can further limit design freedom. If AAA standard needs to be met per the recommendation of accessibility specialists working with your team, you may adjust it accordingly.

You may also see that large text has a lower contrast ratio requirement shown in contrast checkers. The minimum passing ratio for large text is 3:1. This is because large text always reads better even for users with lower visions. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Scroll to Top