{"id":1527,"date":"2020-07-21T15:15:10","date_gmt":"2020-07-21T19:15:10","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1527"},"modified":"2020-07-21T15:15:13","modified_gmt":"2020-07-21T19:15:13","slug":"white-on-orange-is-not-ada-compliant","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/white-on-orange-is-not-ada-compliant\/","title":{"rendered":"White on Orange is not ADA Compliant"},"content":{"rendered":"

The Issue<\/h2>\n

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 may find this combination difficult to see. Using the recommended Colour Contrast Analyser you can see that even for normal vision, the contrast between orange and white is only 2.2:1. (No, it does not matter which color you select as the text and which you select as the background, color contrast is only based on the difference between the two colors.)<\/p>\n

\"The<\/p>\n

What are the ADA rules for color contrast? The contrast must be at least 3:1 or greater for 18 pt (24 px) text or 14 pt (18.5 px) bold text or greater. All other text must have a contrast of 4.5:1. While there is no argument that the font size shown here is greater than 14pt bold, it still does not meet or exceed the 3:1 lower limit for contrast.<\/p>\n

The contrast ratio is even worse if you look at the contrast as seen by people with different color blindness as shown in this figure which comes from the same tool.<\/p>\n

\"The<\/p>\n

People with Deuteranopia see this color contrast ratio as only 2.0:1.<\/p>\n

Protanopia:<\/strong> Red-Green color blindness relates to a person’s sensitivity to red or green light.<\/p>\n

Deuteranopia:<\/strong> A variation of red-green color blindness is the most common form and afflicts 6% of males<\/p>\n

Tritanopia:<\/strong> Blue-Yellow color blindness that causes a person to confuse blue with green and yellow with violet.<\/p>\n

Colour Contrast Analyser is a free utility that can be downloaded from: https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/<\/a><\/p>\n

If you are a web editor for your department or school site, please download and start using this free tool to make sure the contrast between your font color and background color meet or exceed the recommended ratios defined above.<\/p>\n

Another common color contrast failure is red text on a white background for links on some our school websites that have red as one of their school colors:<\/p>\n

\"A<\/p>\n

However, changing the shade of red from a value of 255 to 224 will pass the level AA test for smaller fonts which are used in links.<\/p>\n

\"But<\/p>\n

The Bottom Line<\/h2>\n

This color combination, even though we are in Orange County, cannot be used on web page (or even printed documents). You could go with a darker orange even orange text on a black banner (contrast of 9.4:1), but white on orange or orange on white cannot be allowed. Please check your website pages and make necessary corrections to this and any other color combinations that may fail the colour contrast test.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 may find this combination difficult … <\/p>\n

Continue reading “White on Orange is not ADA Compliant”<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","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],"tags":[125],"class_list":["post-1527","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","tag-color-contrast"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1426,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/color-contrast-in-the-calendar\/","url_meta":{"origin":1527,"position":0},"title":"Color Contrast in the Calendar","author":"Carlos Hernandez","date":"January 29, 2020","format":false,"excerpt":"While I truly understand the desire to use different colors for event titles in your calendar, you should only do so with full concern about ADA Color Contrast issues. Color Contrast is a mathematical interpretation of the degree of contrast between two colors which affects people with some to severe\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":1527,"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":1326,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/font-size-points-vs-pixels\/","url_meta":{"origin":1527,"position":2},"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":1561,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/use-of-colors-and-icons-on-calendars\/","url_meta":{"origin":1527,"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":1123,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-aa-errors-with-links\/","url_meta":{"origin":1527,"position":4},"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":[]},{"id":1611,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/shorts-decorative-images-text-images-and-color-contrast\/","url_meta":{"origin":1527,"position":5},"title":"Shorts \u2013 Decorative Images, Text Images, and Color Contrast","author":"Carlos Hernandez","date":"December 17, 2020","format":false,"excerpt":"Decorative Images I want to visit images again to review a couple of common issues I have seen on sites. These issues are easy to recognize if one simply ties to adopt the mindset of a blind or vision impaired person. First, a blind person relies on a screen reader\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":"A bear driving a school bus of third graders?","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/12\/121720_1326_ShortsDecor1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1527","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=1527"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1527\/revisions"}],"predecessor-version":[{"id":1529,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1527\/revisions\/1529"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}