Improving website accessibility for color blindness people by analyzing webpage color contrast

There are two issues related to color that need to be addressed when designing for the web:

• A small number of visitors to your website may not be able to see all the colors used in your designs.
• Insufficient contrast between your background and foreground colors could make it harder to read the text in your web pages.

Color blindness, the inability to perceive certain colors, is a condition that affects about 1 in 12 men and 1 in 200 women. Common types of color blindness include:

• Protanopia and protanomaly: people with these conditions are unable to see the color red well. Colors on the red-green end of the spectrum will tend to shift toward beige and gray for people with these conditions.
• Deuteranopia and deuteranomaly: people with these conditions are unable to see the color green well. Colors on the red-green end of the spectrum will tend to shift toward beige and gray for people with these conditions. Deuteranomaly is the most common form of color blindness, affecting about 6% of all males.
• Tritanopia: people with this condition are unable to see the color blue correctly. As a result, colors on the blue-yellow end of the spectrum will tend to shift toward red. This type of color blindness is relatively rare.

The implication of color blindness for web accessibility is that you should never rely on color alone to present important information. An example would be including the following at the top of a form to let people know which fields are required: “Fields labeled in red are required.” A person with red-green color blindness may not be able to perceive that information. A better solution is to include the actual words “required” next to each required field, or to use bold text or another indicator that helps the text stand out.
Another issue related to color on the web is the contrast ratio between the background and foreground colors. Insufficient contrast can make it more difficult to read the text on a web page or identify important information in images.
To address website accessibility for site visitors with color blindness, web designers and developers can use our Color Contrast Analyzer (CCA) application. Just simply download its zip file here and install it on your system (Windows and macOS). Use it while building or optimizing your website.
CCA helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. It provides free color contrast analysis tools that will display the color contrast issues of a web page or chosen color-pair; per WCAG 2.1 Guidelines. Color Contrast refers to how bright or dark colors appear against each other on screens; particularly with regard to the relative, gray-scale luminosity as perceived by the human eye.
When it comes to website accessibility, the contrast between the text and the text background is a concern for colorblind and other visually impaired users. Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Our stand-alone application comes with the following features:

• WCAG 2.1 compliance indicators
• Several ways to set colors: raw text entry (accepts any valid CSS color format), RGB sliders, color picker (Windows and macOS only)
• Support for alpha transparency on foreground colors
• Color blindness simulator

---