Color blindness accessibility

There are a lot of reasons you might choose the colors you do when designing a website. Your brand colors, content, offers, and calls-to-action all demand attention. Your color choices can help visitors prioritize all that information and guide them to the most important parts of each web page. But what about users who can’t see color or those who can’t distinguish color at all?

When your website relies heavily on color, it’s difficult or even impossible for some visitors with color blindness and color vision deficiency (CVD) to parse the information on it. Color accessibility helps lower or remove the barrier to entry for those users. Here’s what you need to know about color accessibility and why you should make it part of your website for everyone.

What is color blindness accessibility in website design? 

In web design, color blindness accessibility means designing elements of your website so that people who can’t differentiate the full color spectrum can still use and experience your website as intended. Color accessibility is concerned with factors like text color, background color, saturation, and patterns, along with text size and ratio of size to contrast.

Color accessibility is measured against Web Content Accessibility Guidelines (WCAG) for contrast and color, which standardize color definitions, minimum contrast ratios by text size, and more. These guidelines can apply to all kinds of content on your website – basically anything a user needs to see to get around – from words on the screen to how text color changes when the user hovers over it, outlines of forms, checkboxes, and even graphical elements like logos and icons.

The advantages of designing a color-accessible website

Like all accessibility initiatives, color blindness accessibility is targeted at providing a better experience for users of differing abilities – but utilizing accessible design has a number of benefits for your website, as well.

Meeting color accessibility standards is an ethical imperative. As an owner of a website hosted on the public internet, you have a role to play in making that website accessible to as many potential users as possible. In a 2021 accessibility exam, 86% of the internet’s top 1 million homepages failed to meet minimum color contrast requirements. That means about 860,000 of the most-visited pages on the internet aren’t designed with people with low vision or CVD in mind.

If you’re not actively including those people in your website design – people who may be interested in the content on your site – you’re excluding them. The concept of digital inclusion means creating a world where digital opportunity is equally available to anyone, regardless of ability, race, region, creed, or platform. Making the effort to create an accessible digital experience shows you’re serious about leading the charge toward a digitally inclusive future.

Color accessibility (and lack thereof) also has legal implications. Though its roots are in physical locations, Title III of the Americans with Disabilities Act (ADA) can be applied to US businesses whose websites are inaccessible to some people “on the basis of disability.” That includes color blindness, low vision, and other disabilities that can limit someone’s ability to use a website.

When a business fails to comply with accessibility standards on their website, it can leave them open to legal action, like lawsuits, payment of damages, and more from or on behalf of disabled visitors. Consciously designing your website with many accessibility vectors in mind minimizes your chances of violating regulations and experiencing legal trouble.

Color accessibility isn’t just for the color blind. Think about the last time you visited a web page that used black text on a dark navy background, or distracting colors, patterns, or effects that made it hard to find what you were looking for. Did you soldier on or did you give up and find what you needed somewhere else? Did you visit other pages on the site? How long did it take?

Don’t ignore the power of color accessibility to improve user experience and keep visitors on your website (and don’t ignore the power of misused color use to drive them away). The more complex and unclear a web page’s use of color becomes, the more frustrating it becomes – even to the average sighted visitor. The same WCAG standards that make it possible for color blind people to use your website make it easier for other visitors to use it, too. A better website experience leads to lower frustration, improved visitor satisfaction, and lower bounce rates.

The kinds of color blindness you need to understand when designing your website

When you create or update a website to be more accessible, you’re not just creating for blind people. What people call “color blindness” covers a wide spectrum of abilities. For example, people with low color distinction can also be near-sighted, far-sighted, sensitive to light, or have a number of other visual limitations at once. What one person of limited sight needs to use your website might not be enough to give another visitor the same experience.

It’s important to understand the wide range of abilities you’re adapting your website for, so you can know what they need to experience your website to the fullest. Here’s an overview of common sight disabilities.

Monochromacy 

Monochromacy is a condition where a person can’t see colors – only black, white, and shades of grey. Monochromacy is a broad term covering two conditions: Achromatopsia (rod monochromacy), where someone can’t see color because of missing or inert retinal cones, is very rare and often accompanied by light sensitivity or near/far-sightedness; and cone monochromacy, where people can’t see color but have generally normal vision otherwise.

Tritanopia

Tritanopia is a form of color blindness where a person can’t tell the difference between blue and yellow. People with tritanopia can still perceive red and green hues.

Deuteranopia

People with deuteranopia can’t distinguish green colors, making it one subtype of what’s commonly called “red-green colorblindness”. Deuteranopes can exhibit a nearly complete blindness to green or a lack of sensitivity to green hues (known as deuteranomaly). It’s estimated that about 1% of males and 0.1% of females have deuteranopia.

Protanopia

Protanopia is a condition where people can’t distinguish red hues, and it’s the other subtype of red-green colorblindness. About 0.02% of females and 1.01% of males have some form of protanopia.

The kinds of color blindness you need to understand when designing your website

It only takes one poorly considered element to render a web page useless to some visitors. Here are six website elements that are inaccessible to color blind users.

• Elements with low color contrast can be indistinguishable to someone without a full range of color sensitivity. Images, videos, GIFs, charts, graphs, and other visuals that might otherwise give your website some panache can exclude some visitors for the same reason.
• Text readability is vital to creating a web page everyone can understand. Everything about the text on your website, from your choice of typeface and font to style and size, can make it hard to read. Modifiers like italicization, bolding, kerning, spacing, serifs, and more can improve or ruin the user experience for visitors of any ability level.
• Text overlays on images aren’t discernable to all visitors. Whether it’s live text or baked into the image file, words on a picture are almost always competing for attention with the content of the image.
• In-text hyperlinks can be completely missed by a color blind visitor. Some site styles don’t make it clear that text contains a link. Some only change color when a visitor hovers over them with their mouse pointer, which isn’t enough for color blind visitors.
• Errors, issues, and warnings can’t rely only on color. For example: If a visitor misses a field when filling out a website form, clicks “submit,” and the field’s text or outline changes from black to red, that’s not enough to show them something’s wrong or how to fix it.
• Form placeholders with low color contrast might just look like text. The same rules that govern on-page text (size, color contrast ratio, etc.) apply to the text that appears in forms before someone clicks on them. Websites must make it clear to all users that a form is intended to be typed in or responded to with strong color contrast and other non-text elements.

How to make your website more accessible to color blind users

The best way to make sure your website is accessible to visitors with CVD is to keep all audiences in mind from the first design concept. Of course, most websites weren’t (and aren’t) built with that mindset – but there are still ways to start making your site more color accessible.

First, do not use accessibility overlays. Accessibility overlays are automated tools that claim to find and fix accessibility issues on your website. But as we explained in this blog post, they’re really more of a quick band-aid that covers over the problems rather than correcting any issues in the source code of your site. At best, accessibility overlays present legal risks for your business and website. At worst, they actually make it harder for people with disabilities to use your site by adding new barriers like navigation and incompatibility with assistive technologies.

You’ll need to consider all elements of your website to build a truly color-accessible experience. It’s not enough to just make your text big enough to read or use high-contrast colors or keep images simple; your website design must build accessibility into every element if you want to create a website anyone can use.

If you’re not sure what elements of your site pass the accessibility check, you can test your website for WCAG compliance. While automated website tests will give you a broad idea of where your website falls short, WCAG conformance is a collaborative process that uses Website Accessibility Conformance Evaluation Methodology (WCAG-EM) to check whether or not your website meets widely accepted standards of accessibility. Hybrid testing models – those that use automated testing and manual testing – are the best way to ensure your website is built for everyone, both today and in the future.

No website is perfect, but every website owner has a responsibility to consider as many visitors as possible, including visitors with CVD.