Color contrast from an accessibility and legibility standpoint

Getting Started

We previously learned about the impact and usage of color in our introductory aritcle. We looked at how eye-catching visuals can improve the user experience and even convey emotions.

However, color can also be a source of frustration. Specifically, poor color contrast can make it difficult for users with visual impairments to read text, navigate websites, and interact with our content.

To ensure these aspects are properly met, we should have a basic understanding of how to implement proper color contrast effectively.

We'll also go over the industry guidelines, and provide some tips on choosing colors that meet accessibility and legibility standards.

Understanding Color Contrast

At its core, color contrast refers to the difference in lightness and darkness between colors. So, when we say "high contrast" we mean to explain the noticeable color difference between two colors. On the opposite end, a low contrast ratio means that the colors have a more similar tone.

We should make color contrast a concern mainly for two reasons: accessibility and legibility. Let's explain both.

First off, accessibility is an inclusive approach, focusing on providing unobstructed access and navigation to websites for users. We'll likely find it in context to users with physical impairments but it refers to everyone, regardless of their disability and socioeconomic situations. Moreover, legibility refers to the ease with which text can be read and understood.

So, where does color contrast fit into this?

Proper color contrast can elevate both, as it helps users distinguish between text and background colors, and better perceive and understand the contents of a web page.

For users with certain visual impairments, low contrast can make it difficult to distinguish between different elements, especially against busy or complex backgrounds.

Naturally, tackling these aspects can be somewhat complex, so the need for standardization is paramount.

WCAG Guidelines

We have The Web Content Accessibility Guidelines (WCAG) to rely on, for recommendations that make web content accessible to people with disabilities.

In terms of color contrast, the WCAG recommends a minimum contrast ratio of 4.5:1 for normal text we use in the body of content and 3:1 for larger text (at least 18 points or 14 points bold). In essence, this means that the color of the text must be significantly different from the background color to ensure that it is legible and accessible to everybody.

Remember hex codes? For instance, if we're using the black text #000000 on a white background #FFFFFF, we'll have a contrast ratio of 21:1, and meet the minimum requirements for both normal and large text.

Additionally, these guidelines give us other pointers for non-text elements, such as buttons, icons, and form fields. These elements should also have a contrast ratio of at least 3:1 against the background.

We should also note that WCAG ranks websites by three levels of conformance: A, AA, and AAA.

Level A: requires that a website is navigable using only a keyboard, without trapping users, and that videos have captions. No information should be conveyed solely through shape, size, or color.
Level AA: requires higher color contrast and alternative text for images, as well as straightforward navigation and clear headings.
Level AAA: requires almost black-on-white color contrast, sign language for videos, no timeouts, and the use of tooltips to explain content.

With this roadmap in our hands, a good goal we should try to achieve is AA levels, while considering AAA later on, since it has the most stringent accessibility requirements.

Minimum and Enhanced contrast guidlines

Tooling and Best Practices

Rest assured, we won't adjust to these requirements based solely on feel. As always, we can leverage tools and resources, such as online contrast checkers that usually have a browser extension counterpart. We can input our existing text and color choices, and they'll calculate the contrast ratio for us. Various other resources can help us quickly determine whether we meet outlying requirements for accessibility and legibility.

Ideally, we should include users that have certain color blindness conditions. Approximately 300 million people worldwide have some form of color blindness, so we need to ensure that the color choices are distinguishable enough.

We can tackle this in the defining phase of our visual strategy, and go for well-designed color palettes that introduce a high enough contrast while also maintaining a cohesive and visually appealing look and feel.

For clarity purposes, we'll provide multiple useful links for tooling in our useful resources below.

Final Thoughts

Color contrast can create a sense of hierarchy, draw attention to key elements, or evoke emotions. Color experimentation is welcomed, as long as we keep accessibility and legibility in mind, and stay up to date with WCAG's recommendations.

A large portion of annual disposable income is influenced by those with disabilities. Both businesses and individuals can look at this incentive to improve their web accessibility. But, we shouldn't only strive to meet business incentives. Ideally, everyone needs fair access to the vast landscape of online opportunities. After all, great user experiences are designed and developed with all users in mind.