<blog>
Color Contrast for an Accessible Web

Image credit: Original image

Originally appeared in LinkedIn AccessABILITY

Color is a significant component. Really, I could just stop there. But I won’t. For my purposes I want to talk about how color is a significant component in design. It's a silent influencer that shapes our experiences. We frequently make snap decisions based on color. Consider traffic lights: red signifies stop green indicates go, and yellow warns us to prepare to stop. Those of us in marketing also leverage the influence of color. In fact, some studies suggest that color can impact up to 80% of a purchasing decision. The red on a sale sign or the soothing blue of a cleaning product all influence us in subtle ways.

When we think about web design, color can improve aesthetic appeal, but also have significant effects on usability and accessibility. Understanding this now, we know that a large number of people have trouble recognizing or discerning colors. People with reduced sight frequently have restricted color vision, and many older users simply can't perceive color very well. Not to mention, users with limited-color vision or that use monochrome screens and browsers will be unable to view and understand information given in color alone. In fact, according to WCAG 2.2 success criterion 1.4.1 “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

Color Contrast

When it comes to digital accessibility, or accessibility in general, one of the most crucial aspects is ensuring sufficient color contrast between text and background elements. Poor color contrast can make it incredibly challenging for individuals with visual impairments, such as color blindness, low vision, age-related vision loss, or other vision-related disabilities, to perceive and comprehend the content.

Contrast is the difference in brightness between two colors. A good technique to appreciate contrast is to compare colors of the same tone (e.g., grayscale). The difference between them decreases as they get closer.

The Impact of Insufficient Color Contrast

Have you ever visited a website that looked more like an experiment in modern art gone wrong than a user-friendly design? Or even tried to read content packaging with conflicting, low-contrast colors, making it difficult to discern the content or meaning. Simply text that seems to melt into the background, or website buttons camouflaged within a confusing color scheme. Focusing on digital experiences, when it comes to website visitors, this frustrating experience isn't an artistic choice, but a daily reality due to visual impairments.

Inadequate color contrast can pose significant barriers to accessibility and usability. Low contrast between text and its background can make the content difficult or even impossible to read for users with visual impairments. Similarly, low contrast between user interface (UI) elements, such as buttons, links, and icons, can make them challenging to distinguish, leading to navigation and interaction issues.

Imagine trying to read a website with light gray text on a white background or attempting to locate a faint blue link on a dark blue background. Or in a recent scenario of my own, white text on the light orange label of my summer sausage. These examples are merely provided to show you how poor color contrast can adversely affect user’s ability to effectively access and use content.

Meeting WCAG Guidelines

In one of my previous posts “WCAG Principles, Guidelines, and Success Criteria”, I took a closer look at the details of Web Content Accessibility Guidelines (WCAG). To ensure that websites and digital interfaces are accessible to individuals with visual impairments, it's essential to follow established accessibility guidelines. The WCAG, developed by the World Wide Web Consortium (W3C), provide specific recommendations for color contrast ratios.

According to WCAG 2.2 success criterion 1.4.3 we should focus on minimum contrast levels and doing what we can to meet or exceed these requirements. There are different requirements based on the size of text as well. For small text, or text that is smaller than 18pt (approximately 24 pixels) or 14pt bold (about 19 pixels), a contrast ratio of 4.5:1 is required to pass level AA and a contrast ratio of 7:1 to pass level AAA. For large text, or text that is at least 18pt or 14pt bold, a contrast ratio of 3:1 is required to pass level AA level and a contrast of 4.5:1 to pass level AAA. Additional considerations can be made for buttons and links that contain text. In these instances, the same contrast rule applies in all of their states (default, hover, focus, etc.). If they don't have a background color, we can use the closest background color to calculate text contrast.

While text contrast is a critical element of accessibility, it's important to consider the role of non-text elements as well. Icons and graphical elements all play a large part in website navigation and user interaction. WCAG acknowledges that, so when we consider non-text content, WCAG 2.2 success criterion 1.4.11 says that user interface components need to have a contrast of at least 3:1 against adjacent background colors. This is meant to ensure that user interface components convey their meaning clearly.

Testing and Evaluating Color Contrast

To ensure that your website or digital content meets the WCAG color contrast guidelines, it's best to test and evaluate the colors being used throughout the design process before ever reaching the development phase. Today there are several tools available to test color contrast, including WebAIM's Contrast Checker, Contrast.tools or various options within DevTools (including plugins) to measure the contrast between text and background colors.

If the contrast ratio falls short, you can adjust the colors by darkening text or lightening backgrounds, and retest to confirm compliance. In fact, there are some great websites that can help to adjust colors for you like the Contrast Finder, or sites that help to create accessible color schemes like Colorsafe.co and the Accessible Color Palette Generator. When adjusting and testing your contrast, pay special attention to elements with gradients, background images, or transparency, as these can affect contrast and may need additional focus on your part to ensure that they meet the minimum requirements.

Some automated tools for checking color contrast on the web are available, some free and some paid. Examples of these tools include the Wave Evaluation Tool, axe DevTools by Deque, and the Accessibility Checker from Level Access. These tools don’t only evaluate contrast but offer a robust set of results that can be used to improve your content with a quick review of an entire page at a time.

Improving Color Contrast

Selecting high contrast color combinations—such as combining light and dark colors—to improve reading is one way to improve color contrast for accessibility. Visibility can be further improved through the use of bold text and larger font sizes, particularly for individuals with limited eyesight. You may even consider incorporating textures and patterns into backgrounds to provide additional differentiation without relying solely on color.

An option to consider might be the inclusion of alternative visual modes like high-contrast or dark themes that allow users to customize their viewing experience. Outside of what’s on the screen, you might consider the user’s surrounding environment to ensure the chosen contrast remains effective under different lighting conditions. These strategies collectively contribute to making digital content more accessible.

In Conclusion

The web should be a place where everyone feels welcome and can access information freely. That's why paying close attention to color contrast is so important - it's one of those design details that makes a huge difference for people with visual impairments. Following accessibility guidelines on contrast isn't just about ticking boxes though. When we get it right, we open up our digital experiences to more people and create better usability for all.

Think about it - have you ever struggled to read light gray text on a white background, or missed a faint link because it blended into the page? Little things like pumping up that contrast can transform the experience from frustrating to smooth sailing. It shows we're designing with empathy and considering diverse needs from the start.

At the end of the day, inclusive design isn't just about rules and regulations. It's about making a genuine commitment to create spaces that work beautifully for everyone. Each accessible feature we implement brings more people into the fold and helps break down barriers. That's what building a truly equitable web is all about - opening virtual doors and rolling out the welcome mat for each new visitor.