Color is a core element of web design. Designers may use it to direct attention or represent a brand, or they may just pick what looks nice to them. But color isn’t as reliable as you may think. In fact, everyone sees color a bit differently. As many as 1 out of 12 men and 1 out of 200 women have a color vision deficiency, meaning they can’t distinguish between certain shades. Even people without this diagnosis can disagree on colors in certain contexts (remember “the dress?”)
Lighting strongly affects how viewers experience color, and users may log onto your site from a dark room, a sunny field, or anywhere in between. Further complicating the design process, on-site colors interact with one another; in order to be visible and legible to the broadest number of users — including people with vision impairments — designers must be careful with the contrast between foreground and background shades. That’s especially true for text, forms, prompts, and buttons.
Color contrast guidelines can help to broaden your audience considerably, but the principles of accessible web and mobile design are helpful from a creative perspective, too. Designing for accessibility limits your options, providing a starting point that’s more defined than instinct alone. For many designers, that’s a goalpost, not a limit. When in doubt as to color choices, start with these tips about color contrast in accessible web design:
1. Understand the “contrast ratio.”
Frequent readers of this blog will recognize the Web Content Accessibility Guidelines (WCAG), the leading authority for inclusive online design. To define color contrast, WCAG relies on a formulation called a contrast ratio, a two-number figure that ranges from 1:1 to 21:1. The first number refers to the relative luminance — a measure of brightness — of the lighter color. The second reflects the relative luminance of the darker shade.
Relative luminance, meanwhile, is a numerical description of a color’s brightness. WCAG provides a mathematical formula for translating RGB values into relative luminance; find that here. The important thing to remember is that higher contrast ratios makes it easier to distinguish the text from the background, while lower contrast ratios do the opposite. A contrast ratio of 1:1 would represent a pure white foreground on a pure white background, while 21:1 replaces the foreground color with black. Clearly, low contrast is a problem for text.
2. For most text, choose colors that create a contrast ratio of at least 4.5:1.
According to WCAG standards, 4.5:1 is the minimum contrast ratio for most text (we’ll discuss exceptions below). Note that this guideline applies to images of text, as well — though it’s generally best to avoid images of text to make sure screen readers catch all your written content.
Maintaining this contrast ratio becomes tricky when you present text against a patterned or multi-hued background. You can still comply with WCAG in these scenarios, but you may have to alter the shade of the foreground to maintain at least the minimum ratio — which probably won’t make for a particularly user-friendly reading experience.
3. For large text, maintain a minimum contrast ratio of 3:1.
Larger on-screen text is easier to read for many users, and may remain legible even at a lower contrast ratio. Within WCAG, large-scale text is defined as 18-point or 14-point bold fonts, which amounts to between 120 and 150 percent of the typical on-screen font size. This whole discussion assumes readers don’t do any text resizing themselves; this is the font as it loads on the page.
Of course, text isn’t the only foreground element on a web page. Designers should also follow WCAG guidelines for color contrast in non-text elements.
4. Ensure all important visual elements have a contrast ratio of 3:1 or higher.
“Important” visual elements are those parts of your design that convey communication; WCAG specifically mentions components of user interfaces and graphics that help users understand the content. In other words, if it conveys information, the element should have a contrast ratio of at least 3:1. That makes 3:1 a good minimum ratio to remember when designing broader color schemes.
5. To reach the highest level of WCAG compliance, strive for a text contrast ratio of 7:1.
Compliance with WCAG comes in three levels: A, AA, and AAA. The former guidelines refer to level AA compliance. For even greater accessibility, typical text must have a contrast ratio of 7:1. Large-scale text must have a minimum contrast ratio of 4.5:1 to reach AAA compliance under WCAG.
6. Avoid using color as the only way to convey information.
According to WCAG, designers shouldn’t rely on color alone “as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”
That means you shouldn’t identify a form response field just by highlighting it in yellow, or present a link as a simple colored box. You can use color this way, but only if you also provide a secondary visual signal — an asterisk in the form response field, an arrow shape for the button, or clearly legible text defining the element’s purpose, for example. That has less to do with color contrast than use of color more generally, but it’s an important point in any discussion of color in accessible web design.
7. Use digital tools and manual testing to verify appropriate color contrast.
To figure out a true contrast ratio by hand, you have to calculate the relative luminance. That’s a complex equation. A simpler option is to use the a11y Color Contrast Accessibility Validator from the Bureau of Internet Accessibility (BOIA). This free online tool allows designers to pick colors or type in Hex Codes to determine the contrast ratio between them. You can also enter a URL to check the color contrast of a whole page.
For more information about accessibility audits and services from BOIA — which go far beyond color contrast issues — schedule a free 30-minute consultation today.
