Color

Key Principles for Using Color Accessibly

Don’t Rely on Color Alone to Convey Meaning

Always pair color with a visual indicator to make a meaning clear to all users. For example, when marking a required field, it can be shown in red and have an asterisk (*) as a visual indicator.

Ensure Sufficient Color Contrast

Users must be able to distinguish text from the background. Follow the WCAG 2.1 requirements to ensure color contrast is met.

  • Normal text (below 18pt or 14pt bold): Minimum contrast ratio of 4.5:1
  • Large text (18pt or 14pt bold and up): Minimum contrast ratio of 3:1
  • Non-text elements (ex. icons, graphs): Contrast ratio of 3:1 against adjacent colors

There are many tools to test contrast including:

Consider Different Types of Color Vision Deficiency

Types of color-blindness:

  • Red-Green color blindness (protanopia/deuteranopia)
  • Blue-yellow color blindness (tritanopia)
  • Monochromacy (no color perception)

Use color blindness simulators for testing:

  • Coblis - Color Blindness Simulator
  • Chrome DevTools > Ctrl + Shift + P to open Rendering tab > Scroll down to Emulate vision deficiencies

Allow Users to Choose Preferred Colors

Support user stylesheets or high contrast modes by:

  • Avoiding !important in your CSS
  • Using semantic HTML
  • Ensure content remains readable with custom themes or OS settings

Related WCAG 2.1 Success Criteria

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:  Hide full description

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):  Hide full description

  • User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
  • Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:  Hide full description

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no contrast requirement.