Link Colors and Color Contrast for ADA

I got this very useful document related to ADA compliance from SchoolMessenger to other day and thought you all might be interested. We will be selecting colors from the ‘safe’ list in the document for each school matching as close as feasible one of the school colors.

Links with a 3:1 contrast ratio with surrounding text

Link color #3333FF (3.1:1 vs. black)

The following paragraph shows essentially what this blue color would look like to most people, including most people with limited color vision. When color is used, a blue color is recommended because it is affected very little by red and green color blindness (Protanopia and Deuteranopia).

Link color #5E5E00 (3.1:1 vs. black)

The following paragraph gives an idea of what red or green links with a 3:1 contrast ratio might look like to people with protanopia and deuteranopia.

Link color #5A5A5A (3:1 vs. black)

A very small portion of the population has total color blindness. For these users, a 3:1 contrast ratio would be less usable (no color difference) but can still be seen. For example, try to count the links in the paragraph below. You can see that it is possible to differentiate them from the rest of the text.

Note: The use of color plus luminosity is used in this technique while luminsity alone is used for contrast. This is because this technique is about telling the difference (a noticeable difference) between pieces of text whereas the contrast measure is about the readability of the text with its background for different color and vision disabilities.

The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white