Skip to Main Content
Purdue University Purdue Logo Purdue Libraries

Digital Accessibility Skills

Learn about how the core digital accessibility skills; headings, links, color contrast, lists, alt text, captions, and tables can help you create more accessible digital content.

Color Contrast

Accessible contrast can help individuals with low vision or colorblindness. It is important to have sufficient contrast between the background and foreground colors.

Tasks where this would be useful in day-to-day workflows may include:

  • Creating and editing webpages/content: Research guides (LibGuides, tutorials, webpages (WordPress, Brightspace, Confluence, etc.)
  • Developing instructional materials: Syllabi, handouts and worksheets, videos, infographics, flowcharts, or other graphics, grading rubrics/assessments tools
  • Document and presentation creation: Newsletters, SOPs, reports, slides (PowerPoint, Google Slides, Canva, etc.) word processing files (Word and Google docs)

Guidelines

  • Run contrast scanners
  • Looking at the contrast ratio. Per WCAG 2.1
    • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1,
    • The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)

Example

Topics being considered for our first meeting are below, in red. Remaining topics will be considered for future meetings.

  • Safety and security
  • AI impacts
  • Sustainability
  • Promotion
  • Budget

What's wrong with this?

  • If someone is unable to distinguish red from the other colors, they won't be able to tell what topics are expected to be covered in the first meeting.
  • The red color used above on a white background has a contrast ratio of 4.33:1 which is lower than the 4.5:1 ratio that meets the technical standard, especially for small text.

Topics being considered for our first meeting are below, in bold. Remaining topics will be considered for future meetings.

  • Safety and security
  • AI impacts
  • Sustainability
  • Promotion
  • Budget

Why is this better?

  • The reader will likely be able to tell differentiate the bold text from the regular text, regardless of the color. 

 

Tip: To make this example even more accessible, consider creating two lists; the first with "AI impacts" and "Budget" as topics for the first meeting, and a second with the remaining topics. Another option would be to include the topics for the first meeting in a statement, and then list the remaining topics below.

Resources

Here are some general resources that will help you learn more about color contrast.

Here are platform specific resources that will help you create accessible color palettes or check color contrast.

The following are criteria from the Web Content Accessibility Guidelines (WCAG) that relate to this skill. Please note that only level A and level AA criteria are listed.