{"id":1317,"date":"2018-04-26T21:23:32","date_gmt":"2018-04-26T21:23:32","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/pwaa\/?post_type=chapter&#038;p=1317"},"modified":"2022-12-16T16:12:42","modified_gmt":"2022-12-16T16:12:42","slug":"colour-contrast-evaluation","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/chapter\/colour-contrast-evaluation\/","title":{"raw":"Colour Contrast Evaluation","rendered":"Colour Contrast Evaluation"},"content":{"raw":"<h2>Colour Blindness Simulations<\/h2>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\"><strong>Try This:<\/strong> To experience how colour blindness affects people\u2019s ability to see colour, experiment with the <strong><a href=\"http:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\" target=\"_blank\" rel=\"noopener noreferrer\">Coblis \u2013 Color Blindness Simulator<\/a>.<\/strong><\/div>\r\n<h2>Colour Contrast Testers<\/h2>\r\nA quick search of the Internet for \u201ccolour contrast test\u201d should turn up a variety of tools you can use to test contrast. Here, we will mention the WebAIM Color Contrast Checker, but if you prefer another, you can add it to your Toolkit.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\"><strong>Toolkit:<\/strong> Bookmark the WebAIM <strong><a href=\"http:\/\/webaim.org\/resources\/contrastchecker\" target=\"_blank\" rel=\"noopener noreferrer\">Color Contrast Checker<\/a><\/strong> and add it to your Toolkit.<\/div>\r\n<h2>Why Colour Contrast Is Important<\/h2>\r\nYou may recall from the unit\u00a0<a class=\"toc__chapter-title\" href=\"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/chapter\/introduction-2\/\">Introduction to WCAG 2.0<\/a>\u00a0that WCAG 2.0 Guidelines 1.4.3 and 1.4.6 address accessibility issues associated with colour contrast. These two guidelines are presented below. Note the <strong>contrast ratios <\/strong>at each level (4.5:1 &amp; 3:1 at Level AA and 7:1 &amp; 4.5:1 at Level AAA for smaller and larger text respectively).\r\n<div style=\"padding: 1em;margin: 1em 0;border: 1px solid #bbb\">\r\n\r\n<strong>1.4.3 Contrast (Minimum):<\/strong> The visual presentation of text and images of text has a <i>contrast ratio of at least 4.5:1<\/i>, except for the following (Level AA):\r\n<ul>\r\n \t<li><strong>Large Text: <\/strong>Large-scale text and images of large-scale text have a <i>contrast ratio of at least 3:1<\/i><\/li>\r\n \t<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have <i>no contrast requirement.<\/i><\/li>\r\n \t<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has <i>no minimum contrast requirement.<\/i><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"padding: 1em;margin: 1em 0;border: 1px solid #bbb\">\r\n\r\n<strong>1.4.6 Contrast (Enhanced):<\/strong> The visual presentation of text and images of text has a <i>contrast ratio of at least 7:1<\/i>, except for the following (Level AAA):\r\n<ul>\r\n \t<li><strong>Large Text: <\/strong>Large-scale text and images of large-scale text have a <i>contrast ratio of at least 4.5:1.<\/i><\/li>\r\n \t<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have <i>no contrast requirement.<\/i><\/li>\r\n \t<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has <i>no minimum contrast requirement.<\/i><\/li>\r\n<\/ul>\r\n<\/div>\r\nSome accessibility checkers will have colour contrast evaluation built into them (e.g., AChecker), but others will not.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0be\">\r\n\r\n<strong>Technical:<\/strong>\r\n\r\nThere are many colour contrast evaluators from which you may choose to support your contrast testing (see some suggestions below). Using any of these tools requires gathering the colour codes from the elements being evaluated. There are a variety of ways to find these codes, though the easiest is to use a browser\u2019s \u201cInspect\u201d feature. You can inspect the colours in the right frame, as shown in the figure below.\r\n\r\n<img src=\"https:\/\/pressbooks.library.ryerson.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours.png\" alt=\"A screenshot of firebug, with colour codes highlighted in the right panel.\" class=\"alignnone wp-image-36 size-full\" \/>\r\n\r\n<strong>Figure: Inspect panel showing the colour codes in the Style pane to the right<\/strong>\r\nOnce you\u2019ve tested a few colour combinations you\u2019ll quickly develop a \u201cfeel\u201d for good contrast, and be able to quickly scan a page and identify where contrast may not be sufficient. You can test the specific colours associated with those elements you\u2019ve identified in a scan. There are tools, however, that will evaluate all the colours on a page (e.g., AChecker) \u2013 this may be preferable if you are reviewing a site that seems to have multiple contrast issues.\r\n\r\n<\/div>\r\nFor a walk through the WebAIM colour contrast checker, watch the following video:\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=denV-EyR2O4\" target=\"_blank\" rel=\"noopener noreferrer\">Checking Colour Contrast<\/a><\/strong>\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/denV-EyR2O4[\/embed]\r\n<h2>The Anatomy of a Colour Contrast Results Screen<\/h2>\r\nIn the figure below you can see the foreground colour (#007ac6) and background colour (#ffffff) codes entered into the respective fields. Below that you will see the compliance status for Normal and Large text, at Level AA and Level AAA. In this case the colours contrast well enough to pass at Level AA (4.57:1), but for smaller text the contrast ratio fails at Level AAA. Sites should aim for Level AA contrast, but if feasible try for Level AAA compliance.\r\n\r\nNote the lighten and darken links next to the colour input field. You can click these (on the test site) to adjust the colours so they will pass, then take the resulting colour codes and replace the existing codes to adjust the colour on the site being evaluated so it complies.\r\n\r\n<img src=\"https:\/\/pressbooks.library.ryerson.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast.png\" alt=\"The WebAIM Colour Contrast Checker\" class=\"alignnone wp-image-37 size-full\" width=\"675\" height=\"463\" \/>\r\n\r\n<strong>Figure: The WebAIM Colour Contrast Checker\r\n<\/strong>\r\n<h2><strong>Other Contrast Testers<\/strong><\/h2>\r\nHere are a few other colour contrast testers you may want to experiment with:\r\n<ul>\r\n \t<li><a href=\"http:\/\/contrastchecker.com\" target=\"_blank\" rel=\"noopener noreferrer\">Acart Communications Contrast Checker<\/a><\/li>\r\n<\/ul>","rendered":"<h2>Colour Blindness Simulations<\/h2>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\"><strong>Try This:<\/strong> To experience how colour blindness affects people\u2019s ability to see colour, experiment with the <strong><a href=\"http:\/\/www.color-blindness.com\/coblis-color-blindness-simulator\" target=\"_blank\" rel=\"noopener noreferrer\">Coblis \u2013 Color Blindness Simulator<\/a>.<\/strong><\/div>\n<h2>Colour Contrast Testers<\/h2>\n<p>A quick search of the Internet for \u201ccolour contrast test\u201d should turn up a variety of tools you can use to test contrast. Here, we will mention the WebAIM Color Contrast Checker, but if you prefer another, you can add it to your Toolkit.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #3c3\"><strong>Toolkit:<\/strong> Bookmark the WebAIM <strong><a href=\"http:\/\/webaim.org\/resources\/contrastchecker\" target=\"_blank\" rel=\"noopener noreferrer\">Color Contrast Checker<\/a><\/strong> and add it to your Toolkit.<\/div>\n<h2>Why Colour Contrast Is Important<\/h2>\n<p>You may recall from the unit\u00a0<a class=\"toc__chapter-title\" href=\"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/chapter\/introduction-2\/\">Introduction to WCAG 2.0<\/a>\u00a0that WCAG 2.0 Guidelines 1.4.3 and 1.4.6 address accessibility issues associated with colour contrast. These two guidelines are presented below. Note the <strong>contrast ratios <\/strong>at each level (4.5:1 &amp; 3:1 at Level AA and 7:1 &amp; 4.5:1 at Level AAA for smaller and larger text respectively).<\/p>\n<div style=\"padding: 1em;margin: 1em 0;border: 1px solid #bbb\">\n<p><strong>1.4.3 Contrast (Minimum):<\/strong> The visual presentation of text and images of text has a <i>contrast ratio of at least 4.5:1<\/i>, except for the following (Level AA):<\/p>\n<ul>\n<li><strong>Large Text: <\/strong>Large-scale text and images of large-scale text have a <i>contrast ratio of at least 3:1<\/i><\/li>\n<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have <i>no contrast requirement.<\/i><\/li>\n<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has <i>no minimum contrast requirement.<\/i><\/li>\n<\/ul>\n<\/div>\n<div style=\"padding: 1em;margin: 1em 0;border: 1px solid #bbb\">\n<p><strong>1.4.6 Contrast (Enhanced):<\/strong> The visual presentation of text and images of text has a <i>contrast ratio of at least 7:1<\/i>, except for the following (Level AAA):<\/p>\n<ul>\n<li><strong>Large Text: <\/strong>Large-scale text and images of large-scale text have a <i>contrast ratio of at least 4.5:1.<\/i><\/li>\n<li><strong>Incidental: <\/strong>Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have <i>no contrast requirement.<\/i><\/li>\n<li><strong>Logotypes: <\/strong>Text that is part of a logo or brand name has <i>no minimum contrast requirement.<\/i><\/li>\n<\/ul>\n<\/div>\n<p>Some accessibility checkers will have colour contrast evaluation built into them (e.g., AChecker), but others will not.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0be\">\n<p><strong>Technical:<\/strong><\/p>\n<p>There are many colour contrast evaluators from which you may choose to support your contrast testing (see some suggestions below). Using any of these tools requires gathering the colour codes from the elements being evaluated. There are a variety of ways to find these codes, though the easiest is to use a browser\u2019s \u201cInspect\u201d feature. You can inspect the colours in the right frame, as shown in the figure below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"982\" height=\"289\" src=\"https:\/\/pressbooks.library.ryerson.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours.png\" alt=\"A screenshot of firebug, with colour codes highlighted in the right panel.\" class=\"alignnone wp-image-36 size-full\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours.png 982w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours-300x88.png 300w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours-768x226.png 768w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours-65x19.png 65w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours-225x66.png 225w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/firebug_colours-350x103.png 350w\" sizes=\"auto, (max-width: 982px) 100vw, 982px\" \/><\/p>\n<p><strong>Figure: Inspect panel showing the colour codes in the Style pane to the right<\/strong><br \/>\nOnce you\u2019ve tested a few colour combinations you\u2019ll quickly develop a \u201cfeel\u201d for good contrast, and be able to quickly scan a page and identify where contrast may not be sufficient. You can test the specific colours associated with those elements you\u2019ve identified in a scan. There are tools, however, that will evaluate all the colours on a page (e.g., AChecker) \u2013 this may be preferable if you are reviewing a site that seems to have multiple contrast issues.<\/p>\n<\/div>\n<p>For a walk through the WebAIM colour contrast checker, watch the following video:<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=denV-EyR2O4\" target=\"_blank\" rel=\"noopener noreferrer\">Checking Colour Contrast<\/a><\/strong><\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Checking Colour Contrast\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/denV-EyR2O4?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>The Anatomy of a Colour Contrast Results Screen<\/h2>\n<p>In the figure below you can see the foreground colour (#007ac6) and background colour (#ffffff) codes entered into the respective fields. Below that you will see the compliance status for Normal and Large text, at Level AA and Level AAA. In this case the colours contrast well enough to pass at Level AA (4.57:1), but for smaller text the contrast ratio fails at Level AAA. Sites should aim for Level AA contrast, but if feasible try for Level AAA compliance.<\/p>\n<p>Note the lighten and darken links next to the colour input field. You can click these (on the test site) to adjust the colours so they will pass, then take the resulting colour codes and replace the existing codes to adjust the colour on the site being evaluated so it complies.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.ryerson.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast.png\" alt=\"The WebAIM Colour Contrast Checker\" class=\"alignnone wp-image-37 size-full\" width=\"675\" height=\"463\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast.png 675w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast-300x206.png 300w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast-65x45.png 65w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast-225x154.png 225w, https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-content\/uploads\/sites\/30\/2018\/01\/webaim_contrast-350x240.png 350w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/p>\n<p><strong>Figure: The WebAIM Colour Contrast Checker<br \/>\n<\/strong><\/p>\n<h2><strong>Other Contrast Testers<\/strong><\/h2>\n<p>Here are a few other colour contrast testers you may want to experiment with:<\/p>\n<ul>\n<li><a href=\"http:\/\/contrastchecker.com\" target=\"_blank\" rel=\"noopener noreferrer\">Acart Communications Contrast Checker<\/a><\/li>\n<\/ul>\n","protected":false},"author":56,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-1317","chapter","type-chapter","status-publish","hentry"],"part":1301,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapters\/1317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/wp\/v2\/users\/56"}],"version-history":[{"count":11,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapters\/1317\/revisions"}],"predecessor-version":[{"id":2565,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapters\/1317\/revisions\/2565"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/parts\/1301"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapters\/1317\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/wp\/v2\/media?parent=1317"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/pressbooks\/v2\/chapter-type?post=1317"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/wp\/v2\/contributor?post=1317"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/pwaa\/wp-json\/wp\/v2\/license?post=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}