Color and contrast

Have you ever tried to read text on a screen and found it difficult to read due to the color scheme or struggled to see the screen in a very bright or low-light environment? Or maybe you are someone with a more permanent color 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 color and contrast, whether temporary, situationally, or permanently. This will help you best support their visual needs.

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

Perceiving color¶

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

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 color model and more closely aligns with how a human perceives color.

{% Aside %} In CSS, a color can be specified in many ways, such as using color names, RGB, RGBa, HEX, HSL, HSLa, HSV, or HSVa values. HSLa is similar to HSL, only an alpha value has been added. Alpha is a measurement of opacity and is defined as a number between 0.0 (fully transparent) and 1.0 (fully opaque). {% endAside %}

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

{% Codepen { user: 'web-dev-codepen-external', id: 'eYrEZqE', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

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

{% Codepen { user: 'web-dev-codepen-external', id: 'vYjJKBP', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

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

{% Codepen { user: 'web-dev-codepen-external', id: 'poVrboR', height: 350, theme: 'auto', tab: 'result', allow: ['geolocation'] } %}

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 on the background without needing contrast-enhancing assistive technology.

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

On the left, the image shows rainbow sand with purple, red, orange, yellow, aqua green, light blue, and dark blue colors. On the right is a brighter, multicolored 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 color blindness filter simulates what this type of color 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 color blindness filter simulates what this type of color blindness might look like.

Achromatopsia or Monochromatism¶

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

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

Calculate color contrast¶

The color contrast formula uses the relative luminance of colors 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.

1
2
3

(L1 + 0.05) / (L2 + 0.05)
L1 is the relative luminance of the lighter color
L2 is the relative luminance of the darker colors

Regular-sized text, including images of text, must have a color contrast ratio of 4.5:1 to pass the minimum WCAG requirements for color. Large-sized text and essential icons must have a color 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 color contrast requirements.

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

{% Codepen { user: 'web-dev-codepen-external', id: 'PoeKzWq', height: 450, theme: 'auto', tab: 'result' } %}

Using color¶

Without good color 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 color 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 colorblindness to know which button to click. Similarly, many graphs, charts, and tables use color 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 color issues quickly.

{% Codepen { user: 'web-dev-codepen-external', id: 'rNvzLmd', height: 500, theme: 'auto', tab: 'result' } %}

Color-focused media queries¶

Beyond checking for color contrast ratios and the use of color 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.

{% Aside %} There are additional media queries and OS settings to consider for color accessibility, but they are far less supported than the two listed in this module. See the article Operating System and Browser Accessibility Display Modes for more information on the various OS accessibility settings. {% endAside %}

Prefers color scheme¶

{% BrowserCompat 'css.at-rules.media.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.

{% Codepen { user: 'web-dev-codepen-external', id: 'ExLvNOw', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %}

{% DetailsSummary %} Compare light and dark mode. {% endDetailsSummary %}

{% endDetails %}

Prefers contrast¶

{% BrowserCompat 'css.at-rules.media.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).

{% Codepen { user: 'web-dev-codepen-external', id: 'bGMrgNV', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %} {% DetailsSummary %} Compare regular and high contrast. {% endDetailsSummary %}

{% endDetails %}

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.

{% Codepen { user: 'web-dev-codepen-external', id: 'wvjqgaK', height: 300, theme: 'auto', tab: 'css,result', allow: ['geolocation'] } %}

{% Details %} {% DetailsSummary %} Compare both color and contrast. {% endDetailsSummary %}

{% endDetails %}

{% Assessment 'color' %}

Комментарии