{"id":1067,"date":"2024-08-19T17:53:44","date_gmt":"2024-08-19T21:53:44","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/?post_type=chapter&#038;p=1067"},"modified":"2025-05-20T13:10:52","modified_gmt":"2025-05-20T17:10:52","slug":"colour-and-contrast","status":"web-only","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/colour-and-contrast\/","title":{"raw":"Colour and Contrast","rendered":"Colour and 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\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/12\/Contrast-EightShapesGrid.png\" alt=\"\" width=\"133\" height=\"120\" \/><\/a>The Word Check Accessibility tool examines contrast between font and background 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>Hard-to-read text contrast.<\/strong>\r\n<h2>Who hard-to-read text contrast 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><a id=\"fix\"><\/a>How to fix it<\/h2>\r\n<img class=\"alignleft wp-image-1124 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141.png\" alt=\"\" width=\"400\" height=\"130\" \/>The Accessibility Assistant will note <strong>Hard-to-read text contrast<\/strong> errors for text colour contrast against page background, shading, and highlighting as well as cell text colour against cell shading in a table.\r\n<div class=\"clearfix\"><\/div>\r\nTo resolve a <strong>Hard-to-read text contrast<\/strong> issue:\r\n<ol>\r\n \t<li>Select the font.<\/li>\r\n \t<li>Change the Font Colour, the Highlight Colour, or the Shading Colour.<\/li>\r\n<\/ol>\r\nThe tools needed to address hard-to-read text contrast issues are located on the\u00a0<strong>Home<\/strong> tab.\r\n<div class=\"lsscPageEmployeePreview\">\r\n<div id=\"employeePreview\">\r\n<div id=\"employeePreviewStep1\" style=\"left: .5%;top: 40%\"><span class=\"stepNumber\">1<\/span>Highlight Colour<\/div>\r\n<div id=\"employeePreviewStep2\" style=\"left: 28%;top: 73%\"><span class=\"stepNumber\">2<\/span>Font Colour<\/div>\r\n<div id=\"employeePreviewStep3\" style=\"left: 54%;top: 40%\"><span class=\"stepNumber\">3<\/span>Shading<\/div>\r\n<img class=\"alignnone size-full wp-image-1126\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons.png\" alt=\"\" width=\"587\" height=\"267\" \/>\r\n\r\n<\/div>\r\n<\/div>\r\nEach of those tools offers a range of colours including custom colours for Font Colour and Shading. However, the most useful feature is the <strong>High-contrast only<\/strong> toggle present on each menu:\r\n\r\n[columns count=3]\r\n\r\n<img class=\"size-full wp-image-1153 alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight.png\" alt=\"\" width=\"358\" height=\"454\" \/> <img class=\"alignleft wp-image-1154\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor.png\" alt=\"\" width=\"319\" height=\"575\" \/><img class=\"alignleft wp-image-1152\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading.png\" alt=\"\" width=\"221\" height=\"440\" \/>[\/columns]\r\n<div class=\"clearfix\"><\/div>\r\n&nbsp;\r\n\r\nThis reduces the number of available colours to choose from to show only those that have sufficient contrast against any other colours present (such as Font Colour against Shading or Highlight Colour against Font Colour).\r\n\r\nIn addition, using\u00a0<strong>Automatic<\/strong> font colour ensures that when Shading, Highlight, or Page Colour change the font will automatically change colour to present an easier to read, accessible document.\r\n<div class=\"textbox textbox--examples\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Tables<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\n<img class=\" wp-image-1202 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables.png\" alt=\"\" width=\"272\" height=\"361\" \/>To address hard-to-read text contrast in a table, either select the text in the table and change the font colour as outlined above or:\r\n<ol>\r\n \t<li>Navigate to the <strong>Table Design<\/strong> tab.<\/li>\r\n \t<li>Open the <b>Shading <\/b>menu to choose a new cell background colour.\r\n<ol>\r\n \t<li>Use the <strong>High-contrast only<\/strong> toggle to limit the available options to accessible combinations only.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ol>\r\nNote: changing Shading in a table only applies to selected cells.\r\n<div class=\"clearfix\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<h2>How to prevent it next time<\/h2>\r\nUse dark text on light backgrounds or light text on dark backgrounds. Generally, it is not advised to <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/add-change-or-delete-the-background-color-in-word-db481e61-7af6-4063-bbcd-b276054a5515#:~:text=the%20background%20color-,Go%20to%20Design%20%3E%20Page%20Color.,options%20in%20the%20Color%20box.\">change the page colour of Word documents<\/a>. However, if the page colour is dark, use light coloured text.\r\n\r\nBuild a grid of branded colours with <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> to 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>Media and Illustrations<\/strong> errors\u00a0or <a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/word-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\" 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 Word Check Accessibility tool examines contrast between font and background 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-1067-1\" href=\"#footnote-1067-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> against background colours. Insufficient contrast will be flagged as <strong>Hard-to-read text contrast.<\/strong><\/p>\n<h2>Who hard-to-read text contrast 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-1067-2\" href=\"#footnote-1067-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_qsdfkizx\" 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><a id=\"fix\"><\/a>How to fix it<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1124 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141.png\" alt=\"\" width=\"400\" height=\"130\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141.png 400w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141-300x98.png 300w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141-65x21.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141-225x73.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastError-e1732048894141-350x114.png 350w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>The Accessibility Assistant will note <strong>Hard-to-read text contrast<\/strong> errors for text colour contrast against page background, shading, and highlighting as well as cell text colour against cell shading in a table.<\/p>\n<div class=\"clearfix\"><\/div>\n<p>To resolve a <strong>Hard-to-read text contrast<\/strong> issue:<\/p>\n<ol>\n<li>Select the font.<\/li>\n<li>Change the Font Colour, the Highlight Colour, or the Shading Colour.<\/li>\n<\/ol>\n<p>The tools needed to address hard-to-read text contrast issues are located on the\u00a0<strong>Home<\/strong> tab.<\/p>\n<div class=\"lsscPageEmployeePreview\">\n<div id=\"employeePreview\">\n<div id=\"employeePreviewStep1\" style=\"left: .5%;top: 40%\"><span class=\"stepNumber\">1<\/span>Highlight Colour<\/div>\n<div id=\"employeePreviewStep2\" style=\"left: 28%;top: 73%\"><span class=\"stepNumber\">2<\/span>Font Colour<\/div>\n<div id=\"employeePreviewStep3\" style=\"left: 54%;top: 40%\"><span class=\"stepNumber\">3<\/span>Shading<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1126\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons.png\" alt=\"\" width=\"587\" height=\"267\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons.png 587w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons-300x136.png 300w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons-65x30.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons-225x102.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastButtons-350x159.png 350w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><\/p>\n<\/div>\n<\/div>\n<p>Each of those tools offers a range of colours including custom colours for Font Colour and Shading. However, the most useful feature is the <strong>High-contrast only<\/strong> toggle present on each menu:<\/p>\n<div class=\"threecolumn\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1153 alignleft\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight.png\" alt=\"\" width=\"358\" height=\"454\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight.png 358w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight-237x300.png 237w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight-65x82.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight-225x285.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastHighlight-350x444.png 350w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1154\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor.png\" alt=\"\" width=\"319\" height=\"575\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor.png 356w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor-167x300.png 167w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor-65x117.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor-225x405.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastColor-350x630.png 350w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-1152\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading.png\" alt=\"\" width=\"221\" height=\"440\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading.png 289w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading-151x300.png 151w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading-65x129.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastShading-225x448.png 225w\" sizes=\"auto, (max-width: 221px) 100vw, 221px\" \/><\/p>\n<\/div>\n<div class=\"clearfix\"><\/div>\n<p>&nbsp;<\/p>\n<p>This reduces the number of available colours to choose from to show only those that have sufficient contrast against any other colours present (such as Font Colour against Shading or Highlight Colour against Font Colour).<\/p>\n<p>In addition, using\u00a0<strong>Automatic<\/strong> font colour ensures that when Shading, Highlight, or Page Colour change the font will automatically change colour to present an easier to read, accessible document.<\/p>\n<div class=\"textbox textbox--examples\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Tables<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1202 alignright\" src=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables.png\" alt=\"\" width=\"272\" height=\"361\" srcset=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables.png 434w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables-226x300.png 226w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables-65x86.png 65w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables-225x299.png 225w, https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-content\/uploads\/sites\/2248\/2024\/08\/Word-ContrastTables-350x465.png 350w\" sizes=\"auto, (max-width: 272px) 100vw, 272px\" \/>To address hard-to-read text contrast in a table, either select the text in the table and change the font colour as outlined above or:<\/p>\n<ol>\n<li>Navigate to the <strong>Table Design<\/strong> tab.<\/li>\n<li>Open the <b>Shading <\/b>menu to choose a new cell background colour.\n<ol>\n<li>Use the <strong>High-contrast only<\/strong> toggle to limit the available options to accessible combinations only.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Note: changing Shading in a table only applies to selected cells.<\/p>\n<div class=\"clearfix\"><\/div>\n<\/div>\n<\/div>\n<h2>How to prevent it next time<\/h2>\n<p>Use dark text on light backgrounds or light text on dark backgrounds. Generally, it is not advised to <a href=\"https:\/\/support.microsoft.com\/en-us\/office\/add-change-or-delete-the-background-color-in-word-db481e61-7af6-4063-bbcd-b276054a5515#:~:text=the%20background%20color-,Go%20to%20Design%20%3E%20Page%20Color.,options%20in%20the%20Color%20box.\">change the page colour of Word documents<\/a>. However, if the page colour is dark, use light coloured text.<\/p>\n<p>Build a grid of branded colours with <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> to 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>Media and Illustrations<\/strong> errors\u00a0or <a href=\"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/chapter\/word-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-1067-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-1067-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-1067-2\">Colour Blind Awareness, \"<a href=\"https:\/\/www.colourblindawareness.org\/colour-blindness\/\">About Colour Blindness<\/a>\" <a href=\"#return-footnote-1067-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-1067","chapter","type-chapter","status-web-only","hentry"],"part":52,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/1067","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\/1067\/revisions"}],"predecessor-version":[{"id":3218,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/1067\/revisions\/3218"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/parts\/52"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapters\/1067\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/pressbooks\/v2\/chapter-type?post=1067"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/contributor?post=1067"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/a11yondemand\/wp-json\/wp\/v2\/license?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}