Color

Color is an important factor in the design of web content, enhancing its aesthetic appeal, usability, and accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color. Therefore, colors must be chosen carefully with these considerations in mind, and color should not be the only means of differentiation between elements. For more information, see WCAG 2.1 Sections 1.4.3: Contrast (Minimum).

Requirements

To pass WCAG 2.1 AA-level compatibility, the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • 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.
  • Text that is part of a logo or brand name has no contrast requirement.

Contrast Table

The following table shows all combinations of our color values and whether they meet the AA-level contrast ratio of 4.5:1 discussed above.

AA Pass  
AA Fail  
@brand-primary
@brand-primary-highlight
@brand-secondary
@brand-secondary-highlight
@state-success-text
@state-success-bg
@state-success-border
@state-warning-text
@state-warning-bg
@state-warning-border
@state-danger-text
@state-danger-bg
@state-danger-border
@state-info-text
@state-info-bg
@state-info-border
@text-color
@link-color
@link-hover-color
@black
@gray-darkest
@gray-darker
@gray-dark
@gray
@gray-light
@gray-lighter
@gray-lightest
@white
@brand-primary text text text text text text text text text text text text text text text text text text text text text text text text text text text
@brand-primary-highlight text text text text text text text text text text text text text text text text text text text text text text text text text text text
@brand-secondary text text text text text text text text text text text text text text text text text text text text text text text text text text text
@brand-secondary-highlight text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-success-text text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-success-bg text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-success-border text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-warning-text text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-warning-bg text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-warning-border text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-danger-text text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-danger-bg text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-danger-border text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-info-text text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-info-bg text text text text text text text text text text text text text text text text text text text text text text text text text text text
@state-info-border text text text text text text text text text text text text text text text text text text text text text text text text text text text
@text-color text text text text text text text text text text text text text text text text text text text text text text text text text text text
@link-color text text text text text text text text text text text text text text text text text text text text text text text text text text text
@link-hover-color text text text text text text text text text text text text text text text text text text text text text text text text text text text
@black text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-darkest text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-darker text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-dark text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-light text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-lighter text text text text text text text text text text text text text text text text text text text text text text text text text text text
@gray-lightest text text text text text text text text text text text text text text text text text text text text text text text text text text text
@white text text text text text text text text text text text text text text text text text text text text text text text text text text text

Resources

See also the mobile color palettes for iOS and Android, as well as the Color Palette page.

Color Contrast Checkers