{"id":427,"date":"2018-01-19T10:06:22","date_gmt":"2018-01-19T14:06:22","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=427"},"modified":"2019-02-25T11:43:15","modified_gmt":"2019-02-25T16:43:15","slug":"link-colors-and-color-contrast-for-ada","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/link-colors-and-color-contrast-for-ada\/","title":{"rendered":"Link Colors and Color Contrast for ADA"},"content":{"rendered":"

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.
\n<\/span><\/p>\n

Links with a 3:1 contrast ratio with surrounding text
\n<\/span><\/p>\n

Link color #3333FF (3.1:1 vs. black)
\n<\/span><\/p>\n

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).
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Link color #5E5E00 (3.1:1 vs. black)
\n<\/span><\/p>\n

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.
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Link color #5A5A5A (3:1 vs. black)
\n<\/span><\/p>\n

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.
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Note: <\/strong>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.
\n<\/span><\/p>\n

The following 26 web-safe colors pass at 3:1 vs black and 5:1 vs. white
\n<\/span><\/p>\n

\n\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Color Value<\/strong><\/span><\/td>\n\n

Color Swatch<\/strong><\/span><\/p>\n<\/td>\n

\n

Colored Text Sample<\/strong><\/span><\/p>\n<\/td>\n<\/tr>\n

#CC0000<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#CC0033<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#CC0066<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#CC0099<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#9900CC<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#6600FF<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#9900FF<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#CC3300<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#CC3333<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#993366<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#993399<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#9933CC<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#3333FF<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#6633FF<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#336600<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#666600<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#336633<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#666633<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#006666<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#336666<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#666666<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#006699<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#336699<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#666699<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#0066CC<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n
#3366CC<\/span><\/td>\n\u00a0\u00a0<\/span><\/td>\nThe quick brown fox<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

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 … <\/p>\n

Continue reading “Link Colors and Color Contrast for ADA”<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,30,34],"tags":[48,47,41,50],"class_list":["post-427","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-news-related-to-site-governance-at-ocps","category-something-to-think-about-related-to-web-sites","tag-accessibility","tag-ada","tag-governance","tag-links"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":471,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlink-colors-part-2\/","url_meta":{"origin":427,"position":0},"title":"Hyperlink Colors \u2013 Part 2","author":"Carlos Hernandez","date":"February 7, 2018","format":false,"excerpt":"SchoolMessenger has completed their update of school hyperlink colors. In most cases our color recommendation was accepted. However, some of our selections were overridden by SchoolMessenger to provide for better ADA compliance with all possible viewers including those with various color blindness. (I posted a document on color blindness in\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1621,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/fixing-color-contrast-issues-revisited\/","url_meta":{"origin":427,"position":1},"title":"Fixing Color Contrast Issues – Revisited","author":"Carlos Hernandez","date":"January 7, 2021","format":false,"excerpt":"One of the more common compliance issues with ADA (Americans with Disabilities Act) is also one of the easiest to fix. Color contrast in relation to the text on the background requires that the text be easy to read by all users who access your website visually. Color contrast measures\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"Tanaguru Contrast Finder Specifying the original foreground and background colors","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2021\/01\/010721_1401_FixingColor2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2021\/01\/010721_1401_FixingColor2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2021\/01\/010721_1401_FixingColor2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2021\/01\/010721_1401_FixingColor2.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":1527,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/white-on-orange-is-not-ada-compliant\/","url_meta":{"origin":427,"position":2},"title":"White on Orange is not ADA Compliant","author":"Carlos Hernandez","date":"July 21, 2020","format":false,"excerpt":"The Issue One issue that seems to be repeated across many pages of the Internet, intranet, and even school sites is the use of white text on a background of orange as shown in the image below. However, even though you may not have color blindness issues, people who do\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1561,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/use-of-colors-and-icons-on-calendars\/","url_meta":{"origin":427,"position":3},"title":"Use of Colors and Icons on Calendars","author":"Carlos Hernandez","date":"November 1, 2020","format":false,"excerpt":"I've noticed two trends which school web editors should address as soon as possible. I will cover one this time and one next time. Today I would like to look at the use of colors on calendars. However, before we get into colors, I want to make mention that many\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"Color and Icon options when adding a new Calendar Event","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/10\/102920_1651_UseofColors1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1326,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/font-size-points-vs-pixels\/","url_meta":{"origin":427,"position":4},"title":"Font Size: Points vs Pixels","author":"Carlos Hernandez","date":"October 23, 2019","format":false,"excerpt":"For months, I have talked about color contrast issues. The basic rule is as follows: In order to meet Level AA guidelines for color contrast under 1.4.3 of the WCAG, text to background color contrast must be 3:1 or greater for all text 18 points or larger or 14 points\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1123,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-aa-errors-with-links\/","url_meta":{"origin":427,"position":5},"title":"Monsido Accessibility Level AA Errors with Links","author":"Carlos Hernandez","date":"May 1, 2019","format":false,"excerpt":"Last time, I looked at the Level A accessibility errors related to links. This time, I am moving up to the Level AA link issues. To be compliant at the AA level of WCAG, you must first be compliant at the A level. So what does Level AA add to\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=427"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/427\/revisions"}],"predecessor-version":[{"id":1008,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/427\/revisions\/1008"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}