Â鶹¹ú²úAV

Digital accessibility: color and contrast

People who are colorblind, have certain visual impairments, or use different contrast settings on their devices may not be able to understand your content if you use color alone to provide meaning. Similarly, they may not be able to see components of your content if the color contrast is not sufficient.

Avoid using color alone to provide meaning

• Use bold or italics, with or without color, to show emphasis in text.
• In figures or graphs, use labels along with color. If you can't include labels, consider using simple patterns rather than color alone.
• Remember to ensure sufficient contrast whenever you use color.

Ensure sufficient color contrast

• Color contrast between small text (less than 18 point) and the background color must be at least 4.5:1.
• Color contrast between larger text (18 point or larger) and the background color must be at least 3:1.
• Color contrast between two adjacent parts of a figure that communicates information must be at least 3:1. For example, the contrast between two adjacent parts of a pie graph must meet this requirement.
• These requirements are minimums, and higher contrast is often helpful. This is especially true when you are designing slide decks, which are often projected and viewed from different distances.
• While we recommend using default themes in Microsoft PowerPoint or Google Slides, be aware that some themes do not meet minimum contrast requirements, especially for smaller text. Choose high-contrast themes when creating slide decks.

Checking color contrast

• There are many color contrast checkers available. We recommend the , which is available for free online.
• To use the checker
  • Open the document or web page where you want to check color contrast.
  • Open the WebAIM Contrast Checker in your browser. It may be helpful to open the contrast checker in a new browser window if you plan to check the contrast of web content in the same browser.
  • Choose the colors you'd like to check using the color picker. Although the boxes are labeled foreground and background, the color contrast will be the same regardless of which color you choose for which box.
    • In most cases, it's easiest to check existing colors on your document or page. To do this, click on the colored box under the heading color picker. A color picker window will appear.

• • • • If necessary, navigate back to your document or web page. The color picker window will remain open.
      • Select the eyedropper icon in the color picker window. A zoom area with a small central rectangle will appear. Select the color you want to check by moving the central rectangle over the color on the page and clicking. You'll see the color picker populate with your selected color.

• • • • Important: Close the color picker window to save your selection to the Contrast Checker.
      • Repeat for the other color.
  • The WebAIM contrast checker will show the contrast ratio between the two colors, as well as information about whether the contrast passes various accessibility standards. You want to be sure the contrast passes WCAG AA for your use.