Adequate Color Contrast

Owned by Stuti Desai
Jul 10, 2024
2 min read

This article is for students, faculty, and staff to get more information on how to use adequate color contrast when creating or editing Word documents.

Accessible Colors

  • Contrast Font 18 and higher 3:1 contrast ratio

  • Contrast Font below 18 4.5:1 contrast ratio

  • Do not use color alone to convey information

  • Avoid using Red and Black or Red and Green combinations

  • Avoid using text on Images

  • Use tools to check color contrast and simulate color blindness

Color Contrast Checkers

  1. Open the WebAIM application

  2. Under foreground, enter the Hex Value of the text color or click on color picker and choose the color

  3. Under background, enter the Hex Value of the background color or click on color picker and choose the color

  4. The Contrast Ratio provides you with the ratio that correlates with the colors that are inputted, if it has a green box around it that means the colors are mostly accessible

  5. There is also more information below for if the tests for normal text, large text, and graphical objects were passed or failed.

This is useful for suggestions on selecting alternate accessible colors

  1. Open the Color Contrast Pal application

  2. Click on Foreground color and choose the color for the text

  3. Click on Background color and choose the color for the background that is surrounding the text

  4. The contrast ratio will then be written in the top section

  5. If the colors are not passing the test, then there will be an option that pops up to auto-adjust the foreground to meet the WCAG AA standards. The new hex value for the accessible foreground color will pop up next to the “Foreground Color” section.

  1. Download the Colour Contrast Analyzer application

  2. Navigate to the page where the CCA Tool needs to be utilized

  3. On the CCA tool, click on the dropper tool in the “Foreground” section and select the text

  4. Next, click on the dropper tool in the “Background” section and get at close to the text as possible

  5. Reading the results:

    1. The color contrast ratio is going to be shown on the bottom near the “WCAG 2.1 results” section

    2. There are three dropdowns that explain if the tests have passed or not