Accessibility for Color and Contrast

Accessibility for Color and Contrast

• This tool can be used to check for color contrast accessibility.

  • To check a page/assignment/discussion/quiz for color accessibility, go to the EDIT button that you are checking.

  • Switch to HTML

    

  • Look for the HTML code of the content you’d like to check. It should be near the text you are assessing and should say “color: #_ _ _ _ _ _ ;” (numbers or letters). Copy the hexcode. Example: #e03e2d

  • Use the contrast checker by pasting the hexcode into the AIM tool for Foreground:

    

  • Next, add the background. The code for white is #FFFFFF and

    
    

    black is #000000.

    
    

    

  • Check to see if the contrast passed or failed.

  • If it fails, move the Lightness slider (blue slider) until all the text says Pass. The color below passed because it is darker.

    

  • Copy and paste the new hexcode, including the # symbol, to replace the previous color. Add the hexcode to all the spots in the HTML in the page/assignment/discussion/quiz.

    • Note: While the HTML is open, you can click Ctrl + F to highlight all the instances in the HTML where you will need to change the color. Do this by replacing the original HTML color code: #e03e2d with the new #972A20