Color blindness, also known as color vision deficiency, is difficulty distinguishing between certain colors or seeing color at all.
It’s estimated that there are over 300 million color-blind people worldwide, with the majority of them being male. In fact, color blindness affects approximately 1 out of every 12 men (or 8% of all men).
Symptoms of color blindness typically include difficulty seeing the difference between colors and different shades of colors, the brightness of colors, as well as an overall sensitivity to light in some instances.
Color blindness is usually genetic but can also result from diabetes, Alzheimer’s disease, and multiple sclerosis. It can also be the consequence of aging or certain medications.
The most common type of color blindness is difficulty seeing between red and green. In contrast, the less common ones include difficulty differentiating between blue and yellow and, most rarely, difficulty seeing color at all.
Although there is no cure for color blindness, there are special glasses, contacts, and visual aids (such as mobile applications) that can help make it easier to perform everyday tasks.
Color Blindness and Web Accessibility
The best way to ensure that people with color blindness have full access to your website is to follow the golden international standards set by Web Content Accessibility Guidelines (WCAG) in regards to creating sufficient color contrast between the text (such as subtitles, on-screen text, or narrative titles) and background.
More commonly, that refers to WCAG versions 2.0, 2.1, and 2.2 and AA conformance level (note that level A is the most basic and level AAA is the most advanced conformance level regarding web accessibility).
To meet WCAG 2.1 AA conformance level, regular text that is 18 point or smaller (or bold text that is 14 point and smaller) must have at least a 4.5:1 contrast ratio. On the other hand, text that is larger than 18 point (or bold text over 14 point) must have a contrast ratio of 3:1.
To meet the most advanced AAA conformance level, regular text that is 18 point or smaller (or bold text that is 14 point and smaller) must have at least a 7:1 contrast ratio. All larger text must have a minimum contrast ratio of 4.5:1.
WCAG guidelines also require avoiding using color alone to communicate any important information or meaning. In other words, it’s required to create website content that can be easily understood by all users even if no colors are involved (e.g., a website that is entirely in black and white).
These guidelines are not only important for people who have color blindness, but also people who have low vision, other visual impairments, as well as people with temporary impairments caused by specific short-term circumstances such as broken limbs, surgery recovery, poor lighting, glare, etc.
It’s worth noting that there are estimated 2.2 billion people worldwide who have some form of visual impairment, according to the World Health Organization (WHO).
Best Color Contrast Checker Tools for Web Accessibility
To help ensure your website is fully accessible to people with color blindness and other visual impairments, there are easy-to-use color contrast checker tools that can confirm that your website meets the sufficient color contrasts established by the WCAG guidelines.
Here’s a select list of some of the best free color contrast checker tools for web accessibility (note that these are listed in alphabetical order):
Accessible Colors
Accessible Colors evaluates a color combination on your website using WCAG 2.0 AA conformance level as the established standard. When color combination doesn’t meet these standards, Accessible Colors will modify the color lightness to find the closest combination that does meet these standards.
Android Accessibility Scanner
If you need to make sure that your website is fully accessible to an Android user, then Android Accessibility Scanner is the perfect choice to help you accomplish that goal. This Google-created app (which is available on Google Play store) scans a user interface to evaluate its accessibility, not only in terms of color contrasts but other accessibility issues as well. Then, it offers a range of recommendations for accessibility improvements, including enlarging small touch targets and providing content descriptions for unlabelled graphical elements.
Color Contrast
Color Contrast, on the other hand, will help ensure that your website is fully accessible to macOS and iOS users. This app for iPhone, iPad and Mac is offered by Mac App Store and can help you measure the contrast between two colors in a screenshot or mobile website based on WCAG 2.1 guidelines. It will also suggest alternative color options and generate a report that can be shared via SMS, email, or Notes app.
Colour Contrast Analyzer (CCA)
This desktop application (with options for both Windows and Mac operating systems) can help you ensure you meet WCAG 2.1 standards in terms of color contrasts and brightness between your foreground and background color combinations. CCA can be used not only on websites but also during app development, while designing social media graphics, PowerPoint slides, PDFs, InDesign files, etc. It also offers a color blindness simulator so that you can see exactly how your content looks for a person with color blindness.
Color Safe
Color Safe is a simple web-based option that helps you choose the accessible color palette for your website. Simply enter the background color, font family, font size, font weight for your website, and the preferred WCAG conformance level (AA or AAA), and Color Safe will generate a color palette that meets the previously discussed standards required by the WCAG guidelines.
DigitalA11Y Color Contrast Checker
This Chrome extension available from Chrome Web Store can help you assess the color contrast ratio between the foreground and background elements on your website (in hexadecimal values) with just a click. It can quickly evaluate the current ratio and suggest possible alternative color codes that fit the WCAG accessibility requirements.
Leonardo
Leonardo is a more advanced all-in-one tool that you can use to create, manage, and share accessible color systems for user interface design and data visualization. Among its many options, Leonardo offers in-depth color analysis, precise color control, color generation that is based on contrast ratio, streamlined design resources, data visualization scales, end-user personalization, colorblind safe palettes, etc. In addition, since Leonardo is open-sourced, you can also help improve it yourself so it can suit your needs even better.
Tanaguru Contrast Finder
Tanaguru Contrast Finder is another simple and useful web-based tool option that can help you find the ideal contrast ratio between the foreground and background colors in your website design. Tanaguru Contrast Finder allows you to pick your desired contrast ratio score, then generates a comparison list of adjacent colors and samples of different font sizes, weights, and contrast ratios to help you decide which color and text combinations are more accessible while also working well together.
WebAim Contrast Checker
This is an online color contrast checker tool by WebAim, which offers numerous services including accessibility training, consulting, and evaluation for your organization. With WebAim Contrast Checker, you can enter a foreground and background color (in RGB hexadecimal format or by using a color picker), adjust the transparency of the foreground color and perceived lightness of the color, then pick between WCAG 2.1 conformance level AA or AAA. This tool can also analyze contrast ratios for all page text elements at once and evaluate links that are identified using color alone.
These free color contrast checker tools for web accessibility will help ensure that your website is fully accessible to people with color blindness, low vision, and other visual impairments on various devices and operating systems.
Once you enable sufficient color contrast between the foreground and background elements on your page, your web content will become more accessible to additional millions of potential customers worldwide.
