Skip to main content

Introduction to Web Accessibility

24 Colours

Contrast

GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast:

Relying on colors to determine page visibility and contrast can be misleading. Converting the colors to their grayscale equivalents is a more reliable method. By removing color’s influence, you’ll better find true visual contrast… GrayBit makes it possible.

On the other hand, Colour Contrast Visualiser allows you to visualise good colour combinations on a Photoshop style colour picker. This tool helps to find acceptable colours from an existing inaccessible combination, while maintaining the aesthetic appeal of the original.

Colour Combination

Check My Colours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits.

Color Blindness

According to the definition of color blindness in the Wikipedia:

Color blindness or color vision deficiency is the inability or decreased ability to see color, or perceive color differences, under normal lighting conditions. Color blindness affects many people in a population. "Color blind" is a term of art; there is no actual blindness but there is a fault in the development of one or more sets of retinal cones that perceive color in light and transmit that information to the optic nerve. Color blindness is usually a sex-linked condition. The genes that produce photopigments are carried on the X chromosome; if some of these genes are missing or damaged, color blindness will be expressed in males with a higher probability than in females because males only have one X chromosome (in females, a good gene on only one of the two X chromosomes is enough to yield the needed photopigments)

There are different types of color blindness, such as monochromacy, also known as "total color blindness" (the lack of ability to distinguish colors, and thus the person views everything as if it were on a black and white television), deuteranomaly (by far, the most common type of color vision deficiency, mildly affecting red–green hue discrimination in 5% of males), or tritanomaly (a rare, hereditary color vision deficiency affecting blue–yellow hue discrimination).

The website Accessibility Color Wheel offers a tool that helps to choose a color pair by analyzing the contrast of a color pair and showing how color-blind people will see it. It also simulates three kinds of vision deficiencies: deuteranopia,protanopia and tritanopia.

Different presentations

Some websites offer different combinations of colours.

In the website Legislacjon, we can find an example of high-contrast design. This is the standard version:

Standard version of a web page

And this is the high-contrast version:

High contrast version of a web page