Accessible Color Themes

Summary

A design theme is a set of choices that define the look of an organization’s brand. Designers use themes with websites, social media, print, promotional campaigns, and other similar products. Making the right color choices is critical to the design process. Defining accessible color combinations must be an integral part of the design’s color choices understandable.

• The right color choices can increase brand recognition, evoke an emotional response, and reinforce your content.
• The wrong color choices can prevent people with color blindness, low vision, and neurodivergence from understanding your content.

Overview

Color is an integral part of any design and one of the most noticeable visual characteristics. Color helps people understand information by reinforcing the meaning of the content and emphasizing more important content. Color often carries an emotional connotation and can invoke specific feelings in people. Color can also play a powerful role in building a memorable brand for an organization (for example, Target’s red target or IBM’s “big blue” logo). For these very reasons, it is critical to ensure the colors used in your design are accessible.

While no one color theme can always meet the needs of everyone, a well-designed, accessible color theme can meet the needs of most people, most of the time. There are two guidelines to remember when choosing colors to build an accessible color theme.

• Use color combinations with good color contrast.
• Never rely on color alone to convey information.

Who is Helped

Good contrast helps people with color blindness, low or limited vision, and some people with cognitive disabilities that impact reading skills or are sensory sensitive reliably perceive information. Adding secondary visual cues means that people in these groups can reliably understand information without relying on color alone.

• People with color blindness and low vision require good contrast to distinguish between colors.
• People who are color blind cannot distinguish between certain colors and rely on having at least one other visual indication in addition to color.
• Avoiding oversaturated, high-contrast, or large areas of bright yellow can help people who are neurodiverse and sensory-sensitive. 
• Avoiding very high-contrast color combinations, such as black text on white, can help people with dyslexia, Irlen Syndrome, light sensitivity, and autism.

Design Principles

Take another look at the two seemingly simple guidelines needed to create an accessible color scheme.

• Use color combinations with good color contrast.
• Never rely on color alone to convey information.

You might think creating a color scheme that meets these two guidelines is simple. In fact, creating an accessible color scheme can be complicated. It isn’t choosing the colors that complicate this process - almost any color can work in an accessible color scheme. The hard part is determining how to use the colors with each other.

Designers often ask, “Is there somewhere I can get a colorblind-safe color palette?” The problem with this question is that how you use colors in a design can make even the “safest” color palette inaccessible.

The only safe color palette is limited to black, white, and one color.

Figure 1: A “Safe” Color Palette

The gradient in this figure from the U.S. Web Design System illustrates how to choose a one-color colorblind-safe color palette. The 50% value of red in the middle of the gradient meets the contrast guidelines for text when used with either black or white (a 4.5:1 contrast ratio). When you combine this red with black and white in a color scheme, the color contrast is significant enough that it is considered a second indicator in addition to color. This second indicator means that color is not the only means of conveying information.

• People who are colorblind can perceive this color as different from black and white.
• People with low vision can perceive this color as different from black and white.

The color does not need to be red—it can be any color with a 4.5 to 1 color contrast ratio to black and white. This color can be used with black and white in any way, in any part of the design, and the colors will be accessible. The problem is that few designs are so simple that black, white, and one color are all that’s needed.

Choose Color Combinations with Good Color Contrast

Here is where accessibility gets built into the color theme. Remember, it’s not the colors that determine accessibility; it’s how you use them. Any element in a design that conveys content must stand out from the background sufficiently for everyone to see it.

Step 1: Identify Design Elements that Convey Content

The first step in identifying colors is to identify the elements in the design that have meaning or convey information. Aim for broad categories of elements rather than listing specific items. The colors used for these elements establish a base for the design’s color palette and must meet accessibility guidelines when used together. Purely decorative elements can use any colors in any combination but should draw from the same color palette to establish a cohesive look. An example of a decorative element is a background pattern used to provide ambiance or balance a design. Note that logos are exempt from color requirements.

Table 1 identifies elements in a design theme that typically convey information and need to meet color requirements. This list will be different for every design, but it will always incorporate some of the common elements listed here. The list includes expected elements like text, links, background colors, and design elements known as affordances. Affordances are visual cues or indicators that convey meaning or information. Examples of affordances include a border that groups a section of related content or a change in the color of a button when it receives focus.

Element	Role	Function
Main background	Main background color	Used for the page background.
Main text	Main text color	Used for text throughout most of the content.
Link text	Link color	Used for the default link color. It may include colors for active, hover, and focus states,
Secondary text	Optional element color(s)	Used for menus, footers, headings, and other areas. Secondary text may be more than one color.
Secondary backgrounds	Optional background color(s)	Used to visually separate different content areas, such as banners, footers, etc. Secondary backgrounds may be more than one color.
Borders	Optional border color(s)	Used to visually separate different areas of content. More than one color may be used for borders.
Focus Indicators	Mouse and keyboard focus color(s)	Used to indicate when an interactive element receives focus. May be different colors on different parts of the page.
Indicators and Messages	Error, Warning, Success, and Information Indicators and Messages.	Used to indicate semantic meaning. These are usually red, yellow, green, and blue, respectively.
Buttons, form fields, and other interactive elements	Interactive elements	May need more than one color to represent different states, such as active or disabled.

Step 2: Choose Colors and Assign Them to Elements

While design themes can be complex and include many colors, too many colors can be hard to balance and distract from the content. Most designs use a limited number of colors. Neutrals are usually the most dominant color in a design. Bolder colors, such as brand or error colors, are used sparingly to draw the user’s attention to a specific element. These are not hard and fast rules. A website’s landing page might use a large area of bright color to get people’s attention, while other pages limit the use of brighter colors. A poster series designed for children might use bright colors throughout their design, while an ad campaign for a news agency is composed mainly of neutrals with only small pops of brighter colors.

When color conveys meaning, it is best to follow established conventions for color choices. For example, using red as an error indicator and blue for links are well-established conventions. These conventions allow people to quickly understand the meaning of a design’s colors without needing to learn a new design pattern.

Most designs only need 3 or 4 types of colors for the common elements identified in Step 1.

• Main, or primary, color:
  • This is usually the brand color or one of the colors from a logo.
  • This is different from the color used the most in the design; it is the color that stands out the most.
  • The primary color calls attention to the most critical elements in the design.
• Accent, or secondary, color (optional):
  • There can be two accent colors if needed.
  • This color should complement the primary color.
  • The accent color calls attention to design elements less critical than those using the primary color.
• Neutral color:
  • The most used color in a design is usually the neutral color.
  • Typically gray or beige, this can be any desaturated color.
  • Designs commonly use neutral colors for text, backgrounds, borders, and form elements.
• Semantic colors (colors that convey meaning):
  • Designs use these colors for error, warning, success, and information indicators and messages.
  • Follow established conventions for semantic colors where they exist.

Figure 2: Web Page Mockup using Primary, Secondary, Neutral & Semantic Colors

Table 1: Common Design Elements that Convey Content

A design can build a color palette using darker, lighter, or brighter variations of these colors. In the web page example above, a lighter tint of semantic blue is the background color for an informative message bar at the bottom of the page.

Understanding Color (Ta11y) provides information on the color theory behind selecting colors for a design. Palette generators like the Adobe Color Tool can help choose colors to build an initial palette (see “Resources” at the end of this article for more information on palette generators and other useful tools).

Here’s an example of the colors assigned to key design elements from the United Kingdom’s GOV.UK Design System.

Figure 3: GOV.UK Design System Base Colors

This figure shows the seven key colors for the GOV.UK Design System Colors plus the three colors used for the link’s hover, visited, and active states. These seven key colors include bright blue, gold, 3 grays, red, and green. White is not shown but is used as the primary page background color. The color identifier and hex value are listed next to each color for developers. This real-world design theme assigns colors to its design elements in much the same way as the generic color theme discussed previously.

• Primary (Main) color:
  • Brand color: bright blue
  • Link (initial state): bright blue
• Secondary (Accent) color:
  • Focus Indicator: bright gold
• Neutral colors:
  • Primary text color: dark gray
  • Secondary text: medium dark gray
  • Link (active): dark gray
  • Main background: white
  • Secondary backgrounds: dark gray, light gray
  • Borders: dark gray, light gray
• Semantic colors:
  • Error Indicators and Messages: red
  • Success Indicators and Messages: green
• Additional colors:
  • Link (hover): dark blue
  • Link (visited): purple

Step 3: Check Color Combinations for Accessibility

The next step is to test all the colors in the selected palette against each other to identify the contrast ratios of all possible color combinations. This test determines which color combinations the design can use. The best tool for checking the contrast of multiple colors against each other is a grid-based color contrast checker like Eight Shapes. Tools like this can quickly check numerous colors at one time and identify which color combinations meet the Web Contrast Accessibility Guidelines (WCAG) for good contrast.

To build the grid, replace the default colors in Eight Shapes with the selected palette colors by typing the hex values of each color, one per line, in the text box labeled “rows and columns.” The resulting Eight Shapes grid identifies the accessible color combinations.

Figure 4: Eight Shapes Grid using the GOV.UK Design System Colors

The grid in this example contains the seven key colors (plus white) from the GOV.UK color theme. The test results provide significant information.

• The appearance of each color when paired with every other color in the palette.
• The contrast ratio for every color pair.
• If the color pair passes WCAG AAA (7:1), AA (4.5:1), or AA18 (3:1):
  • AAA: You can use the colors together for text (any size) or affordances (visual cues) and meet the AAA WCAG requirements.
  • AA: You can use the colors together for text (any size) or affordances and meet the AA WCAG requirements. This criterion is the commonly accepted standard for accessibility.
  • AA18: You can use the colors together for large fonts (font size equal to or greater than 18 points or 14 points bold) or affordances and meet the AA WCAG requirements.
• If the color pair does not pass (DNP) WCAG requirements:
  • You cannot use these colors together except in purely decorative ways.

See Understanding Color, Contrast, and Single Sense (Ta11y) to learn more about color contrast requirements.

Step 4: Adding More Colors

Most color themes need more than the base colors used for the fundamental design elements. Typically, a design uses the base colors to create gradients that add lighter and darker shades of each base color to the overall color palette. It is particularly helpful to have multiple shades of the palette’s neutral color for borders, backgrounds, disabled buttons, and other elements in the design.

There are many ways to create color gradients. One option is to use pre-built gradients from an accessible design system like the U.S. Web Design System (USWDS). The gradients in the following figure are a sample of the many USWDS color gradients (color tokens) available in this system. The USWDS color system instructions explain which colors work with white and black and each other to be accessible. This approach means the hard work of determining how a design can combine colors is done. A design that uses a pre-built system like this has a ready-made, accessible color palette.

Figure 5: Four Color Gradients from the USWDS System Color Tokens

If a design must use specific colors, tools are available that can build custom color gradients similar to those used in the USWDS. Two palette generators that create color gradients based on WCAG contrast guidelines are the Leonardo Color Palette Generator and the ColorBox Color Palette Generator. To match the change in luminosity for each of the ten steps in the USWDS gradients, use a tool like hex code (RGB) to luminance converter to calculate the luminance of a color.

Remember to cross-check any added colors conveying information for accessibility. Most grid tools have a function that saves a palette, so adding new colors and checking the resulting color combinations in the updated grid is relatively easy.

Note

If you build an application using a JavaScript-based framework like React, Angular, or Bootstrap, these frameworks often come with a defined color theme or incorporate a design system like Material Design. Most design systems built at this scale include accessibility considerations in their development. However, even when the design system states they are accessible, you must verify the color combinations used in the design are accessible. To do this, you must understand how the different colors are combined when assigned to various elements. Any color customization will also impact accessibility. Again, use a grid tool like Eight Shapes to cross-check all the colors for contrast compliance.

Step 5: Applying the Color Theme

Here’s an example of the GOV.UK Design System colors on an official website. The UK Visa Application page is a typical page on the GOV.UK website showing a real-world application of the colors from their design system.

Figure 6: GOV.UK Visa Application Page Showing an Error

The web page in [this figure]{#figure6} consists of a banner, a main content area, and a footer area. It contains a form with an error message displayed, a “continue” button, and three links. One link has been visited. The page uses color as specified in the GOV.UK design system:

• Dark gray: Banner background and text in main and footer areas
• White: main background and banner text
• Light gray: footer background
• Blue: links and brand color
• Purple: visited links
• Red: error indicator and error message
• Green: button (this button color is part of the extended color palette)

The GOV.UK Design System is one of many accessible design systems shared online. Other accessible design systems are listed under “Tools for Checking & Creating Color Palettes” at the end of this topic.

Never Rely on Color Alone to Convey Information

Choosing colors with good contrast is half the story when building an accessible color theme. The other half is that you must not use color in ways that might “hide” information from some people. This aspect of accessibility is crucial for people who are colorblind or have low vision.

The guidelines for color state that one should never rely solely on color to convey information. The two following weather maps show information about depressions, storms, and hurricanes traveling through the Gulf of Mexico, using only color to identify different weather events. One map is in color, and one is in grayscale. Without seeing the color, it is impossible to know if an event is a depression, storm, or hurricane.

Figure 7: Weather Map that Relies on Color (Color and Grayscale)

Adding at least one indicator other than color is necessary to understand information when someone cannot see the color. Additional indicators can include:

• Text labels
• Icons or Symbols
• Contrast
• Size change
• Shape change
• Texture or pattern change
• Presence or absence

The next pair of images shows the same weather maps. One map is in color, and one is grayscale. This time, the indicators for depressions, storms, and hurricanes are different shapes and sizes and have text labels next to each event. With or without the use of color, it is easy to understand whether an event is a depression, storm, or hurricane.

Figure 8: Weather Map that Does Not Rely on Color (Color and Grayscale)

You must handle color the same way when designing a website. The GOV.UK website error for an incorrectly submitted passport date highlights the error by turning the date field borders red. It also places a heavy red bar next to the error and adds red text above the form field to explain it.

Figure 9: GOV.UK Website Error Indicators

Another typical example is changing a button’s color to indicate it has received focus. Because the color change tells people that the state of the button has changed, it conveys information. When color conveys information like this, there must be at least a 3:1 contrast between the colors used in the focused and unfocused button states to ensure that most people notice this change. When a color change meets the minimum WCAG contrast requirements, the contrast is considered a second indicator beside the color itself. Adding another indicator, such as a border, is even better.

Figure 10: Submit Button, Showing Unfocused and Focused States

See Never Rely on Color Alone (Ta11y) to learn more about using color to convey information.

Best Practices

Know that while higher-contrast colors are best to support people with low vision and color blindness, other people need to avoid very bright and very high-contrast colors.

• People who are neurodiverse are often sensory-sensitive and may find oversaturated, very high-contrast, or large areas of bright yellow unsettling. Avoid using oversaturated colors like these whenever possible.
• People with dyslexia, Irlen Syndrome, light sensitivity, and autism can have difficulties with high-contrast colors like 100% black text on a 100% white background. This problem is particularly true when there are large areas of white space. A dark gray text of 87% black (if on a white background) or an ivory background is a better choice to support this group.

Providing Multiple Color Themes

Although multiple color themes are not required, websites often provide more than one. For example, websites may have a dark mode that can be selected (a color theme using light text on a dark background).

If designed correctly, multiple color themes may help some people with color blindness, light sensitivity, cataracts, low vision, or chronic migraines. Different themes may also help some users adapt to their environment when switching from a bright to a dark environment. If you choose to have more than one color theme:

• The default color scheme must meet the minimum WCAG color usage and contrast requirements.
• Alternate color themes should also meet the minimum WCAG color usage and contrast requirements, especially if you have included them to enhance accessibility.
• Do not create custom high-contrast color themes. Individuals who need this option control the colors on their computer’s display using specialized accessibility software or system settings.

Consider providing a single adaptive color theme instead of creating multiple color themes. An adaptive color theme has options that let individuals adjust the contrast, lightness, and saturation levels for all colors. Supporting this level of personalization helps everyone, from individuals who are color blind or have low vision to someone who temporarily needs to adjust a display due to sun glare.

• This article on Adaptive Color in Design Systems provides a detailed explanation of adaptive color themes.
• This example from Color & Contrast shows how an adaptive color theme can work.

Letting People Choose Their Colors

Selecting a color theme that will always work for everyone is impossible. Ensure people can use browser settings, platform settings such as Ease of Access (Windows OS), or assistive technologies such as ZoomText (Freedom Scientific) to override the design’s colors and replace them with the colors that best meet their needs. Tools like Ease of Access and ZoomText can override color settings in websites and documents, although most will not affect images.

Use website media queries to ensure user settings have precedence over the site’s defined colors. Media queries provide an easy way to support individuals who have selected preferences for alternate color themes in their operating system or browser settings. However, not everyone who would benefit from these settings knows they exist, so do not rely on media queries as the sole solution to provide an accessible color theme.

• Use the “prefers-color-scheme” media query to support user selection of light and dark themes.
• Use the “prefers-contrast” media query to support user selection of a high-contrast color theme.

By adding a media query, color settings controlled by a website’s Cascading Style Sheet (CSS) can be automatically disabled or replaced with a different action. You can add the media query code to the website’s CSS. Most browsers support media queries.

• See Color Control (Ta11y) for more information on using these media queries.
• For information on implementing these two media queries, see prefers-color-scheme and prefers-contrast in the Mozilla Developer Network (MDN) References.

Tools for Checking & Creating Color Palettes

Various tools can help choose and check accessible colors to create an accessible color theme. These tools fall into four basic categories, with some overlap as many are multipurpose. Below are a few tools for each category.

Color contrast checkers

Basic contrast checkers compare two or more colors against the WCAG color criteria, return contrast ratios, and pass/fail results.

• WebAIM Color Contrast Checker and the Colour Contrast Analyser are good contrast checkers, but many others are available. Colour Contrast Analyser is one of the few desktop tools for checking color contrast.
• Eight Shapes is one of the available grid-based color contrast checkers. These tools often simplify and speed up testing by checking many color combinations at one time.
• WCAG 2.1 Color Contrast Checker for Figma is a basic contrast checker available as a Figma plug-in. This plug-in is a handy addition to the Figma toolkit for designers working with this popular interface design application.
• Some contrast-checkers include additional features such as color blindness simulators.

Color blindness simulators

These tools process colors through color blindness filters to show what the colors look like for different types of color blindness. While these are simulations, they can help evaluate color combinations.

• You can simulate the effect of color blindness by viewing or printing the content in grayscale.
• Color Oracle and the Toptal Webpage Color Blindness Simulator are two of the many available color blindness simulators. Color Oracle is one of the few available as a desktop tool.
• Some multi-purpose tools like the Colour Contrast Analyser include contrast checkers and color blindness simulators.

Color palette generators

These tools can build a palette of multiple colors and identify, at a minimum, which colors work with white or black text for a specified WCAG level. Some palette generators test against WCAG levels, and some test all the colors in a palette against each other. Some generators build gradients of multiple steps for each color in a palette.

• Adobe Color Tool: This tool can generate an initial color palette based on a brand color, logo, image, or one of Adobe’s pre-built color palettes. The palettes are based on established rules for building color schemes designed around the color wheel and can help select colors that work together. The Adobe Color Tool includes an accessibility contrast checker and a unique simulator that provides feedback on which colors in the chosen palette can safely be used together for different types of color blindness.
• Paletton and Muzli Colors: These palette generators create color palettes based on an initial color and use established rules designed around the color wheel, similar to the Adobe color tool. However, each has a unique approach. They do not include accessibility checkers or color blindness simulators.
• Leonardo Color Palette Generator and ColorBox Color Palette Generator: These tools are good options for building color gradients based on WCAG contrast guidelines.

Accessible design systems

These design systems have pre-built color palettes and include guidance on using the provided colors in ways that meet accessibility guidelines. They are worth exploring to see how they selected and used colors in their components and layouts. These systems are good examples of how color can be used accessibly, even in complex designs.

• The GOV.UK Design System and the U.S. Web Design System are accessible design systems.
• Many other systems consider accessibility in their design. These systems include the W3C Design System, Adobe Spectrum Design System, Google Material Design System, IBM Carbon Design System, Shopify Polaris Design System, and Salesforce Lightning Design System.

See Color Tools (Tally) for more tools and information on each color-checking tool, including examples of each type.

References

• Understanding Minimum Contrast Success Criteria (W3C)
• Understanding Non-Text Color Contrast Success Criteria (W3C)
• Understanding Use of Color Success Criteria (W3C)
• Color accessibility: tools and resources to help you design inclusive products
• How To Actually Implement Your UI Color Palette
• A Practical Guide to Color Theory and Color Palettes (video)
• What Is Color Theory? Meaning & Fundamentals
• The Ultimate UX Guide to Color Design
• How to Make a Palette Accessible
• Adaptive Color in Design Systems
• Color & Contrast
• Creating contrast-based Themes with Leonardo
• Retrofitting for an Accessible Color Palette (video)
• Relative Luminance Calculator (PlanetCalc)

Citations

• GOV.UK Design System Colors, 31 January 2023, licensed under the Open Government Licence v3.0.
• UK Visa Application page, 23 February 2016, licensed under the Open Government Licence v3.0.