Quick Guide to High Contrast Web Design

Quick Guide to High Contrast Web Design

High contrast web design is just part of accessibility compliance, but it’s a big part.

The first place to start when designing a visually accessible web site is the Web Content Accessibility Guidelines (WCAG), a massively useful resource provided by the Web Accessibility Initiative, now in its second edition.

A contrast ratio of at least 4:5:1 is recommended by the WCAG 2.0 AA as the minimum bar to meet for accessibility. For large-scale text and images of large-scale text the contrast ratio should be at least 3:1. That 3:1 contrast is probably already familiar to you as the go-to contrast ratio between foreground and background colors.

Some examples of the 4:5:1 ratio in action:

  • A simple black background with each piece of text optimized at 4:5:1 against that background.
  • A background that features a gradient from white to black, where the contrast of text is modified across the page to accommodate a 4:5:1 ratio against whichever background color it falls upon.

What you’ll notice in both of these examples is that consistency is key. An effective high contrast design, at least by WCAG 2.0 AA standards, can be achieved either by hitting that 4:5:1 ratio with your background and foreground colors and keeping those colors throughout the page or by modifying the colors but maintaining the ratio.

When it comes to images overlaid with text, it’s usually going to mean blurring the imagery under the text to hit that 4:5:1 ratio on its head.

Thinking Outside the 4:5:1 Box

But wait, you might be thinking, a 4:5:1 ratio doesn’t align with my product, project, brand identity, or customer expectations. And it’s an understandable challenge: a 4:5:1 ratio can dull out a page, forcing you into a contrast box that works for web accessibility but doesn’t work for what you’re trying to achieve with design.

In this instance, you have to find the sweet spot between achieving optimal accessibility for all users and bringing your vision onto the page.

The 4:5:1 contrast ratio is a minimum requirement — it’s not the only way to go. If you increase the ratio beyond 4:5:1, you’ll still be able to achieve high enough contrast while also bringing in bright colors. Try 7:1 instead, for example, or 9:1, which will darken the background for a more pronounced variance between text and the page that it sits on. You’ll achieve richer colors without having to sacrifice design.

Designing Your Color Matrix

Think of web accessibility and the need for high contrast design as a foundational pillar of your color matrix, not an obstacle that you have to overcome.

The basics of high contrast design — that your page should be readable, and that your visual elements should not blend into one another — are also the basics of good design. High contrast requirements are far from a hindrance.

As you start to design your color matrix, be sure to read through the entire WGAC 2.0 AA Contrast Minimum section (the WGAC’s Understanding SC 1.4.3 will give you a good overview).

There are a few nuances to be aware of, such as that large-scale text has a 3:1 ratio minimum and there is no minimum at all for logos or brand names.

Choose your primary, secondary, and incidental colors, and then start tweaking. Pay close attention to gradients, patterns, and other places on the page where contrast may need to be individually adjusted. Keep in mind that all aspects of your site design need to adhere to the minimum contrast requirement — so not just text, but also icons, borders, and images.

For most designers, optimizing the color matrix is not a one-and-done project. One small change will often beget another, and that’s okay! Just aim to solidify your matrix before you start building your site so that you don’t have to retrace your steps later on.

Checking Contrast Compliance

It’s always good to get a second set of “eyes” on the page so that you don’t accidentally gloss over an area where contrast isn’t optimized for accessibility. And there are a number of tools that you can use to ensure that you’ve met the contrast requirements set out by the WGAC.

Here are a few to consider:

WebAIM: A barebones contrast checker that allows you to enter in your foreground and background colors for a quick readout of the contrast ratio.

Contrast Ratio by Lea Verou: Enter in your colors and the contrast value button will show up green (you passed), orange (you passed in some areas but missed the mark in others), or red (you’ve failed to meet the minimum requirements).

Color Contrast Analyzer: This Chrome extension works right on your site to highlight areas where contrast is sufficiently achieved. Unlike other contrast extensions, it has the added benefit of being able to analyze not just regular online text but text on images and gradients.

Remember: Making your web site more accessible is as beneficial for you as it is for those individuals who rely on high contrast design to see what’s on the page. A proper color matrix is easier to achieve than you might think, and will only add to the look and utility of your design.

More Accessibility Resources from iSoftStone

Accessibility Testing Tools

Accessibility Best Practices

Which Accessibility Standard Should You Use?