{"id":641,"date":"2024-06-19T12:43:30","date_gmt":"2024-06-19T12:43:30","guid":{"rendered":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/?p=641"},"modified":"2024-06-19T12:48:46","modified_gmt":"2024-06-19T12:48:46","slug":"learning-about-contrast","status":"publish","type":"post","link":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/learning-about-contrast\/","title":{"rendered":"Learning about contrast"},"content":{"rendered":"<p>At our most recent Centre for Medical Education Equality, Diversity and Inclusion Committee meeting we were looking at some posters. A colleague mentioned that they found the posters quite difficult to read and talked about the contrast between the text and the background. As often is the case, this prompted me to learn something.<\/p>\n<p>I was reminded about a <a href=\"https:\/\/podcasts.ox.ac.uk\/2024-disability-lecture-changing-disability-narrative-unseen-understood\">talk in May<\/a> I attended by <a href=\"https:\/\/www.bethkh.com\/\">Beth Kume-Holland<\/a> \u2013 the <a href=\"https:\/\/podcasts.ox.ac.uk\/series\/disability-lectures\">Annual University of Oxford Disability Lecture<\/a>. Beth Kume-Holland listed four quick wins on the topic of accessible communications:<\/p>\n<ul>\n<li>Include alt text and image descriptions with any images<\/li>\n<li>Make sure all video content includes closed captions<\/li>\n<li>Ensure proper contrast between any text and its background<\/li>\n<li>Camel Case your hashtags. (#dontbeinaccessible #BeAccessible)<\/li>\n<\/ul>\n<p>This prompted the question for me: what is proper contrast between text and backgrounds. A web search identified some very useful recommendations and resources.<\/p>\n<p>This <a href=\"https:\/\/business.scope.org.uk\/article\/colour-contrast-and-accessibility\">Scope website<\/a> had an article all about Contrast:<\/p>\n<p>It talks about low contrast when colours are too similar (for example, yellow and orange) and high contrast when colours are very different from each other (for example, black and white). A contrast ratio of 1:1 shows no contrast; a 21:1 ratio shows a high contrast, for example black text on a white document. The <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#contrast-minimum\">Web Content Accessibility Guidelines (WCAG) 2<\/a> suggest a minimum contrast ratio of 4.5:1 for small text and 3:1 for large text. It describes an optimal compliance suggests a ratio of 7:1.<\/p>\n<p>This <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">site by WebAIM allows a calculation of contrast ratio.<\/a> You can identify colours from an image using <a href=\"https:\/\/www.html-color-codes.info\/colors-from-image\/\">this site<\/a>. Here is an example of what I have done to <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=EEA480&amp;bcolor=05427C\">calculate a contrast ratio<\/a>.<\/p>\n<figure id=\"post-643 media-643\" class=\"image align-none\"><img decoding=\"async\" src=\"http:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-content\/uploads\/sites\/256\/2024\/06\/Screenshot-2024-06-19-at-12.33.15.png\" alt=\"Two squares of colour: an orange and a blue. \" \/><\/figure>\n<p>Code for the 0range colour: #EEA480<\/p>\n<p>Code for the blue colour: #05427C<\/p>\n<p>This gives a ratio of <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/?fcolor=EEA480&amp;bcolor=05427C\"><strong>4.93<\/strong>:1<\/a> which passes the WCAG AA requirement. To pass the WCAG AAA requirement, the contrast would need to be increased to 7:1. This could be done by changing the lightness of the one or both of the two colours.<\/p>\n<p>Here is what I have tried. I&#8217;m not sure how much difference it makes so I need to discuss this with others.<\/p>\n<figure id=\"post-644 media-644\" class=\"image align-none\"><img decoding=\"async\" src=\"http:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-content\/uploads\/sites\/256\/2024\/06\/Screenshot-2024-06-19-at-12.44.38.png\" alt=\"Output from contrast checker changing lightness so that the ratio increases greater than 7:1. \" \/><\/figure>\n<p>&nbsp;<\/p>\n<p>Some more information on these sites too:<\/p>\n<ul>\n<li>Another article from Scope about <a href=\"https:\/\/business.scope.org.uk\/article\/font-accessibility-and-readability-the-basics\">accessible fonts and readability<\/a><\/li>\n<li>One about <a href=\"https:\/\/business.scope.org.uk\/article\/how-to-write-better-website-content-for-people-with-dyslexia\">How to write dyslexic friendly web content<\/a><\/li>\n<li>UK Government advice about <a href=\"https:\/\/www.gov.uk\/government\/publications\/inclusive-communication\/accessible-communication-formats\">Accessible communication formats<\/a><\/li>\n<li>UK Government <a href=\"https:\/\/accessibility.blog.gov.uk\/2016\/06\/17\/colour-contrast-why-does-it-matter\/\">Blog post about Colour Contrast<\/a>.<\/li>\n<li>Blog post about <a href=\"https:\/\/www.getstark.co\/blog\/accessible-contrast-ratios-and-a-levels-explained\/\">Accessible contrast ratios and A-levels explained<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"At our most recent Centre for Medical Education Equality, Diversity and Inclusion Committee meeting we were looking at some posters. A colleague mentioned that they found the posters quite difficult [&hellip;]","protected":false},"author":80,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15,5],"tags":[],"class_list":["post-641","post","type-post","status-publish","format-standard","hentry","category-equality-diversity","category-web-content"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p4tWbY-al","jetpack_sharing_enabled":true,"meta_box":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/posts\/641","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/users\/80"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/comments?post=641"}],"version-history":[{"count":6,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/posts\/641\/revisions"}],"predecessor-version":[{"id":649,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/posts\/641\/revisions\/649"}],"wp:attachment":[{"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/media?parent=641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/categories?post=641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.cardiff.ac.uk\/brennanpincardiff\/wp-json\/wp\/v2\/tags?post=641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}