Have you ever tried to read text on a screen and found it difficult to read due                 to the colour scheme or struggled to see the screen in a very bright or                 low-light environment? Or maybe you are someone with a more permanent colour                 vision issue, like the estimated 300 million people with color blindness                 or the 253 million people with low vision?

As a designer or developer, you need to understand how people perceive colour                 and contrast, whether temporary, situationally, or permanently. This will help                 you best support their visual needs.

This module will introduce you to some accessible colour and contrast fundamentals.

Perceiving color

Did you know that objects do not possess colour but reflect wavelengths of                 light? When you see colour, your eyes receive and process those wavelengths and                 convert them to colours.

                                 

When it comes to digital accessibility, we talk about these wavelengths in                 terms of hue, saturation, and lightness (HSL). The HSL model was created as an                 alternative to the RGB colour model and more closely aligns with how a human                 perceives colour.

Hue is a qualitative way to describe a colour, such as red, green, or blue,                 where each hue has a specific spot on the colour spectrum with values ranging                 from 0 to 360, with red at 0, green at 120, and blue at 240.

Saturation is the intensity of a colour, measured in percentages ranging from 0%                 to 100%. A colour with full saturation (100%) would be very vivid, while a colour                 with no saturation (0%) would be grayscale or black and white.

Lightness is a color's light or dark character, measured in percentages ranging                 from 0% (black) to 100% (white).

Measuring color contrast

To help support people with various visual disabilities, the WAI group created a                 color contrast formula to                 ensure enough contrast exists                 between the text and its background. When these color contrast ratios are                 followed, people with moderately low vision can read text in the background                 without needing contrast-enhancing assistive technology.

Let's look at images with a vibrant colour palette and compare how that image                 would appear to those with specific forms of colour blindness.

                

                                                     

                

                                                       

                

On the left, the image shows rainbow sand with purple, red, orange, yellow, aqua green, light blue, and dark blue colours. On the right is a brighter, multicoloured rainbow pattern.

Deuteranopia

                

                                  

                

                                    

                

Deuteranopia                 (commonly known as green blind) occurs in 1% to 5% of males, 0.35% to 0.1% of                 females.

People with Deuteranopia have a reduced sensitivity to green light. This colour blindness filter simulates what this type of colour blindness might look like.

Protanopia

                

                                   

                

                                    

                

Protanopia                 (commonly known as red blind) occurs in 1.01% to 1.08% of males and 0.02% of                 0.03% of females.

People with Protanopia have a reduced sensitivity to red light. This colour blindness filter simulates what this type of colour blindness might look like.

Achromatopsia or Monochromatism

                

                                  

                

                                  

                

Achromatopsia or Monochromatism (or complete colour blindness) occurs very, very rarely.

People with Achromatopsia or Monochromatism have almost no perception of red,                 green, or blue light. This colour blindness filter simulates what this type of                 colour blindness might look like.

Calculate color contrast

The colour contrast formula uses the                 relative luminance of                 colours to help determine contrast, which can range from 1 to 21. This formula                 is often shortened to [color value]:1. For example, pure black against pure                 white has the largest color contrast ratio at 21:1.

(L1 + 0.05) / (L2 + 0.05)
                                        L1 is the relative luminance of the lighter colour
                                        L2 is the relative luminance of the darker colours
                                        

Regular-sized text, including images of text, must have a colour contrast ratio                 of 4.5:1 to pass the                 minimum WCAG requirements for color.                 Large-sized text and essential icons must have a colour contrast ratio of 3:1.                 Large-sized text is characterized by being at least 18pt / 24px or 14pt /                 18.5px bolded. Logos and decorative elements are exempt from these colour                 contrast requirements.

Thankfully, no advanced math is required as there are a lot of tools that will                 do the colour contrast calculations for you. Tools like                 Adobe Color,                 Color Contrast Analyzer,                 Leonardo, and                 Chrome's DevTools color picker                 can quickly tell you the colour contrast ratios and offer suggestions to help                 create the most inclusive colour pairs and palettes.

Using color

Without good colour contrast levels in place, words, icons, and other graphical                 elements are hard to discover,                 and the design can quickly become inaccessible. But it's also important to pay                 attention to how the color is used                 on the screen, as you cannot use colour alone to convey information, actions, or                 distinguish a visual element.

For example, if you say, "click the green button to continue,"                 but omit any additional content or identifiers to the button, it would be                 difficult for people with certain types of colourblindness to know which button                 to click. Similarly, many graphs, charts, and tables use colour alone to convey                 information. Adding another identifier, like a pattern, text, or icon, is                 crucial to help people understand the content.

Reviewing your digital products in grayscale is a good way to detect potential colour issues quickly.

Color-focused media queries

Beyond checking for colour contrast ratios and the use of colour on your screen,                 you should consider applying the increasingly popular and supported                 media queries that offer the users                 more control over what is displayed on the screen.

For example, using the @prefers-color-scheme media query, you can create a dark theme, which can be helpful to people with photophobia or light sensitivity. You could also build a high contrast theme with @prefers-contrast, which supports people with color deficiencies and contrast sensitivity.

Prefers color scheme

The media query @prefers-color-scheme allows users to choose a light or                 dark-themed version of the website or app they are visiting. You can see this                 theme change in action by changing your light/dark preference settings and                 navigating to a browser that supports this media query. Review the                 Mac and                 Windows instructions for dark mode.

                                                  

                                    

                  

Compare light and dark mode.

                                 

                  

                   

                 

                                                       

                 

                                                       

                

                  

                                  

Prefers contrast

The @prefers-contrast                 media query checks the user's OS settings to see if high contrast is toggled on                 or off. You can see this theme change in action by changing your contrast                 preference settings and navigating to a browser that supports this media query                 (Mac and Windows contrast mode settings).

                                    

                  

Compare regular and high contrast.

                                 

                  

                   

                 

                                                       

                 

                                                       

                

                  

                                  

Layering media queries

You can use multiple color-focused media queries to give your users even more                 choices. In this example, we stacked @prefers-color-scheme and                 @prefers-contrast together.