{"id":159,"date":"2016-10-12T15:22:33","date_gmt":"2016-10-12T19:22:33","guid":{"rendered":"https:\/\/openbooks.macewan.ca\/authorsguide\/chapter\/colour-contrast\/"},"modified":"2026-01-13T16:37:45","modified_gmt":"2026-01-13T21:37:45","slug":"colour-contrast","status":"publish","type":"chapter","link":"https:\/\/openbooks.macewan.ca\/authorsguide\/chapter\/colour-contrast\/","title":{"raw":"Colour Contrast","rendered":"Colour Contrast"},"content":{"raw":"In this section, we provide guidelines and recommendations about colour contrast in your textbook materials.\r\n<h2>Before You Begin<\/h2>\r\n<h3>What Role Does Colour Play in the Delivery of Your Content?<\/h3>\r\nWhen documents or web pages do not provide enough contrast between foreground elements\u00a0(e.g., text,\u00a0images) and background\u00a0elements (e.g., colour, watermark images), some students will have difficulty reading the content. Consider the following questions:\r\n\r\n1. Have you presented text- or image-based content on a coloured or textured background? If so, you should:\r\n<ul>\r\n \t<li>Confirm that there is <a title=\"Contrast\" href=\"#contrast\">sufficient contrast<\/a> between your foreground\u00a0content and the\u00a0chosen background colour or texture.<\/li>\r\n<\/ul>\r\n2. Have you included links in your content? If so, you should:\r\n<ul>\r\n \t<li>Confirm that the <a title=\"Web link colour\" href=\"#Links\">colour of your web links<\/a> is distinct from both your background colour and the colour of the surrounding text.<\/li>\r\n<\/ul>\r\n3. Have you used colour to convey concepts or information? If so, you should:\r\n<ul>\r\n \t<li>Confirm that you are <a title=\"Colour\" href=\"#colour\">not using colour alone<\/a> to convey this information.<\/li>\r\n<\/ul>\r\n<h2>What Do You Need To Do?<\/h2>\r\n<h3><a id=\"contrast\"><\/a>Contrast<\/h3>\r\nStudents with low vision and\/or a form of colour blindness may have difficulty reading text that does not contrast enough with the background colour you have selected. If the colour palette you have adopted is too subtle (e.g., white text on a pastel background; medium-grey text on a light-grey background), the contrast between your foreground and background is probably insufficient for some students.\r\n\r\nWeb Content Accessibility Guidelines (WCAG 2.0) require that \"the visual presentation of text and images of text has a contrast ratio of at least 7:1\" (W3C, 2016). The image below presents four different foreground\/background colour-contrast examples to illustrate insufficient and sufficient colour contrast ratios.\r\n\r\n[caption id=\"attachment_175\" align=\"aligncenter\" width=\"500\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-contrast-egs.jpg\"><img class=\"wp-image-158\" src=\"https:\/\/openbooks.macewan.ca\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs.jpg\" alt=\"Examples of font colour against background colour; showcases issues with insufficient contrast\" width=\"500\" height=\"167\" \/><\/a> Figure 6.8.1 Image displays four examples of foreground (text) colour against background colours; only the example on the far right presents combinations with sufficient colour contrast.[\/caption]\r\n\r\n<div id=\"navigation-mechanisms-refs\" class=\"normative textbox shaded\">\r\n<h4>Not sure how to test your materials for colour contrast ratios?<\/h4>\r\nThere are many online and downloadable tools available to help you evaluate colour contrast ratios. Here are a few we have tried and like:\r\n<ul>\r\n \t<li><strong>WebAIM's <a title=\"Color Checker (opens in a new window)\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color Contrast Checker<\/a>:<\/strong>\u00a0This web-based tool allows you to select or enter colour values to test and provides you with a \"pass\" or \"fail\"\u00a0on your contrast ratio.<\/li>\r\n \t<li><strong>ACART's <a title=\"Another web-based tool for checking colour contrast; (opens in a new window)\" href=\"http:\/\/contrastchecker.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contrast Checker<\/a>:<\/strong>\u00a0This is a straightforward, web-based tool you can use to both check colour contrast and view your selections in grey scale. This tool also allows you to keep a history of the colour combinations you have\u00a0tested.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<h3><a id=\"Links\"><\/a>Weblink Colours<\/h3>\r\nLinks must be visually distinct from both the surrounding, non-linked text and from the background colour. If you do not underline your links (or provide some other non-colour cue), you must ensure that you provide both sufficient contrast between the link and background colours <em>and<\/em> between the link colour and that of the surrounding text.\r\n\r\nWeb Content Accessibility Guidelines (WebAIM, 2015) require a:\r\n<ul>\r\n \t<li>4.5:1 contrast between the link text color and the background, and<\/li>\r\n \t<li>3:1 contrast between the link text color and the surrounding non-link text color.<\/li>\r\n<\/ul>\r\n<h3>High-Contrast Mode<\/h3>\r\nSome students need to see light text on a dark background for it to be readable, while others require dark text on a light background.\u00a0Students with low vision must be able to see content when it is displayed in high-contrast mode. This can be a subjective experience, based on individual student needs. We recommend that you try testing your text and image-based content\u00a0as you go by using high-contrast mode on your own computer and making adjustments as needed.\r\n\r\nAll content items such as text, images, bullets, and table borders must be visible in\u00a0both regular and high-contrast modes.\r\n<div class=\"normative textbox shaded\">\r\n<h4>Not sure how to test your content in high-contrast mode?<\/h4>\r\nTo test the visibility of your content in this mode, turn on high contrast by simultaneously pressing the following keys on your (PC) keyboard:\r\n<p style=\"padding-left: 30px;\"><strong>Left ALT + Left SHIFT + Print Screen<\/strong>.<\/p>\r\nTo turn off high contrast mode, repeat this step.\r\n\r\n<\/div>\r\n<h3><a id=\"colour\"><\/a>Use of Colour*<\/h3>\r\nYou should not rely on colour as the sole means of conveying information. If the point you are making depends on colour to be understood, you will need to edit your materials so that concepts presented in the visuals are not lost to those who are colour blind or who require high contrast between colours (W3C, 2008).\r\n\r\n<em>\u00a0*This topic is also addressed in the <a title=\"Use of Colour vs Image-based content\" href=\"https:\/\/openbooks.macewan.ca\/authorsguide\/chapter\/images\/\">Images<\/a> section of the Chapter.<\/em>\r\n\r\n<hr \/>\r\n\r\n<h3>References<\/h3>\r\n<p class=\"hanging-indent\">W3C. (2016). <em>Web content accessibility guidelines (WCAG) 2.0, guideline 1.4.6 contrast (enhanced).<\/em> <a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html\">http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html<\/a><\/p>\r\nW3C. (2008).\u00a0<em>Web content accessibility guidelines (WCAG) 2.0<\/em>. <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\">http:\/\/www.w3.org\/TR\/WCAG20<\/a>\r\n<p class=\"hanging-indent\">WebAIM (2015), WCAG 2.0 and link colors. <a href=\"http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors\">http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors<\/a><\/p>","rendered":"<p>In this section, we provide guidelines and recommendations about colour contrast in your textbook materials.<\/p>\n<h2>Before You Begin<\/h2>\n<h3>What Role Does Colour Play in the Delivery of Your Content?<\/h3>\n<p>When documents or web pages do not provide enough contrast between foreground elements\u00a0(e.g., text,\u00a0images) and background\u00a0elements (e.g., colour, watermark images), some students will have difficulty reading the content. Consider the following questions:<\/p>\n<p>1. Have you presented text- or image-based content on a coloured or textured background? If so, you should:<\/p>\n<ul>\n<li>Confirm that there is <a title=\"Contrast\" href=\"#contrast\">sufficient contrast<\/a> between your foreground\u00a0content and the\u00a0chosen background colour or texture.<\/li>\n<\/ul>\n<p>2. Have you included links in your content? If so, you should:<\/p>\n<ul>\n<li>Confirm that the <a title=\"Web link colour\" href=\"#Links\">colour of your web links<\/a> is distinct from both your background colour and the colour of the surrounding text.<\/li>\n<\/ul>\n<p>3. Have you used colour to convey concepts or information? If so, you should:<\/p>\n<ul>\n<li>Confirm that you are <a title=\"Colour\" href=\"#colour\">not using colour alone<\/a> to convey this information.<\/li>\n<\/ul>\n<h2>What Do You Need To Do?<\/h2>\n<h3><a id=\"contrast\"><\/a>Contrast<\/h3>\n<p>Students with low vision and\/or a form of colour blindness may have difficulty reading text that does not contrast enough with the background colour you have selected. If the colour palette you have adopted is too subtle (e.g., white text on a pastel background; medium-grey text on a light-grey background), the contrast between your foreground and background is probably insufficient for some students.<\/p>\n<p>Web Content Accessibility Guidelines (WCAG 2.0) require that &#8220;the visual presentation of text and images of text has a contrast ratio of at least 7:1&#8221; (W3C, 2016). The image below presents four different foreground\/background colour-contrast examples to illustrate insufficient and sufficient colour contrast ratios.<\/p>\n<figure id=\"attachment_175\" aria-describedby=\"caption-attachment-175\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-contrast-egs.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-158\" src=\"https:\/\/openbooks.macewan.ca\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs.jpg\" alt=\"Examples of font colour against background colour; showcases issues with insufficient contrast\" width=\"500\" height=\"167\" srcset=\"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs.jpg 600w, https:\/\/openbooks.macewan.ca\/authorsguide\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs-300x100.jpg 300w, https:\/\/openbooks.macewan.ca\/authorsguide\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs-65x22.jpg 65w, https:\/\/openbooks.macewan.ca\/authorsguide\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs-225x75.jpg 225w, https:\/\/openbooks.macewan.ca\/authorsguide\/wp-content\/uploads\/sites\/54\/2016\/10\/colour-contrast-egs-350x117.jpg 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-175\" class=\"wp-caption-text\">Figure 6.8.1 Image displays four examples of foreground (text) colour against background colours; only the example on the far right presents combinations with sufficient colour contrast.<\/figcaption><\/figure>\n<div id=\"navigation-mechanisms-refs\" class=\"normative textbox shaded\">\n<h4>Not sure how to test your materials for colour contrast ratios?<\/h4>\n<p>There are many online and downloadable tools available to help you evaluate colour contrast ratios. Here are a few we have tried and like:<\/p>\n<ul>\n<li><strong>WebAIM&#8217;s <a title=\"Color Checker (opens in a new window)\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color Contrast Checker<\/a>:<\/strong>\u00a0This web-based tool allows you to select or enter colour values to test and provides you with a &#8220;pass&#8221; or &#8220;fail&#8221;\u00a0on your contrast ratio.<\/li>\n<li><strong>ACART&#8217;s <a title=\"Another web-based tool for checking colour contrast; (opens in a new window)\" href=\"http:\/\/contrastchecker.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contrast Checker<\/a>:<\/strong>\u00a0This is a straightforward, web-based tool you can use to both check colour contrast and view your selections in grey scale. This tool also allows you to keep a history of the colour combinations you have\u00a0tested.<\/li>\n<\/ul>\n<\/div>\n<h3><a id=\"Links\"><\/a>Weblink Colours<\/h3>\n<p>Links must be visually distinct from both the surrounding, non-linked text and from the background colour. If you do not underline your links (or provide some other non-colour cue), you must ensure that you provide both sufficient contrast between the link and background colours <em>and<\/em> between the link colour and that of the surrounding text.<\/p>\n<p>Web Content Accessibility Guidelines (WebAIM, 2015) require a:<\/p>\n<ul>\n<li>4.5:1 contrast between the link text color and the background, and<\/li>\n<li>3:1 contrast between the link text color and the surrounding non-link text color.<\/li>\n<\/ul>\n<h3>High-Contrast Mode<\/h3>\n<p>Some students need to see light text on a dark background for it to be readable, while others require dark text on a light background.\u00a0Students with low vision must be able to see content when it is displayed in high-contrast mode. This can be a subjective experience, based on individual student needs. We recommend that you try testing your text and image-based content\u00a0as you go by using high-contrast mode on your own computer and making adjustments as needed.<\/p>\n<p>All content items such as text, images, bullets, and table borders must be visible in\u00a0both regular and high-contrast modes.<\/p>\n<div class=\"normative textbox shaded\">\n<h4>Not sure how to test your content in high-contrast mode?<\/h4>\n<p>To test the visibility of your content in this mode, turn on high contrast by simultaneously pressing the following keys on your (PC) keyboard:<\/p>\n<p style=\"padding-left: 30px;\"><strong>Left ALT + Left SHIFT + Print Screen<\/strong>.<\/p>\n<p>To turn off high contrast mode, repeat this step.<\/p>\n<\/div>\n<h3><a id=\"colour\"><\/a>Use of Colour*<\/h3>\n<p>You should not rely on colour as the sole means of conveying information. If the point you are making depends on colour to be understood, you will need to edit your materials so that concepts presented in the visuals are not lost to those who are colour blind or who require high contrast between colours (W3C, 2008).<\/p>\n<p><em>\u00a0*This topic is also addressed in the <a title=\"Use of Colour vs Image-based content\" href=\"https:\/\/openbooks.macewan.ca\/authorsguide\/chapter\/images\/\">Images<\/a> section of the Chapter.<\/em><\/p>\n<hr \/>\n<h3>References<\/h3>\n<p class=\"hanging-indent\">W3C. (2016). <em>Web content accessibility guidelines (WCAG) 2.0, guideline 1.4.6 contrast (enhanced).<\/em> <a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html\">http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html<\/a><\/p>\n<p>W3C. (2008).\u00a0<em>Web content accessibility guidelines (WCAG) 2.0<\/em>. <a href=\"http:\/\/www.w3.org\/TR\/WCAG20\">http:\/\/www.w3.org\/TR\/WCAG20<\/a><\/p>\n<p class=\"hanging-indent\">WebAIM (2015), WCAG 2.0 and link colors. <a href=\"http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors\">http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors<\/a><\/p>\n","protected":false},"author":4,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-159","chapter","type-chapter","status-publish","hentry"],"part":137,"_links":{"self":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapters\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/wp\/v2\/users\/4"}],"version-history":[{"count":2,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapters\/159\/revisions"}],"predecessor-version":[{"id":206,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapters\/159\/revisions\/206"}],"part":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/parts\/137"}],"metadata":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapters\/159\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/wp\/v2\/media?parent=159"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/pressbooks\/v2\/chapter-type?post=159"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/wp\/v2\/contributor?post=159"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/openbooks.macewan.ca\/authorsguide\/wp-json\/wp\/v2\/license?post=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}