{"id":1426,"date":"2020-01-29T08:44:37","date_gmt":"2020-01-29T13:44:37","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1426"},"modified":"2020-01-29T09:00:54","modified_gmt":"2020-01-29T14:00:54","slug":"color-contrast-in-the-calendar","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/color-contrast-in-the-calendar\/","title":{"rendered":"Color Contrast in the Calendar"},"content":{"rendered":"<p>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 low vision issues. ADA Color Contrast rules are as following in case you have forgotten:<\/p>\n<ul>\n<li>The Color Contrast must be at least 3:1 or better for text that is 18 pt (24 px) or bold 14 pt (19 px) and larger.<\/li>\n<li>The Color Contrast for anything smaller than the above rule must be 4.5:1 or better.<\/li>\n<\/ul>\n<p>Note that I give you both the pt and px values for the text because these are not the same.<\/p>\n<p>I could give you the formula on how to calculate the color contrast based on the RGB values of the color, but do you really want to get into all of that math. There are several tools available to do this. The one that I have used for years (and so do many major corporations) is from The Paciello Group (<a href=\"https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/\">https:\/\/developer.paciellogroup.com\/resources\/contrastanalyser\/<\/a>).<\/p>\n<p>The advantage of using a tool is that it removes any guesswork as to whether your colors are compliant out of the picture. While in some cases, you can look at an image and instantly recognize that the color contrast is not sufficient as in the following figure.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra1.png\" alt=\"\" \/><\/p>\n<p>The white text on a lime green is very difficult for even me to read and I do not have any color contrast vision issues (that I know of.) But the tool tells me that the contrast is only 1.3:1. This is extremely low as white text on a white background is the base comparison and has a ratio of 1:1.<\/p>\n<p>Other color contrast issues may not be as obvious. Take for example the commonly used white on orange within the district (because we are Orange County?). In this case, the contrast ratio is a little better, but it is still only 2.1:1 which according to ADA rules is not even sufficient for large text.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra2.png\" alt=\"\" \/><\/p>\n<p>In some cases, I might never have guessed that the color contrast was not sufficient because it is close to the borderline of what is acceptable for larger and\/or bolded text. The following example shows a darker orange that just falls under the 3:1 ratio needed for larger text.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra3.png\" alt=\"\" \/><\/p>\n<p>In all three of these cases, the colors used fail the contrast ratio test and must be replaced with other colors. How can you do that? Color contrast can help you. By clicking on the dropdown arrow next to the Colour selected field, a dialog appears that shows different shades\/tints of the current color in two rows across the bottom of the dialog. The leftmost box in the first row is the current color, which in this case has the Hex value of #FF6600. The rest of the colors on this row add white to create &#8216;lighter&#8217; shades. However, because we want &#8216;darker&#8217; shades, we must drop down to the second row. The leftmost box in the second row has a hex value of #D95700.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra4.png\" alt=\"\" \/><\/p>\n<p>If you were to use this shade of dark orange, the contrast improves to 4.0:1 which may be fine for the calendar because it is a bolded text that may be large enough<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra5.png\" alt=\"\" \/><\/p>\n<p>To be really sure that the color contrast is sufficient, you could choose the second box from the left which has a hex value of #C04D00 and provides a contrast ratio of 4.9:1.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra6.png\" alt=\"\" \/><\/p>\n<p>Even after finding a color that meets or exceeds the color contrast value for the font size and style you are using, you can also perform one additional check. The Colour Contrast tool I&#8217;ve shown here has an option to let you see the color contrast ratios of the three most common forms of color blindness. To switch to this view, open the Options dialog:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra7.png\" alt=\"\" \/><\/p>\n<p>Using the last color selected above (#C04D00) which provides a contrast ratio of 4.9:1, we can see what the color contrast ratio might be for people with different types of color blindness.<\/p>\n<p style=\"margin-left: 36pt;\"><em>Color blindness, also known as color vision deficiency, is the decreased ability to see color or differences in color. Simple tasks such as selecting ripe fruit, choosing clothing, and reading traffic lights can be more challenging. Color blindness may also make some educational activities more difficult. However, problems are generally minor, and most people find that they can adapt. People with total color blindness (achromatopsia) may also have decreased visual acuity and be uncomfortable in bright environments.<br \/>\n<\/em><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012920_1344_ColorContra8.png\" alt=\"\" \/><\/p>\n<p>Note that in this case, people with Deuteranopia color blindness still have a problem with this color as it provides a ratio of only 4.1:1 to them. This means you may need to go even darker.<\/p>\n<p style=\"margin-left: 36pt;\"><em>Deuteranopia is a type of color blindness more commonly known as\u00a0red-green color blindness. People with this condition have difficulty distinguishing between shades of green and shades of red<br \/>\n<\/em><\/p>\n<p><span style=\"color: #111111; font-family: Roboto; background-color: white;\">Unfortunately, in the case of the calendar titles, you do not have the option of making the text white for some cells and black for other cells which would give you more options for color selection.<br \/>\n<\/span><\/p>\n<p><span style=\"color: #111111; font-family: Roboto; background-color: white;\">Anyway, I hope this helps.<br \/>\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 low vision issues. ADA Color &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/color-contrast-in-the-calendar\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Color Contrast in the Calendar&#8221;<\/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,33],"tags":[125,142],"class_list":["post-1426","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-post-that-explains-how-to-perform-a-specific-activity","tag-color-contrast","tag-colour-contrast-analyzer"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1326,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/font-size-points-vs-pixels\/","url_meta":{"origin":1426,"position":0},"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 &quot;ADA News&quot;","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":1527,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/white-on-orange-is-not-ada-compliant\/","url_meta":{"origin":1426,"position":1},"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 &quot;ADA News&quot;","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":1426,"position":2},"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 &quot;ADA News&quot;","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":1621,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/fixing-color-contrast-issues-revisited\/","url_meta":{"origin":1426,"position":3},"title":"Fixing Color Contrast Issues &#8211; 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 &quot;ADA News&quot;","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":1123,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-aa-errors-with-links\/","url_meta":{"origin":1426,"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 &quot;ADA News&quot;","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":427,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/link-colors-and-color-contrast-for-ada\/","url_meta":{"origin":1426,"position":5},"title":"Link Colors and Color Contrast for ADA","author":"Carlos Hernandez","date":"January 19, 2018","format":false,"excerpt":"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\u2026","rel":"","context":"In &quot;ADA News&quot;","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\/1426","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=1426"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1426\/revisions"}],"predecessor-version":[{"id":1428,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1426\/revisions\/1428"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1426"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1426"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}