Your browser is unsupported

We recommend using the latest version of IE11, Edge, Chrome, Firefox or Safari.

Checking Color Contrast for Digital Accessibility

Ryan Lemke | Posted on March 06, 2026

Weekly Accessibility Tips

 

Dear Colleagues,

 

Use the Color Contrast Tip Sheet to learn how to check the color contrast of the text and graphics you use in your content. UIC requires color contrast to meet WCAG Level AA standards.

 

Instructions on using a color contrast checker:

  1. Open WebAim Color Contrast Checker. There will be two boxes on the page: foreground and background colors.
  2. Choose a method to enter the foreground color in the box and then repeat the process for the background color box:
    1. RGB hex code method
      1. Type the RGB hex code in the text box below the words “Hex Value.”
    2. Color gradient method
      1. Click the button below the words “Color picker.” A pop-up will appear with a color gradient.
      2. Choose the color you want on the gradient.
      3. Adjust the color's lightness using the lightness sliding scale under the color picker button.
    3. Color picker method
      1. First, open the window with the colors you want to test (Example: a document or webpage). 
      2. Place the window next to the color contrast checker window so they are visible at the same time.
      3. On the WebAim window, click the button below the words “Color picker.” A pop-up will appear with color options. 
      4. Click the button below the color gradient that has an image of a dropper. A dropper will replace your mouse.
      5. Hover your mouse over the foreground color you want to test, and then click.
      6. Repeat the process with the background color.
  3. Once you've selected your colors, scroll down to see your results.
    1. The contrast should pass the WCAG Level AA tests according to where the color comes from (Normal text, large text, or graphical objects and user interface components)

 

Resources:

 

To save this information, download the Color Contrast Tip Sheet. If you have any questions or require additional support, you can drop in during an Accessibility Specialist office hours or submit a support ticket.