{"id":30493,"date":"2026-03-06T17:28:24","date_gmt":"2026-03-06T23:28:24","guid":{"rendered":"https:\/\/ahs.uic.edu\/inside-ahs\/?post_type=news&p=30493"},"modified":"2026-03-06T17:28:24","modified_gmt":"2026-03-06T23:28:24","slug":"checking-color-contrast-for-digital-accessibility","status":"publish","type":"news","link":"https:\/\/ahs.uic.edu\/inside-ahs\/news-stories\/checking-color-contrast-for-digital-accessibility\/","title":{"rendered":"Checking Color Contrast for Digital Accessibility"},"template":"","news_categories":[91,23,65],"news_tags":[],"class_list":["post-30493","news","type-news","status-publish","hentry","news_categories-accessibility","news_categories-admin-note","news_categories-inside-ahs"],"acf":{"intro_text_subtitle":"Weekly Accessibility Tips","hide_subtitle":false,"intro_text_body":"

 <\/p>\n

Dear Colleagues,<\/p>\n

 <\/p>\n

Use the Color Contrast Tip Sheet<\/a> 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.<\/span><\/p>\n

 <\/p>\n

Instructions on using a color contrast checker:<\/strong><\/p>\n

    \n
  1. Open<\/span> WebAim Color Contrast Checker<\/span><\/a>. There will be two boxes on the page: foreground and background colors.<\/span><\/li>\n
  2. Choose a method to enter the foreground color in the box and then repeat the process for the background color box:<\/span>\n
      \n
    1. RGB hex code method<\/span>\n
        \n
      1. Type the RGB hex code in the text box below the words \u201cHex Value.\u201d<\/span><\/li>\n<\/ol>\n<\/li>\n
      2. Color gradient method<\/span>\n
          \n
        1. Click the button below the words \u201cColor picker.\u201d A pop-up will appear with a color gradient.<\/span><\/li>\n
        2. Choose the color you want on the gradient.<\/span><\/li>\n
        3. Adjust the color’s lightness using the lightness sliding scale under the color picker button.<\/span><\/li>\n<\/ol>\n<\/li>\n
        4. Color picker method<\/span>\n
            \n
          1. First, open the window with the colors you want to test (Example: a document or webpage).\u00a0<\/span><\/li>\n
          2. Place the window next to the color contrast checker window so they are visible at the same time.<\/span><\/li>\n
          3. On the WebAim window, click the button below the words \u201cColor picker.\u201d A pop-up will appear with color options.\u00a0<\/span><\/li>\n
          4. Click the button below the color gradient that has an image of a dropper. A dropper will replace your mouse.<\/span><\/li>\n
          5. Hover your mouse over the foreground color you want to test, and then click.<\/span><\/li>\n
          6. Repeat the process with the background color.<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n
          7. Once you’ve selected your colors, scroll down to see your results.<\/span>\n
              \n
            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)<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

               <\/p>\n

              Resources:<\/strong><\/p>\n