{"id":63,"date":"2018-06-11T16:16:59","date_gmt":"2018-06-11T16:16:59","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/chapter\/colour-contrast\/"},"modified":"2024-01-19T04:38:13","modified_gmt":"2024-01-19T04:38:13","slug":"colour-contrast","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/chapter\/colour-contrast\/","title":{"rendered":"Color Contrast"},"content":{"raw":"In this section, we provide guidelines and recommendations about color contrast in your textbook materials.\r\n<h1>What is color contrast?<\/h1>\r\nColor contrast refers to the hue, lightness, and saturation of text, images, and background.\r\n\r\n<strong>File types include<\/strong>: DOCX, HTML, PDF, JPG, GIF\r\n<h1>What role does color play in the delivery of your content?<\/h1>\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<ol>\r\n \t<li>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\n<\/li>\r\n \t<li>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\">color of your web links<\/a> is distinct from both your background color and the color of the surrounding text<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>Have you used color 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 color alone<\/a> to convey this information<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ol>\r\n<h1>Who are you doing this for?<\/h1>\r\nThis work supports students who:\r\n<ul>\r\n \t<li>Have low vision<\/li>\r\n \t<li>Have poor contrast vision<\/li>\r\n \t<li>Are color blind and cannot differentiate between certain colors<\/li>\r\n \t<li>Use a device with monochrome display<\/li>\r\n \t<li>Use a print copy that is in black and white<\/li>\r\n<\/ul>\r\n\r\n<hr \/>\r\n\r\n<h1>What do you need to do?<\/h1>\r\nIn order to use color in a way that is most accessible, take into account color contrast between text and background and whether or not color is used to convey information and the location of a link.\r\n<h2><a id=\"contrast\"><\/a>Contrast<\/h2>\r\nStudents with low vision and\/or a form of color blindness may have difficulty reading text that does not contrast enough with the background color selected. If the color 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\nLevel AAA of the \"Web Content Accessibility Guidelines (WCAG 2.0)\" requires that \"the visual presentation of text and images of text has a contrast ratio of at least 7:1.\"[footnote]WCAG defines three levels of minimum accessibility standards: A, AA, and AAA. AAA outlines the highest level of minimum standards for web accessibility. Large text can have a lower contrast ratio (4.5:1). In addition, text that conveys no information or is part of a logo has no color contrast requirements. See \"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.6 Contrast (Enhanced),\" <em>WC<\/em><i>3<\/i>, accessed February 28, 2018, http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html.[\/footnote] The following image presents four different foreground\/background color-contrast examples to illustrate insufficient and sufficient colour-contrast ratios.\r\n\r\n[caption id=\"attachment_342\" align=\"aligncenter\" width=\"500\"]<a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-contrast-egs.jpg\"><img src=\"https:\/\/pressbooks.ulib.csuohio.edu\/moby-dick\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs.jpg\" alt=\"Examples of font colour against background colour; showcases issues with insufficient contrast\" class=\"wp-image-62\" width=\"500\" height=\"167\" \/><\/a> Image displays four examples of different font colors against different background colors; only one of the sample combinations provides sufficient color contrast.[\/caption]\r\n\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\" style=\"text-align: center\">How to Test Your Materials for Colour-Contrast Ratios<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nThere are many online and downloadable tools available to help you evaluate color-contrast ratios. Here are a few we have tried and like:\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\">Color Contrast Analyzer<\/a> by TPGI (the Paciello Group). Free download. Has an eye dropper tool to sample colors. Shows the contrast ratio of foreground text to background color. Evaluates for WCAG criteria. Also evaluates contrast for graphical user interface elements. Shows simulations for various color blindnesses. Has keyboard accessibility in addition to an eye dropper tool.<\/li>\r\n \t<li><a title=\"Color Checker (opens in a new window)\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"noopener\" target=\"_blank\">WebAIM's Color Contrast Checker<\/a>: This web-based tool allows you to select or enter color values to test, and provides you with a \"pass\" or \"fail\" on your contrast ratio.<\/li>\r\n \t<li><a title=\"Another web-based tool for checking colour contrast; (opens in a new window)\" href=\"http:\/\/www.contrastchecker.com\/\" rel=\"noopener\" target=\"_blank\">ACART's Contrast Checker<\/a>: This is a straightforward, web-based tool you can use to both check color contrast and view your selections in greyscale. This tool also allows you to keep a history of the color combinations you have tested.<\/li>\r\n \t<li><a title=\"Accessibility color wheel; (opens in a new window)\" href=\"http:\/\/gmazzocato.altervista.org\/colorwheel\/wheel.php\" target=\"_blank\" rel=\"noopener\">Giacomo Mazzocato's Accessibility Color Wheel<\/a>:This web-based tool includes several options for testing your color selections, including simulations of three types of color blindness. You can also opt to test what your contrast ratio is when the foreground and background color selections are inverted.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h2><a id=\"links\"><\/a>Link colours<\/h2>\r\nLinks must be visually distinct from both the surrounding, non-linked text and the background color. If you do not underline your links (or provide some other non-color cue), you must ensure that you provide sufficient contrast between the link and background colors <em>and<\/em> between the link color and that of the surrounding text.\r\n\r\nWeb Content Accessibility Guidelines (WCAG 2.0) require a:\r\n<ul>\r\n \t<li>4.5:1 contrast between the link text color and the background<\/li>\r\n \t<li>3:1 contrast between the link text color and the surrounding non-link text color [footnote]\"WCAG 2.0 and Link Color,\" <em>WebAIM,\u00a0<\/em>accessed June 7, 2018, http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors\/.[\/footnote]<\/li>\r\n<\/ul>\r\n<h2>High-contrast mode<\/h2>\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. Students with low vision\u00a0must 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 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=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\" style=\"text-align: center\">How to Test Your Content in High-Contrast Mode<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\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<\/div>\r\n<h2><a id=\"colour\"><\/a><a><\/a>Use of color<\/h2>\r\nYou should not rely on color as the sole means of conveying information and instruction. If the point you are making depends on color to be understood, you will need to edit your materials so that concepts presented in the visuals are not lost to those who are color blind or who require high contrast between colors.[footnote]\"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color,\"\u00a0 <em>WC3<\/em>, accessed June 7, 2018,\u00a0http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.[\/footnote]\r\n\r\n&nbsp;","rendered":"<p>In this section, we provide guidelines and recommendations about color contrast in your textbook materials.<\/p>\n<h1>What is color contrast?<\/h1>\n<p>Color contrast refers to the hue, lightness, and saturation of text, images, and background.<\/p>\n<p><strong>File types include<\/strong>: DOCX, HTML, PDF, JPG, GIF<\/p>\n<h1>What role does color play in the delivery of your content?<\/h1>\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<ol>\n<li>Have you presented text- or image-based content on a coloured or textured background? If so, you should:\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<\/li>\n<li>Have you included links in your content? If so, you should:\n<ul>\n<li>confirm that the <a title=\"Web link colour\" href=\"#links\">color of your web links<\/a> is distinct from both your background color and the color of the surrounding text<\/li>\n<\/ul>\n<\/li>\n<li>Have you used color to convey concepts or information? If so, you should:\n<ul>\n<li>confirm that you are <a title=\"Colour\" href=\"#colour\">not using color alone<\/a> to convey this information<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h1>Who are you doing this for?<\/h1>\n<p>This work supports students who:<\/p>\n<ul>\n<li>Have low vision<\/li>\n<li>Have poor contrast vision<\/li>\n<li>Are color blind and cannot differentiate between certain colors<\/li>\n<li>Use a device with monochrome display<\/li>\n<li>Use a print copy that is in black and white<\/li>\n<\/ul>\n<hr \/>\n<h1>What do you need to do?<\/h1>\n<p>In order to use color in a way that is most accessible, take into account color contrast between text and background and whether or not color is used to convey information and the location of a link.<\/p>\n<h2><a id=\"contrast\"><\/a>Contrast<\/h2>\n<p>Students with low vision and\/or a form of color blindness may have difficulty reading text that does not contrast enough with the background color selected. If the color 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>Level AAA of the &#8220;Web Content Accessibility Guidelines (WCAG 2.0)&#8221; requires that &#8220;the visual presentation of text and images of text has a contrast ratio of at least 7:1.&#8221;<a class=\"footnote\" title=\"WCAG defines three levels of minimum accessibility standards: A, AA, and AAA. AAA outlines the highest level of minimum standards for web accessibility. Large text can have a lower contrast ratio (4.5:1). In addition, text that conveys no information or is part of a logo has no color contrast requirements. See &quot;Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.6 Contrast (Enhanced),&quot; WC3, accessed February 28, 2018, http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html.\" id=\"return-footnote-63-1\" href=\"#footnote-63-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a> The following image presents four different foreground\/background color-contrast examples to illustrate insufficient and sufficient colour-contrast ratios.<\/p>\n<figure id=\"attachment_342\" aria-describedby=\"caption-attachment-342\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/colour-contrast-egs.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.ulib.csuohio.edu\/moby-dick\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs.jpg\" alt=\"Examples of font colour against background colour; showcases issues with insufficient contrast\" class=\"wp-image-62\" width=\"500\" height=\"167\" srcset=\"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs.jpg 600w, https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs-300x100.jpg 300w, https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs-65x22.jpg 65w, https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs-225x75.jpg 225w, https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-content\/uploads\/sites\/154\/2018\/06\/colour-contrast-egs-350x117.jpg 350w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-342\" class=\"wp-caption-text\">Image displays four examples of different font colors against different background colors; only one of the sample combinations provides sufficient color contrast.<\/figcaption><\/figure>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">How to Test Your Materials for Colour-Contrast Ratios<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>There are many online and downloadable tools available to help you evaluate color-contrast ratios. Here are a few we have tried and like:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\" target=\"_blank\" rel=\"noopener\">Color Contrast Analyzer<\/a> by TPGI (the Paciello Group). Free download. Has an eye dropper tool to sample colors. Shows the contrast ratio of foreground text to background color. Evaluates for WCAG criteria. Also evaluates contrast for graphical user interface elements. Shows simulations for various color blindnesses. Has keyboard accessibility in addition to an eye dropper tool.<\/li>\n<li><a title=\"Color Checker (opens in a new window)\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\" rel=\"noopener\" target=\"_blank\">WebAIM&#8217;s Color Contrast Checker<\/a>: This web-based tool allows you to select or enter color values to test, and provides you with a &#8220;pass&#8221; or &#8220;fail&#8221; on your contrast ratio.<\/li>\n<li><a title=\"Another web-based tool for checking colour contrast; (opens in a new window)\" href=\"http:\/\/www.contrastchecker.com\/\" rel=\"noopener\" target=\"_blank\">ACART&#8217;s Contrast Checker<\/a>: This is a straightforward, web-based tool you can use to both check color contrast and view your selections in greyscale. This tool also allows you to keep a history of the color combinations you have tested.<\/li>\n<li><a title=\"Accessibility color wheel; (opens in a new window)\" href=\"http:\/\/gmazzocato.altervista.org\/colorwheel\/wheel.php\" target=\"_blank\" rel=\"noopener\">Giacomo Mazzocato&#8217;s Accessibility Color Wheel<\/a>:This web-based tool includes several options for testing your color selections, including simulations of three types of color blindness. You can also opt to test what your contrast ratio is when the foreground and background color selections are inverted.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h2><a id=\"links\"><\/a>Link colours<\/h2>\n<p>Links must be visually distinct from both the surrounding, non-linked text and the background color. If you do not underline your links (or provide some other non-color cue), you must ensure that you provide sufficient contrast between the link and background colors <em>and<\/em> between the link color and that of the surrounding text.<\/p>\n<p>Web Content Accessibility Guidelines (WCAG 2.0) require a:<\/p>\n<ul>\n<li>4.5:1 contrast between the link text color and the background<\/li>\n<li>3:1 contrast between the link text color and the surrounding non-link text color <a class=\"footnote\" title=\"&quot;WCAG 2.0 and Link Color,&quot; WebAIM,\u00a0accessed June 7, 2018, http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors\/.\" id=\"return-footnote-63-2\" href=\"#footnote-63-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a><\/li>\n<\/ul>\n<h2>High-contrast mode<\/h2>\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. Students with low vision\u00a0must 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 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=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\" style=\"text-align: center\">How to Test Your Content in High-Contrast Mode<\/p>\n<\/header>\n<div class=\"textbox__content\">\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<\/div>\n<h2><a id=\"colour\"><\/a><a><\/a>Use of color<\/h2>\n<p>You should not rely on color as the sole means of conveying information and instruction. If the point you are making depends on color to be understood, you will need to edit your materials so that concepts presented in the visuals are not lost to those who are color blind or who require high contrast between colors.<a class=\"footnote\" title=\"&quot;Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color,&quot;\u00a0 WC3, accessed June 7, 2018,\u00a0http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast.\" id=\"return-footnote-63-3\" href=\"#footnote-63-3\" aria-label=\"Footnote 3\"><sup class=\"footnote\">[3]<\/sup><\/a><\/p>\n<p>&nbsp;<\/p>\n<hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-63-1\">WCAG defines three levels of minimum accessibility standards: A, AA, and AAA. AAA outlines the highest level of minimum standards for web accessibility. Large text can have a lower contrast ratio (4.5:1). In addition, text that conveys no information or is part of a logo has no color contrast requirements. See \"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.6 Contrast (Enhanced),\" <em>WC<\/em><i>3<\/i>, accessed February 28, 2018, http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast7.html. <a href=\"#return-footnote-63-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-63-2\">\"WCAG 2.0 and Link Color,\" <em>WebAIM,\u00a0<\/em>accessed June 7, 2018, http:\/\/webaim.org\/blog\/wcag-2-0-and-link-colors\/. <a href=\"#return-footnote-63-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><li id=\"footnote-63-3\">\"Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color,\"\u00a0 <em>WC3<\/em>, accessed June 7, 2018,\u00a0http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast. <a href=\"#return-footnote-63-3\" class=\"return-footnote\" aria-label=\"Return to footnote 3\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":7,"menu_order":16,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-63","chapter","type-chapter","status-publish","hentry"],"part":33,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":10,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/63\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/63\/revisions\/340"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/parts\/33"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapters\/63\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/media?parent=63"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/pressbooks\/v2\/chapter-type?post=63"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/contributor?post=63"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibilitytoolkit\/wp-json\/wp\/v2\/license?post=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}