{"id":2527,"date":"2024-12-03T17:16:33","date_gmt":"2024-12-03T22:16:33","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/?post_type=chapter&#038;p=2527"},"modified":"2025-05-20T13:21:19","modified_gmt":"2025-05-20T17:21:19","slug":"bsp-contrast","status":"web-only","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/bsp-contrast\/","title":{"raw":"Colour Contrast","rendered":"Colour Contrast"},"content":{"raw":"<a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png\"><img class=\"alignright wp-image-2653\" style=\"margin: 0em 1em\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png\" alt=\"\" width=\"133\" height=\"120\" \/><\/a>The Brightspace Accessibility Checker examines contrast between font and shape colours. Colour contrast is expressed as a ratio of the difference in saturation, brightness, and pigment of different elements relative to one another. To be accessible and inclusive, font colour must have a contrast ratio of at least 4.5:1[footnote]The requirement reduces to 3:1 for large (size 18 point or larger or 14 point or larger and bold) fonts[\/footnote] against background colours. Insufficient contrast will be flagged as <strong>Text must have a contrast ratio of at least 4.5:1\u00a0<\/strong>or\u00a0<strong>Large text must have a contrast ratio of at least 3:1<\/strong>.\r\n\r\nWhile the Accessibility Checker does not check for use of colour, it is important that colour is not used alone to make a distinction, a comparison, or to emphasize information.\r\n<h2>Who accessible colour affects<\/h2>\r\nAccessible colour is essential for:\r\n<ul>\r\n \t<li>The 1 in 12 men and 1 in 200 women that have some form of colour vision deficiency.[footnote]Colour Blind Awareness, \"<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\">About Colour Blindness<\/a>\"[\/footnote]<\/li>\r\n \t<li>Low vision users.<\/li>\r\n \t<li>Users experiencing eye fatigue and other mental strain.<\/li>\r\n \t<li>Those that print material in black and white.<\/li>\r\n \t<li>Users viewing in poor lighting or excess glare.<\/li>\r\n<\/ul>\r\nLearn more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/\">accessible colour use<\/a>.\r\n\r\nThe following video demonstrates why colour contrast and use of colour is important.\r\n\r\nhttps:\/\/mediaspace.langara.ca\/media\/t\/0_qg5g2hpz\r\n<h2>How to fix it<\/h2>\r\n<img class=\"alignright wp-image-2613\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast.png\" alt=\"\" width=\"414\" height=\"193\" \/>Insufficient contrast will be flagged as <strong>Text must have a contrast ratio of at least 4.5:1 <\/strong>or <strong>Large text must have a contrast ratio of at least 3:1 <\/strong>in the\u00a0<strong>Check Accessibility\u00a0<\/strong>tool.\r\n\r\nSelect the issue to highlight the offending text. Move to the <strong>Select <\/strong><strong>Color<\/strong> tool on the editor toolbar.\r\n\r\n<img class=\"alignleft size-full wp-image-2677\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool.png\" alt=\"\" width=\"1179\" height=\"199\" \/>\r\n\r\n<img class=\"alignleft wp-image-519\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/07\/Untitled-Your-Story.gif\" alt=\"\" width=\"414\" height=\"595\" \/>Use the <strong>Select a Color<\/strong> tool to find accessible colour combinations. Choose a colour from the grid, use the slider to adjust colour, or enter a Hex colour code. Accessible colour contrast will be marked with a green checkmark.\r\n<h2>How to prevent it next time<\/h2>\r\nUse dark text on light backgrounds or light text on dark backgrounds. For Brightspace content, black font on a white background is an excellent choice. When customizing colours, always note the contrast ratio in the <strong>Select a Color<\/strong> tool.\r\n\r\nBuild a grid of branded colours with\u00a0<a href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">Eightshapes Contrast Grid<\/a>\u00a0to see what colour combinations are accessible.\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Next<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nMove to the next page to examine\u00a0<strong>Accessible Links<\/strong> or <a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/brightspace-start-here\/#iwantto\"> select the next error you want to fix<\/a>.\r\n\r\n<\/div>\r\n<\/div>","rendered":"<p><a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2653\" style=\"margin: 0em 1em\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png\" alt=\"\" width=\"133\" height=\"120\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png 1008w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid-300x271.png 300w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid-768x694.png 768w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid-65x59.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid-225x203.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid-350x316.png 350w\" sizes=\"auto, (max-width: 133px) 100vw, 133px\" \/><\/a>The Brightspace Accessibility Checker examines contrast between font and shape colours. Colour contrast is expressed as a ratio of the difference in saturation, brightness, and pigment of different elements relative to one another. To be accessible and inclusive, font colour must have a contrast ratio of at least 4.5:1<a class=\"footnote\" title=\"The requirement reduces to 3:1 for large (size 18 point or larger or 14 point or larger and bold) fonts\" id=\"return-footnote-2527-1\" href=\"#footnote-2527-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> against background colours. Insufficient contrast will be flagged as <strong>Text must have a contrast ratio of at least 4.5:1\u00a0<\/strong>or\u00a0<strong>Large text must have a contrast ratio of at least 3:1<\/strong>.<\/p>\n<p>While the Accessibility Checker does not check for use of colour, it is important that colour is not used alone to make a distinction, a comparison, or to emphasize information.<\/p>\n<h2>Who accessible colour affects<\/h2>\n<p>Accessible colour is essential for:<\/p>\n<ul>\n<li>The 1 in 12 men and 1 in 200 women that have some form of colour vision deficiency.<a class=\"footnote\" title=\"Colour Blind Awareness, &quot;About Colour Blindness&quot;\" id=\"return-footnote-2527-2\" href=\"#footnote-2527-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a><\/li>\n<li>Low vision users.<\/li>\n<li>Users experiencing eye fatigue and other mental strain.<\/li>\n<li>Those that print material in black and white.<\/li>\n<li>Users viewing in poor lighting or excess glare.<\/li>\n<\/ul>\n<p>Learn more about <a href=\"https:\/\/pressbooks.bccampus.ca\/accessibilityhandbook\/chapter\/accessible-colour\/\">accessible colour use<\/a>.<\/p>\n<p>The following video demonstrates why colour contrast and use of colour is important.<\/p>\n<p><iframe loading=\"lazy\" id=\"kaltura_player\" title=\"Accessible use of colour in PowerPoint\" src=\"https:\/\/api.ca.kaltura.com\/p\/138\/sp\/13800\/embedIframeJs\/uiconf_id\/23449468\/partner_id\/138?iframeembed=true&#38;playerId=kaltura_player&#38;entry_id=0_qg5g2hpz&#38;flashvars[streamerType]=auto&#38;flashvars[localizationCode]=en&#38;flashvars[sideBarContainer.plugin]=true&#38;flashvars[sideBarContainer.position]=left&#38;flashvars[sideBarContainer.clickToClose]=true&#38;flashvars[chapters.plugin]=true&#38;flashvars[chapters.layout]=vertical&#38;flashvars[chapters.thumbnailRotator]=false&#38;flashvars[streamSelector.plugin]=true&#38;flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&#38;flashvars[dualScreen.plugin]=true&#38;flashvars[hotspots.plugin]=1&#38;flashvars[Kaltura.addCrossoriginToIframe]=true&#38;wid=0_juw4im8e\" width=\"400\" height=\"285\" allowfullscreen=\"allowfullscreen\" sandbox=\"allow-downloads allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation\" frameborder=\"0\"><\/iframe><\/p>\n<h2>How to fix it<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-2613\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast.png\" alt=\"\" width=\"414\" height=\"193\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast.png 1202w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-300x140.png 300w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-1024x478.png 1024w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-768x358.png 768w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-65x30.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-225x105.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-A11ychecker_Contrast-350x163.png 350w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/>Insufficient contrast will be flagged as <strong>Text must have a contrast ratio of at least 4.5:1 <\/strong>or <strong>Large text must have a contrast ratio of at least 3:1 <\/strong>in the\u00a0<strong>Check Accessibility\u00a0<\/strong>tool.<\/p>\n<p>Select the issue to highlight the offending text. Move to the <strong>Select <\/strong><strong>Color<\/strong> tool on the editor toolbar.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-2677\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool.png\" alt=\"\" width=\"1179\" height=\"199\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool.png 1179w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-300x51.png 300w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-1024x173.png 1024w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-768x130.png 768w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-65x11.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-225x38.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/BSp-ColorTool-350x59.png 350w\" sizes=\"auto, (max-width: 1179px) 100vw, 1179px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-519\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/07\/Untitled-Your-Story.gif\" alt=\"\" width=\"414\" height=\"595\" \/>Use the <strong>Select a Color<\/strong> tool to find accessible colour combinations. Choose a colour from the grid, use the slider to adjust colour, or enter a Hex colour code. Accessible colour contrast will be marked with a green checkmark.<\/p>\n<h2>How to prevent it next time<\/h2>\n<p>Use dark text on light backgrounds or light text on dark backgrounds. For Brightspace content, black font on a white background is an excellent choice. When customizing colours, always note the contrast ratio in the <strong>Select a Color<\/strong> tool.<\/p>\n<p>Build a grid of branded colours with\u00a0<a href=\"https:\/\/contrast-grid.eightshapes.com\/?version=1.1.0&amp;background-colors=&amp;foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&amp;es-color-form__tile-size=compact&amp;es-color-form__show-contrast=aaa&amp;es-color-form__show-contrast=aa&amp;es-color-form__show-contrast=aa18&amp;es-color-form__show-contrast=dnp\">Eightshapes Contrast Grid<\/a>\u00a0to see what colour combinations are accessible.<\/p>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Next<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>Move to the next page to examine\u00a0<strong>Accessible Links<\/strong> or <a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/brightspace-start-here\/#iwantto\"> select the next error you want to fix<\/a>.<\/p>\n<\/div>\n<\/div>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-2527-1\">The requirement reduces to 3:1 for large (size 18 point or larger or 14 point or larger and bold) fonts <a href=\"#return-footnote-2527-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-2527-2\">Colour Blind Awareness, \"<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\">About Colour Blindness<\/a>\" <a href=\"#return-footnote-2527-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":1655,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-2527","chapter","type-chapter","status-web-only","hentry"],"part":1477,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/2527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/users\/1655"}],"version-history":[{"count":25,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/2527\/revisions"}],"predecessor-version":[{"id":3238,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/2527\/revisions\/3238"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/parts\/1477"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/2527\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/media?parent=2527"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapter-type?post=2527"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/contributor?post=2527"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/license?post=2527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}