{"id":124,"date":"2022-04-13T10:33:01","date_gmt":"2022-04-13T10:33:01","guid":{"rendered":"https:\/\/a11y-tools.com\/blog\/?p=124"},"modified":"2026-08-24T12:47:57","modified_gmt":"2026-08-24T12:47:57","slug":"well-colour-us-surprised-this-sc-can-be-a-tricky-customer-quiz","status":"publish","type":"post","link":"https:\/\/a11y-tools.com\/blog\/2022\/04\/well-colour-us-surprised-this-sc-can-be-a-tricky-customer-quiz\/","title":{"rendered":"Well Colour Us Surprised\u2014This SC Can Be a Tricky Customer [Quiz]"},"content":{"rendered":"<style>\np.backup {padding: 1em;outline:2px dotted black;font-weight: bold;}\n.tests details {margin: 1em 0;}\n.tests details ul,.tests details li {}\n.tests details li {margin-left: 1em;list-style-type: disc;}\nsection[aria-labelledby] {border-bottom: 2px dashed #e74d00;padding: 0.3em 0.3em 1em 0.3em;}\ndetails summary {background: darkblue;color: white;font-weight: bold;padding: 5px;}\ndetails[open] {outline: 2px solid darkblue;outline-offset: -2px;}\n.tests .test p {color: black;}\n.actions{margin:1em 0;border-radius:5px;background:lightyellow;padding:.5em;border:1px solid black;}\n.tests .row{display:block;}\n.tests label{display:block;font-weight:bold;}\n.tests form{max-width:800px;}\n.tests input,.tests select,.tests textarea{width:100%;}\n.tests input,.tests select,.tests button,.tests textarea{border:1px solid black;padding:.5em;font-size:1.2rem;}\n.tests .test button {background:#333;color:white;font-weight:bold;border-radius:5px;font-size:1.1em;padding:.3em .5em;}\n.tests button.primary{background:darkblue;}\n.tests .rectangular button{border-radius:0;}\n.tests button.inverted{background:white;color:#333;}\n.tests button.noBorder{border:none;}\n.tests .softColouredButtons button{background:gray;color:lightgreen;border:none;}\n.tests .softColouredButtons button.inverted{background:lightgreen;color:black;}\n.tests .poorFocusStyles button{outline:1px solid black;background:cornsilk;color:black;margin-right:5px;}\n.tests .poorFocusStyles button:hover,.tests .poorFocusStyles button:focus{background:bisque;}\n.cornsilk{background:cornsilk;color:black;}\n.mediumpurple{background:mediumpurple;color:black;}\n.tests legend{font-weight:bold;}\n.tests fieldset{border-radius:5px;margin:.5em 0;}\n.tests .ib label{display:inline-block;margin-right:2em;}\n.tests .bigList{display:flex;flex-direction:column;width:20em;}\n.tests .bigList li{padding:1em;background:#eee;color:blue;}\n.tests .bigList li + li{border-top:1px solid gray;}\n.tests .bigList [aria-selected=\"true\"]{background:#eef;}\n.tests ul,.tests li{margin:0;padding:0;}\n.tests nav.responsive ul,.tests li{list-style:none;padding:0;}\n.tests nav.responsive li{margin:0;}\n.tests nav.responsive a{display:block;padding:.2em 1em;}\n.tests nav.responsive li{border-bottom:1px solid black;}\n@media screen and (min-width: 768px){.tests nav.responsive li{display:inline-block;border:1px solid black;}\n.tests nav.responsive li a{display:inline-block;padding:.2em 1em;}\n}\n.tests nav.responsive>button span{display:inline-block;}\n.tests nav.responsive>button span+span{margin-left:5px;}\n.tests nav.responsive>button[aria-expanded=\"true\"]{}\n.tests nav.responsive>button[aria-expanded=\"true\"]>span:first-child{transform:rotate(180deg);}\n.tests .test a{text-decoration:none;outline:1px solid transparent;transition-duration:.1s;}\n.tests .test a,.tests .test a *{color:darkblue;}\n.tests ul.cta a{margin:1em 0 0 0;display:inline-block;}\n.tests a.samecolor{color:inherit !important;}\n.tests .panel{margin:0 25%;border:2px solid darkblue;border-radius:10px;padding:10px;}\n.tests .panel a{display:block;margin:10px auto;text-align:center;}\n.tests .otherdifferantiator1 p a{font-weight:bold;}\n.tests .otherdifferantiator2 p a{text-transform:uppercase;}\n.tests .otherdifferantiator3 p img{display:inline-block;height:18px;transform:translateY(4px);}\n.tests a:hover,.tests a:focus-visible{outline:4px solid #cb8100;background:lightyellow;}\n.tests .underlinedheadings h3{text-decoration:underline;}\n.tests .underlinedheadings.underlinedlinks a{text-decoration:underline;}\n.tests a:hover .cta,.tests a:focus-visible .cta{outline:4px solid #cb8100;background:lightyellow;}\n.tests a .cta{text-align:center;}\n.tests code{color:darkgreen;font-weight:bold;background:#f1f1f1;}\n.tests .justUnder3to1 .test a{color:#2f2fff;}\n.tests .justOver3to1 .test a{color:#33f;}\ndiv.test{border:2px dotted darkblue;padding:2em;}\n.tests .container{margin:0 auto;max-width:980px;min-width:320px;}\n.tests .row{display:flex;flex-wrap:wrap;}\n.tests .column{flex-grow:1;flex-shrink:1;flex-basis:1;margin:10px;border:1px solid #dedede;padding:10px;}\n.tests .col-1{max-width:calc(100% \/ 12);}\n.tests .col-2{max-width:calc(100% \/ 12 * 2);}\n.tests .col-3{max-width:calc(100% \/ 12 * 3);}\n.tests .col-4{max-width:calc(100% \/ 12 * 4);}\n.tests .col-5{max-width:calc(100% \/ 12 * 5);}\n.tests .col-6{max-width:calc(100% \/ 2);}\n@media screen and (max-width: 768px){.tests .container{overflow:auto;}\n.tests .column{min-width:100%;width:100%;margin:10px 0;}\n}\n.test12 h3,.test12 a{font-size:1em;font-weight:normal;}\n.test12 h3{margin-bottom:1em;}\n.test13 a p{color:darkblue;}\ndetails[open] ul,details[open] p{padding:10px;}\ndetails[open] summary+div{padding:10px;}\ninput[name=\"sfxChoice\"]+label{display:inline;}\n\/* OVERRIDES *\/\n.tests .test {background:white;background:white;}\n.otherdifferantiator3 img {width:initial}\n#broken img {max-width:500px;}\nfigcaption {font-weight:bold;max-width:50%;}\n\/*Fixes for a11y-tools version*\/\n[id^=\"test\"] {font-weight: normal;background:white;}\n[id^=\"test\"] a,[id^=\"test\"] button {outline-offset:0;border-radius:0;border-bottom: none;}\n[id^=\"test\"] h3 {border-left: none;padding-left: 0;color:black;margin-bottom: 0;}\n#test2 .exampleResponsiveMenuTrigger[hidden] {display: none;}\n#test10 li {color:black;}\n#test14 {color:black;}\n#test14 a {color:#2f2fff;}\n#test15 {color:black;}\n#test15 a {color:#3333ff;}\n#test18 button {outline:none;}\n<\/style>\n<p class=\"backup\">This article originally appeared on the TPGi blog but was removed in a cull of technical articles in August 2026. The content is mostly as the original was, but the presentation may have changed slightly in the migration to this site.<\/p>\n<p><img decoding=\"async\" alt=\"Does it fail 1.4.1 Use of Color?\" src=\"https:\/\/a11y-tools.com\/blog\/wp-content\/uploads\/2026\/01\/use-of-color-header.png\"><\/p>\n<p>If there is one topic that causes a lot of debate among our accessibility engineers here at TPGi, it\u2019s the Success Criterion <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#use-of-color\" rel=\"noopener noreferrer\">1.4.1 Use of Color<\/a>. On the face of it, it seems like a simple one:<\/p>\n<blockquote>\n<p>Colour is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.<\/p>\n<\/blockquote>\n<p>Yet time and again we encounter issues that result in much head-scratching and deliberation from the hive mind.<\/p>\n<ul>\n<li>Was that really a failure due to use of colour?.<\/li>\n<li>Are we failing on Use of Color because we just want the links underlined?.<\/li>\n<li>Or is it just bad UX for everyone and therefore not a WCAG failure as such \u2026 but still sucks, nonetheless?.<\/li>\n<\/ul>\n<p>Because we encounter issues where there may be differing opinions on such things (depending on the engineer who\u2019s reviewing and whatever direction the wind is at the time), we decided that the best way to come to a consensus was to pull together some examples and get collective agreement on it. In doing that, we created some examples that felt really quite mean. Like, nobody would ever do that for real, would they? Apparently, even examples that seemed contrived for the purposes of creating test pages would prompt some engineers to say \u201cI\u2019ve seen that in the wild!\u201d Wild, indeed.<\/p>\n<p>Now, we could simply share these examples with you and state \u201cThis fails, this passes etc\u201d, but in discussing these cases we found it was more fun to treat it a bit like a game show. So, fire up your <a href=\"https:\/\/www.youtube.com\/watch?v=8CgCBiM2G74\" rel=\"noopener noreferrer\">favorite TV theme music<\/a> to set the scene then take a look at the examples below. And ask yourself \u201cIs this a pass or fail?\u201d before revealing what we concluded.<\/p>\n<p>One final thing \u2026<\/p>\n<fieldset>\n<legend>Would you like sound effects to accompany your choices?<\/legend>\n<div><input type=\"radio\" name=\"sfxChoice\" checked=\"\" id=\"sfxYes\" value=\"yes\"> <label for=\"sfxYes\">Yes please, let\u2019s go all in<\/label><\/div>\n<div><input type=\"radio\" name=\"sfxChoice\" id=\"sfxNo\" value=\"no\"> <label for=\"sfxNo\">No thanks, I\u2019m sure this is quite enough fun for me already<\/label><\/div>\n<\/fieldset>\n<h2>All the Dubiously Named Tests<\/h2>\n<ul>\n<li><a href=\"#sectionHeading1\">Test 1: Inline Links Are Out of Line<\/a><\/li>\n<li><a href=\"#sectionHeading2\">Test 2: It\u2019s All in Your Header<\/a><\/li>\n<li><a href=\"#sectionHeading3\">Test 3: How Could You Be So Bold?<\/a><\/li>\n<li><a href=\"#sectionHeading4\">Test 4: 2 Bold, 2 Furious<\/a><\/li>\n<li><a href=\"#sectionHeading5\">Test 5: The Indications Are Good<\/a><\/li>\n<li><a href=\"#sectionHeading6\">Test 6: Give Us a Clue<\/a><\/li>\n<li><a href=\"#sectionHeading7\">Test 7: Cool, 2 Actions<\/a><\/li>\n<li><a href=\"#sectionHeading8\">Test 8: Such a Card<\/a><\/li>\n<li><a href=\"#sectionHeading9\">Test 9: Links. Lots of Links<\/a><\/li>\n<li><a href=\"#sectionHeading10\">Test 10: More of the Same. Almost<\/a><\/li>\n<li><a href=\"#sectionHeading11\">Test 11: Expect the UnUXpected<\/a><\/li>\n<li><a href=\"#sectionHeading12\">Test 12: You Said You Wanted Underlines<\/a><\/li>\n<li><a href=\"#sectionHeading13\">Test 13: Ooh, Look at Me<\/a><\/li>\n<li><a href=\"#sectionHeading14\">Test 14: The \u201cIsn\u2019t This the Same as Test 1?\u201d Test<\/a><\/li>\n<li><a href=\"#sectionHeading15\">Test 15: The \u201cCome on, You\u2019re Just Repeating Things Now\u201d Test<\/a><\/li>\n<li><a href=\"#sectionHeading16\">Test 16: One of These Things Is Not Like the Other<\/a><\/li>\n<li><a href=\"#sectionHeading17\">Test 17: What Becomes of the Faux Inverted?<\/a><\/li>\n<li><a href=\"#sectionHeading18\">Test 18: Risky Bisque-ness<\/a><\/li>\n<\/ul>\n<div class=\"tests\">\n<section aria-labelledby=\"sectionHeading1\" data-landmark-index=\"6\">\n<h2 id=\"sectionHeading1\" tabindex=\"-1\">Test 1: Inline Links Are Out of Line<\/h2>\n<p>This is bread-and-butter stuff: inline links in body text. This is surely an easy one for starters, right?<\/p>\n<div id=\"test1\" class=\"test\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam<\/a> corrupti <a href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.<\/p>\n<\/p>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>The ONLY thing that indicates that these are links rather than the surrounding body text is the change of colour.<\/li>\n<li>If you\u2019re tempted to mention <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/general\/G183\">technique G183<\/a> at this point, just hold on to that for a moment. Or, more specifically, until you get to <a href=\"#sectionHeading14\">Test 14<\/a><\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading2\" data-landmark-index=\"7\">\n<h2 id=\"sectionHeading2\" tabindex=\"-1\">Test 2: It\u2019s All in Your Header<\/h2>\n<p>For this test, assume that it is right up at the top of the page as header navigation. Also note that this test is responsive, so wiggle that browser window around, whydon\u2019tcha?<\/p>\n<div id=\"test2\" class=\"test\">\n<nav class=\"responsive\" aria-label=\"Primary\" data-landmark-index=\"8\">\n<button hidden=\"hidden\" class=\"exampleResponsiveMenuTrigger\" type=\"button\" aria-expanded=\"true\" aria-controls=\"navExample\"><br \/>\n<span aria-hidden=\"true\">\u25bc<\/span><br \/>\n<span>Menu<\/span><br \/>\n<\/button><\/p>\n<ul id=\"exampleResponsiveMenu\">\n<li><a href=\"#\">Lorem<\/a><\/li>\n<li><a href=\"#\">ipsum<\/a><\/li>\n<li><a href=\"#\">dolor<\/a><\/li>\n<li><a href=\"#\">sit<\/a><\/li>\n<li><a href=\"#\">amet<\/a><\/li>\n<li><a href=\"#\">consectetur<\/a><\/li>\n<li><a href=\"#\">adipisicing<\/a><\/li>\n<li><a href=\"#\">elit<\/a><\/li>\n<\/ul>\n<\/nav>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>The position and layout of the links in the header\u2014either as expand\/collapse disclosure menu on mobile or a series of links set horizontally for desktop browser view\u2014are such that it\u2019s clear this is header navigation and the colour\/style is almost irrelevant.<\/li>\n<li>Lack of underline does not present a usability\/UX problem.<\/li>\n<li>Colour is not being used to differentiate these links from other text.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading3\" data-landmark-index=\"9\">\n<h2 id=\"sectionHeading3\" tabindex=\"-1\">Test 3: How Could You Be So Bold?<\/h2>\n<p>Careful now with the headings, Lloydi, you\u2019ll start giving away clues. Can\u2019t make this too easy. Anyway, let\u2019s continue. How does this one fare?<\/p>\n<div id=\"test3\" class=\"test otherdifferantiator1\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam<\/a> corrupti <a href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.<\/p>\n<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>While there is no underline present, there is another difference in the links that makes them stand out from the body text: they are bold.<\/li>\n<li>Of course, underlining would help to reinforce that these are links.<\/li>\n<li>Depending on the font used, the difference between normal font weight and bold may be subtle.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading4\" data-landmark-index=\"10\">\n<h2 id=\"sectionHeading4\" tabindex=\"-1\">Test 4: 2 Bold, 2 Furious<\/h2>\n<p>Everyone loves a sequel, and this is Test 3\u2019s sequel. Truth be known they were both built at pretty much the same time, so perhaps it\u2019s a bit rich to call it a sequel. (Don\u2019t worry, we\u2019ll get on to some real total re-hashes later on.)<\/p>\n<div id=\"test4\" class=\"test otherdifferantiator1\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis <strong>something really important<\/strong> quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam<\/a> corrupti <a href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel but <strong>watch out, this is super dangerous<\/strong>, ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? <a href=\"#\">Harum quaerat<\/a> <strong>reprehenderit modi<\/strong>.<\/p>\n<\/p>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>In this example, we can no longer tell that the links are links by the fact that they are bold, because now we also have some important text marked up with <code>&lt;strong&gt;<\/code> elements.<\/li>\n<li>With just the colour to differentiate the two bold text types, we simply don\u2019t know what\u2019s a link and what\u2019s just important text.<\/li>\n<li>So, colour alone is used to differentiate these two types of text. Chalk it up as another failure.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading5\" data-landmark-index=\"11\">\n<h2 id=\"sectionHeading5\" tabindex=\"-1\">Test 5: The Indications Are Good<\/h2>\n<p>What\u2019s this? Some imagery in this otherwise dull-as-dishwater collection of barely designed examples from someone who really shouldn\u2019t ever attempt to open any graphics software? Normal, boring service will be resumed again soon.<\/p>\n<div id=\"test5\" class=\"test\">\n<div class=\"otherdifferantiator3\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit <img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAB7ZJREFUeJzt3U+MXVUdwPFvO2CndWHTQEL8Q4wmglEsdKPGzZAoIWGnrNSFQf4sSIwr3YgLt8YY\/ojTonHt0mjUQgChYSvRBmmnhLDBBSHaEqPtQKcubseQsXNm5t3fuefP\/X6SsyBhzjvn9H775r25nQeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJNXr48DDwK+BV4B\/ApeBK42OdWANWAVujzumbI4xrHUNuET589vL+d6R4Tyq8RXgJOUPPPc4DhwMOrNIB4FfUP58xowN4ASwHHw2RX0CeJryhzvleIG6IjkIvEj5c4k83y4i+TrwL8ofaImxGnB+UVp\/5rjWOB56QhPbB\/yQ8odYetTwmuQOyp9DjrFBHee7kEcof4A1jCfHHmSAVcqfQ67x88Bzmsw3KX9wtYwzI88ywhrlzyHXOBt4TsDwrU9Onwb+TCcvoAKsAwcKr+ES8IHCa8gl\/Hz3R062xRLwK4xD0wkPP2cg3wA+n3H+Fr1eegHAG6UX0JJcgVwH\/CjT3C17tvQCgOdKL0BwL+VfsNU4PjfmUIMcZXhLtPRZ5Bqhcj2DPJBp3pY9Cfy19CKAvzDcnqFCjgDvUv5vkprG89T1ZsUy8CfKn0v1zyA5fI3yh1TT+Bl1xbFpmeGHhr19u1W9n1D+kEqOS8CrwBPU8ZpjJ0cZIj5DG7e7Nx9I1J26jwG3kPetaOVzE8NfFAayxWuM3+S3J1+1IpWKo4lALjBug7+ZfskKVDKOJgJ5j3EbvHv6JStI6TiaCGTsBg9Pv2QFqCGOWQSS+w5jxasljlkEorbUFEcT10\/3G9T\/1BZHE9dP9xsUUGccTVw\/3W9Q1cbRxPXT\/QZnruY4mrh+ut\/gjNUeRxPXT\/cbnKkp4jgbMEf1ut\/gDE0Vx4cD5qle9xucmSnjIGCu6nW\/wRmZOg4C5qte9xuciRJxEDBn9brf4AyUioOAeavX\/QY7VzIOAuauXvcb7FjpOAiYv3rdb7BTNcRBwGNUr\/sNdqiWOAh4nOp1v8HO1BQHAY9Vve432JHa4iDg8arX\/QY7UWMcBDxm9brfYAdqjYOAx61e9xtsXM1xEPDY1et+gw2rPQ4CHr963W+wUS3EQcAaqtf9BhvUShwErKN63W+wMS3FQcBaqtf9BhvSWhwErKd63W+wES3GAeM+xOdi8FqyMJDyWo0Dxv3ihr9FL8ZPb+rPTQwfGnprxsdYA+4E\/p5h7jGf417D59DvyGeQclp+5ti06Oe4bwC3ZVxXGAMpo4c4Nq0usLYnJlhXCAOZXk9xwN4\/x\/054MBEaxvNQKbVWxybdvM57hsMzxzNxAEGMqVe43i\/zc9xf5XhbdyLDO9WPU4jrzm2MpBpzCGOLhlIfsbRMAPJyzgaZyD5GEcHDCQP4+iEgcQzjo4YSCzj6IyBxDGODhlIDOPolIGMZxwdM5BxjKNzBrI445gBA1mMccyEgeydccyIgeyNccyMgeyeccyQgeyOccyUgezMOGbMQNJuxDhmzUC2tx84hXHMmoFs70GMY\/YMZHtrGMfsGci13YZxNMdfXj2dY5nmzfmLpGfPQKZzJMOcxpGZgUznP8HzGUejfA1ybSv4mkMYyHaWgQsYx+wZyPZ+inHMnoFs7wbgLYxj1gwkbYXhV\/gbx0wZyM7uZPfPJKcYbnBUJwxkd24AHgXe4drncA54AFgqtcBKHAOOM5zH+tWxxvDpU7fnfvB9GeYce5HnWFPNloEvALcAHwTeBl4GTpdcVAUOMXyK1H07\/H8ngO8S\/3OmbHwG0ViH2Ns\/C3gBOFhkpQswEI31S\/Z+3awWWekCDERjHGPxayf8NYn3Yqk2D4342gfDVpGRzyAa4xyLXztnohfju1iqzTpw\/YivPRC4FgNRdaq6fnwNIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIl1BjIvtILUDHV\/dnXGMjh0gtQMUdKL2CrHIFcHvn1XwpZhVr0xZFf\/17IKjI7D1wZMU5S4VOtstsH\/JFx184\/Jl\/1As4xbpNXgO9MvmqV9jDjr5u1yVe9gJOM3+gV4CngM8DStMvXhJYY\/oxXiblm\/hC9wOuiJwROA3cFzHP\/1SHt1unoCXO8SH8pw5zSboRfezleDB8G3gKuzzC3tJ114EbgnchJczyDnAeeyTCvlPIMwXFAvh8UPpVpXmk7J3JMmuvnDUvAWeCTmeaX3u814FbG\/5D6\/+R6BrkMPJJpbmmrH5AhDsj7E+v9wIt464jyOgWsABs5Js99S8engJeBQ5kfR\/P0b+Aow7dYWeS+m3cNuC\/zY2i+vkXGOGCa2zheAS4CX57gsTQf32eCd0unus\/pJYxEcb4H\/Lj0InK4F7hAzI1pjvmN88BX6dzNwO8of9iOtsZvgY8xIysMoWxQ\/vAddY4NhmtkhUJq+Jd7HwXuYTiEzwIfAT5Enf9eXvlcZriX6k2G29afB35\/9b8lSZIkSZIkSZIkSZIkSZIkSZIkSZIkSarOfwF9Ro6u5v17zAAAAABJRU5ErkJggg==\" alt=\"Opens in a new window\"><\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam <img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAB7ZJREFUeJzt3U+MXVUdwPFvO2CndWHTQEL8Q4wmglEsdKPGzZAoIWGnrNSFQf4sSIwr3YgLt8YY\/ojTonHt0mjUQgChYSvRBmmnhLDBBSHaEqPtQKcubseQsXNm5t3fuefP\/X6SsyBhzjvn9H775r25nQeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJNXr48DDwK+BV4B\/ApeBK42OdWANWAVujzumbI4xrHUNuET589vL+d6R4Tyq8RXgJOUPPPc4DhwMOrNIB4FfUP58xowN4ASwHHw2RX0CeJryhzvleIG6IjkIvEj5c4k83y4i+TrwL8ofaImxGnB+UVp\/5rjWOB56QhPbB\/yQ8odYetTwmuQOyp9DjrFBHee7kEcof4A1jCfHHmSAVcqfQ67x88Bzmsw3KX9wtYwzI88ywhrlzyHXOBt4TsDwrU9Onwb+TCcvoAKsAwcKr+ES8IHCa8gl\/Hz3R062xRLwK4xD0wkPP2cg3wA+n3H+Fr1eegHAG6UX0JJcgVwH\/CjT3C17tvQCgOdKL0BwL+VfsNU4PjfmUIMcZXhLtPRZ5Bqhcj2DPJBp3pY9Cfy19CKAvzDcnqFCjgDvUv5vkprG89T1ZsUy8CfKn0v1zyA5fI3yh1TT+Bl1xbFpmeGHhr19u1W9n1D+kEqOS8CrwBPU8ZpjJ0cZIj5DG7e7Nx9I1J26jwG3kPetaOVzE8NfFAayxWuM3+S3J1+1IpWKo4lALjBug7+ZfskKVDKOJgJ5j3EbvHv6JStI6TiaCGTsBg9Pv2QFqCGOWQSS+w5jxasljlkEorbUFEcT10\/3G9T\/1BZHE9dP9xsUUGccTVw\/3W9Q1cbRxPXT\/QZnruY4mrh+ut\/gjNUeRxPXT\/cbnKkp4jgbMEf1ut\/gDE0Vx4cD5qle9xucmSnjIGCu6nW\/wRmZOg4C5qte9xuciRJxEDBn9brf4AyUioOAeavX\/QY7VzIOAuauXvcb7FjpOAiYv3rdb7BTNcRBwGNUr\/sNdqiWOAh4nOp1v8HO1BQHAY9Vve432JHa4iDg8arX\/QY7UWMcBDxm9brfYAdqjYOAx61e9xtsXM1xEPDY1et+gw2rPQ4CHr963W+wUS3EQcAaqtf9BhvUShwErKN63W+wMS3FQcBaqtf9BhvSWhwErKd63W+wES3GAeM+xOdi8FqyMJDyWo0Dxv3ihr9FL8ZPb+rPTQwfGnprxsdYA+4E\/p5h7jGf417D59DvyGeQclp+5ti06Oe4bwC3ZVxXGAMpo4c4Nq0usLYnJlhXCAOZXk9xwN4\/x\/054MBEaxvNQKbVWxybdvM57hsMzxzNxAEGMqVe43i\/zc9xf5XhbdyLDO9WPU4jrzm2MpBpzCGOLhlIfsbRMAPJyzgaZyD5GEcHDCQP4+iEgcQzjo4YSCzj6IyBxDGODhlIDOPolIGMZxwdM5BxjKNzBrI445gBA1mMccyEgeydccyIgeyNccyMgeyeccyQgeyOccyUgezMOGbMQNJuxDhmzUC2tx84hXHMmoFs70GMY\/YMZHtrGMfsGci13YZxNMdfXj2dY5nmzfmLpGfPQKZzJMOcxpGZgUznP8HzGUejfA1ybSv4mkMYyHaWgQsYx+wZyPZ+inHMnoFs7wbgLYxj1gwkbYXhV\/gbx0wZyM7uZPfPJKcYbnBUJwxkd24AHgXe4drncA54AFgqtcBKHAOOM5zH+tWxxvDpU7fnfvB9GeYce5HnWFPNloEvALcAHwTeBl4GTpdcVAUOMXyK1H07\/H8ngO8S\/3OmbHwG0ViH2Ns\/C3gBOFhkpQswEI31S\/Z+3awWWekCDERjHGPxayf8NYn3Yqk2D4342gfDVpGRzyAa4xyLXztnohfju1iqzTpw\/YivPRC4FgNRdaq6fnwNIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIl1BjIvtILUDHV\/dnXGMjh0gtQMUdKL2CrHIFcHvn1XwpZhVr0xZFf\/17IKjI7D1wZMU5S4VOtstsH\/JFx184\/Jl\/1As4xbpNXgO9MvmqV9jDjr5u1yVe9gJOM3+gV4CngM8DStMvXhJYY\/oxXiblm\/hC9wOuiJwROA3cFzHP\/1SHt1unoCXO8SH8pw5zSboRfezleDB8G3gKuzzC3tJ114EbgnchJczyDnAeeyTCvlPIMwXFAvh8UPpVpXmk7J3JMmuvnDUvAWeCTmeaX3u814FbG\/5D6\/+R6BrkMPJJpbmmrH5AhDsj7E+v9wIt464jyOgWsABs5Js99S8engJeBQ5kfR\/P0b+Aow7dYWeS+m3cNuC\/zY2i+vkXGOGCa2zheAS4CX57gsTQf32eCd0unus\/pJYxEcb4H\/Lj0InK4F7hAzI1pjvmN88BX6dzNwO8of9iOtsZvgY8xIysMoWxQ\/vAddY4NhmtkhUJq+Jd7HwXuYTiEzwIfAT5Enf9eXvlcZriX6k2G29afB35\/9b8lSZIkSZIkSZIkSZIkSZIkSZIkSZIkSarOfwF9Ro6u5v17zAAAAABJRU5ErkJggg==\" alt=\"Opens in a new window\"><\/a> corrupti <a href=\"#\">laborum <img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAB7ZJREFUeJzt3U+MXVUdwPFvO2CndWHTQEL8Q4wmglEsdKPGzZAoIWGnrNSFQf4sSIwr3YgLt8YY\/ojTonHt0mjUQgChYSvRBmmnhLDBBSHaEqPtQKcubseQsXNm5t3fuefP\/X6SsyBhzjvn9H775r25nQeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJNXr48DDwK+BV4B\/ApeBK42OdWANWAVujzumbI4xrHUNuET589vL+d6R4Tyq8RXgJOUPPPc4DhwMOrNIB4FfUP58xowN4ASwHHw2RX0CeJryhzvleIG6IjkIvEj5c4k83y4i+TrwL8ofaImxGnB+UVp\/5rjWOB56QhPbB\/yQ8odYetTwmuQOyp9DjrFBHee7kEcof4A1jCfHHmSAVcqfQ67x88Bzmsw3KX9wtYwzI88ywhrlzyHXOBt4TsDwrU9Onwb+TCcvoAKsAwcKr+ES8IHCa8gl\/Hz3R062xRLwK4xD0wkPP2cg3wA+n3H+Fr1eegHAG6UX0JJcgVwH\/CjT3C17tvQCgOdKL0BwL+VfsNU4PjfmUIMcZXhLtPRZ5Bqhcj2DPJBp3pY9Cfy19CKAvzDcnqFCjgDvUv5vkprG89T1ZsUy8CfKn0v1zyA5fI3yh1TT+Bl1xbFpmeGHhr19u1W9n1D+kEqOS8CrwBPU8ZpjJ0cZIj5DG7e7Nx9I1J26jwG3kPetaOVzE8NfFAayxWuM3+S3J1+1IpWKo4lALjBug7+ZfskKVDKOJgJ5j3EbvHv6JStI6TiaCGTsBg9Pv2QFqCGOWQSS+w5jxasljlkEorbUFEcT10\/3G9T\/1BZHE9dP9xsUUGccTVw\/3W9Q1cbRxPXT\/QZnruY4mrh+ut\/gjNUeRxPXT\/cbnKkp4jgbMEf1ut\/gDE0Vx4cD5qle9xucmSnjIGCu6nW\/wRmZOg4C5qte9xuciRJxEDBn9brf4AyUioOAeavX\/QY7VzIOAuauXvcb7FjpOAiYv3rdb7BTNcRBwGNUr\/sNdqiWOAh4nOp1v8HO1BQHAY9Vve432JHa4iDg8arX\/QY7UWMcBDxm9brfYAdqjYOAx61e9xtsXM1xEPDY1et+gw2rPQ4CHr963W+wUS3EQcAaqtf9BhvUShwErKN63W+wMS3FQcBaqtf9BhvSWhwErKd63W+wES3GAeM+xOdi8FqyMJDyWo0Dxv3ihr9FL8ZPb+rPTQwfGnprxsdYA+4E\/p5h7jGf417D59DvyGeQclp+5ti06Oe4bwC3ZVxXGAMpo4c4Nq0usLYnJlhXCAOZXk9xwN4\/x\/054MBEaxvNQKbVWxybdvM57hsMzxzNxAEGMqVe43i\/zc9xf5XhbdyLDO9WPU4jrzm2MpBpzCGOLhlIfsbRMAPJyzgaZyD5GEcHDCQP4+iEgcQzjo4YSCzj6IyBxDGODhlIDOPolIGMZxwdM5BxjKNzBrI445gBA1mMccyEgeydccyIgeyNccyMgeyeccyQgeyOccyUgezMOGbMQNJuxDhmzUC2tx84hXHMmoFs70GMY\/YMZHtrGMfsGci13YZxNMdfXj2dY5nmzfmLpGfPQKZzJMOcxpGZgUznP8HzGUejfA1ybSv4mkMYyHaWgQsYx+wZyPZ+inHMnoFs7wbgLYxj1gwkbYXhV\/gbx0wZyM7uZPfPJKcYbnBUJwxkd24AHgXe4drncA54AFgqtcBKHAOOM5zH+tWxxvDpU7fnfvB9GeYce5HnWFPNloEvALcAHwTeBl4GTpdcVAUOMXyK1H07\/H8ngO8S\/3OmbHwG0ViH2Ns\/C3gBOFhkpQswEI31S\/Z+3awWWekCDERjHGPxayf8NYn3Yqk2D4342gfDVpGRzyAa4xyLXztnohfju1iqzTpw\/YivPRC4FgNRdaq6fnwNIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIl1BjIvtILUDHV\/dnXGMjh0gtQMUdKL2CrHIFcHvn1XwpZhVr0xZFf\/17IKjI7D1wZMU5S4VOtstsH\/JFx184\/Jl\/1As4xbpNXgO9MvmqV9jDjr5u1yVe9gJOM3+gV4CngM8DStMvXhJYY\/oxXiblm\/hC9wOuiJwROA3cFzHP\/1SHt1unoCXO8SH8pw5zSboRfezleDB8G3gKuzzC3tJ114EbgnchJczyDnAeeyTCvlPIMwXFAvh8UPpVpXmk7J3JMmuvnDUvAWeCTmeaX3u814FbG\/5D6\/+R6BrkMPJJpbmmrH5AhDsj7E+v9wIt464jyOgWsABs5Js99S8engJeBQ5kfR\/P0b+Aow7dYWeS+m3cNuC\/zY2i+vkXGOGCa2zheAS4CX57gsTQf32eCd0unus\/pJYxEcb4H\/Lj0InK4F7hAzI1pjvmN88BX6dzNwO8of9iOtsZvgY8xIysMoWxQ\/vAddY4NhmtkhUJq+Jd7HwXuYTiEzwIfAT5Enf9eXvlcZriX6k2G29afB35\/9b8lSZIkSZIkSZIkSZIkSZIkSZIkSZIkSarOfwF9Ro6u5v17zAAAAABJRU5ErkJggg==\" alt=\"Opens in a new window\"><\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p><a href=\"#\">Is all of this a link? <img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAB7ZJREFUeJzt3U+MXVUdwPFvO2CndWHTQEL8Q4wmglEsdKPGzZAoIWGnrNSFQf4sSIwr3YgLt8YY\/ojTonHt0mjUQgChYSvRBmmnhLDBBSHaEqPtQKcubseQsXNm5t3fuefP\/X6SsyBhzjvn9H775r25nQeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJNXr48DDwK+BV4B\/ApeBK42OdWANWAVujzumbI4xrHUNuET589vL+d6R4Tyq8RXgJOUPPPc4DhwMOrNIB4FfUP58xowN4ASwHHw2RX0CeJryhzvleIG6IjkIvEj5c4k83y4i+TrwL8ofaImxGnB+UVp\/5rjWOB56QhPbB\/yQ8odYetTwmuQOyp9DjrFBHee7kEcof4A1jCfHHmSAVcqfQ67x88Bzmsw3KX9wtYwzI88ywhrlzyHXOBt4TsDwrU9Onwb+TCcvoAKsAwcKr+ES8IHCa8gl\/Hz3R062xRLwK4xD0wkPP2cg3wA+n3H+Fr1eegHAG6UX0JJcgVwH\/CjT3C17tvQCgOdKL0BwL+VfsNU4PjfmUIMcZXhLtPRZ5Bqhcj2DPJBp3pY9Cfy19CKAvzDcnqFCjgDvUv5vkprG89T1ZsUy8CfKn0v1zyA5fI3yh1TT+Bl1xbFpmeGHhr19u1W9n1D+kEqOS8CrwBPU8ZpjJ0cZIj5DG7e7Nx9I1J26jwG3kPetaOVzE8NfFAayxWuM3+S3J1+1IpWKo4lALjBug7+ZfskKVDKOJgJ5j3EbvHv6JStI6TiaCGTsBg9Pv2QFqCGOWQSS+w5jxasljlkEorbUFEcT10\/3G9T\/1BZHE9dP9xsUUGccTVw\/3W9Q1cbRxPXT\/QZnruY4mrh+ut\/gjNUeRxPXT\/cbnKkp4jgbMEf1ut\/gDE0Vx4cD5qle9xucmSnjIGCu6nW\/wRmZOg4C5qte9xuciRJxEDBn9brf4AyUioOAeavX\/QY7VzIOAuauXvcb7FjpOAiYv3rdb7BTNcRBwGNUr\/sNdqiWOAh4nOp1v8HO1BQHAY9Vve432JHa4iDg8arX\/QY7UWMcBDxm9brfYAdqjYOAx61e9xtsXM1xEPDY1et+gw2rPQ4CHr963W+wUS3EQcAaqtf9BhvUShwErKN63W+wMS3FQcBaqtf9BhvSWhwErKd63W+wES3GAeM+xOdi8FqyMJDyWo0Dxv3ihr9FL8ZPb+rPTQwfGnprxsdYA+4E\/p5h7jGf417D59DvyGeQclp+5ti06Oe4bwC3ZVxXGAMpo4c4Nq0usLYnJlhXCAOZXk9xwN4\/x\/054MBEaxvNQKbVWxybdvM57hsMzxzNxAEGMqVe43i\/zc9xf5XhbdyLDO9WPU4jrzm2MpBpzCGOLhlIfsbRMAPJyzgaZyD5GEcHDCQP4+iEgcQzjo4YSCzj6IyBxDGODhlIDOPolIGMZxwdM5BxjKNzBrI445gBA1mMccyEgeydccyIgeyNccyMgeyeccyQgeyOccyUgezMOGbMQNJuxDhmzUC2tx84hXHMmoFs70GMY\/YMZHtrGMfsGci13YZxNMdfXj2dY5nmzfmLpGfPQKZzJMOcxpGZgUznP8HzGUejfA1ybSv4mkMYyHaWgQsYx+wZyPZ+inHMnoFs7wbgLYxj1gwkbYXhV\/gbx0wZyM7uZPfPJKcYbnBUJwxkd24AHgXe4drncA54AFgqtcBKHAOOM5zH+tWxxvDpU7fnfvB9GeYce5HnWFPNloEvALcAHwTeBl4GTpdcVAUOMXyK1H07\/H8ngO8S\/3OmbHwG0ViH2Ns\/C3gBOFhkpQswEI31S\/Z+3awWWekCDERjHGPxayf8NYn3Yqk2D4342gfDVpGRzyAa4xyLXztnohfju1iqzTpw\/YivPRC4FgNRdaq6fnwNIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIl1BjIvtILUDHV\/dnXGMjh0gtQMUdKL2CrHIFcHvn1XwpZhVr0xZFf\/17IKjI7D1wZMU5S4VOtstsH\/JFx184\/Jl\/1As4xbpNXgO9MvmqV9jDjr5u1yVe9gJOM3+gV4CngM8DStMvXhJYY\/oxXiblm\/hC9wOuiJwROA3cFzHP\/1SHt1unoCXO8SH8pw5zSboRfezleDB8G3gKuzzC3tJ114EbgnchJczyDnAeeyTCvlPIMwXFAvh8UPpVpXmk7J3JMmuvnDUvAWeCTmeaX3u814FbG\/5D6\/+R6BrkMPJJpbmmrH5AhDsj7E+v9wIt464jyOgWsABs5Js99S8engJeBQ5kfR\/P0b+Aow7dYWeS+m3cNuC\/zY2i+vkXGOGCa2zheAS4CX57gsTQf32eCd0unus\/pJYxEcb4H\/Lj0InK4F7hAzI1pjvmN88BX6dzNwO8of9iOtsZvgY8xIysMoWxQ\/vAddY4NhmtkhUJq+Jd7HwXuYTiEzwIfAT5Enf9eXvlcZriX6k2G29afB35\/9b8lSZIkSZIkSZIkSZIkSZIkSZIkSZIkSarOfwF9Ro6u5v17zAAAAABJRU5ErkJggg==\" alt=\"Opens in a new window\"><\/a><\/p>\n<p>Or maybe it\u2019s just the final word in this sentence that is a <a href=\"#\">link <img decoding=\"async\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAB7ZJREFUeJzt3U+MXVUdwPFvO2CndWHTQEL8Q4wmglEsdKPGzZAoIWGnrNSFQf4sSIwr3YgLt8YY\/ojTonHt0mjUQgChYSvRBmmnhLDBBSHaEqPtQKcubseQsXNm5t3fuefP\/X6SsyBhzjvn9H775r25nQeSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJNXr48DDwK+BV4B\/ApeBK42OdWANWAVujzumbI4xrHUNuET589vL+d6R4Tyq8RXgJOUPPPc4DhwMOrNIB4FfUP58xowN4ASwHHw2RX0CeJryhzvleIG6IjkIvEj5c4k83y4i+TrwL8ofaImxGnB+UVp\/5rjWOB56QhPbB\/yQ8odYetTwmuQOyp9DjrFBHee7kEcof4A1jCfHHmSAVcqfQ67x88Bzmsw3KX9wtYwzI88ywhrlzyHXOBt4TsDwrU9Onwb+TCcvoAKsAwcKr+ES8IHCa8gl\/Hz3R062xRLwK4xD0wkPP2cg3wA+n3H+Fr1eegHAG6UX0JJcgVwH\/CjT3C17tvQCgOdKL0BwL+VfsNU4PjfmUIMcZXhLtPRZ5Bqhcj2DPJBp3pY9Cfy19CKAvzDcnqFCjgDvUv5vkprG89T1ZsUy8CfKn0v1zyA5fI3yh1TT+Bl1xbFpmeGHhr19u1W9n1D+kEqOS8CrwBPU8ZpjJ0cZIj5DG7e7Nx9I1J26jwG3kPetaOVzE8NfFAayxWuM3+S3J1+1IpWKo4lALjBug7+ZfskKVDKOJgJ5j3EbvHv6JStI6TiaCGTsBg9Pv2QFqCGOWQSS+w5jxasljlkEorbUFEcT10\/3G9T\/1BZHE9dP9xsUUGccTVw\/3W9Q1cbRxPXT\/QZnruY4mrh+ut\/gjNUeRxPXT\/cbnKkp4jgbMEf1ut\/gDE0Vx4cD5qle9xucmSnjIGCu6nW\/wRmZOg4C5qte9xuciRJxEDBn9brf4AyUioOAeavX\/QY7VzIOAuauXvcb7FjpOAiYv3rdb7BTNcRBwGNUr\/sNdqiWOAh4nOp1v8HO1BQHAY9Vve432JHa4iDg8arX\/QY7UWMcBDxm9brfYAdqjYOAx61e9xtsXM1xEPDY1et+gw2rPQ4CHr963W+wUS3EQcAaqtf9BhvUShwErKN63W+wMS3FQcBaqtf9BhvSWhwErKd63W+wES3GAeM+xOdi8FqyMJDyWo0Dxv3ihr9FL8ZPb+rPTQwfGnprxsdYA+4E\/p5h7jGf417D59DvyGeQclp+5ti06Oe4bwC3ZVxXGAMpo4c4Nq0usLYnJlhXCAOZXk9xwN4\/x\/054MBEaxvNQKbVWxybdvM57hsMzxzNxAEGMqVe43i\/zc9xf5XhbdyLDO9WPU4jrzm2MpBpzCGOLhlIfsbRMAPJyzgaZyD5GEcHDCQP4+iEgcQzjo4YSCzj6IyBxDGODhlIDOPolIGMZxwdM5BxjKNzBrI445gBA1mMccyEgeydccyIgeyNccyMgeyeccyQgeyOccyUgezMOGbMQNJuxDhmzUC2tx84hXHMmoFs70GMY\/YMZHtrGMfsGci13YZxNMdfXj2dY5nmzfmLpGfPQKZzJMOcxpGZgUznP8HzGUejfA1ybSv4mkMYyHaWgQsYx+wZyPZ+inHMnoFs7wbgLYxj1gwkbYXhV\/gbx0wZyM7uZPfPJKcYbnBUJwxkd24AHgXe4drncA54AFgqtcBKHAOOM5zH+tWxxvDpU7fnfvB9GeYce5HnWFPNloEvALcAHwTeBl4GTpdcVAUOMXyK1H07\/H8ngO8S\/3OmbHwG0ViH2Ns\/C3gBOFhkpQswEI31S\/Z+3awWWekCDERjHGPxayf8NYn3Yqk2D4342gfDVpGRzyAa4xyLXztnohfju1iqzTpw\/YivPRC4FgNRdaq6fnwNIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIlGIiUYCBSgoFICQYiJRiIlGAgUoKBSAkGIiUYiJRgIFKCgUgJBiIl1BjIvtILUDHV\/dnXGMjh0gtQMUdKL2CrHIFcHvn1XwpZhVr0xZFf\/17IKjI7D1wZMU5S4VOtstsH\/JFx184\/Jl\/1As4xbpNXgO9MvmqV9jDjr5u1yVe9gJOM3+gV4CngM8DStMvXhJYY\/oxXiblm\/hC9wOuiJwROA3cFzHP\/1SHt1unoCXO8SH8pw5zSboRfezleDB8G3gKuzzC3tJ114EbgnchJczyDnAeeyTCvlPIMwXFAvh8UPpVpXmk7J3JMmuvnDUvAWeCTmeaX3u814FbG\/5D6\/+R6BrkMPJJpbmmrH5AhDsj7E+v9wIt464jyOgWsABs5Js99S8engJeBQ5kfR\/P0b+Aow7dYWeS+m3cNuC\/zY2i+vkXGOGCa2zheAS4CX57gsTQf32eCd0unus\/pJYxEcb4H\/Lj0InK4F7hAzI1pjvmN88BX6dzNwO8of9iOtsZvgY8xIysMoWxQ\/vAddY4NhmtkhUJq+Jd7HwXuYTiEzwIfAT5Enf9eXvlcZriX6k2G29afB35\/9b8lSZIkSZIkSZIkSZIkSZIkSZIkSZIkSarOfwF9Ro6u5v17zAAAAABJRU5ErkJggg==\" alt=\"Opens in a new window\"><\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>While there is no underline present, there is another difference in the links that makes them stand out from the body text: every link has an arrow after it indicating that it goes somewhere (a new tab\/window, specifically).<\/li>\n<li>Of course, underlining would help to reinforce this.<\/li>\n<li>If some links opened in a new window and some did not\u2014and hence did not have icons\u2014then those without would fail 1.4.1.<\/li>\n<li>Also note that while the new window icon provides a visual clue about the link, it only shows where the link <em>ends<\/em>; it may be difficult to perceive the start of any given link.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading6\" data-landmark-index=\"12\">\n<h2 id=\"sectionHeading6\" tabindex=\"-1\">Test 6: Give Us a Clue<\/h2>\n<p>Nobody does this, though, do they? Alas, they do. Seen it with my own eyes. Of course, it took me a while to work out precisely <em>what<\/em> I was seeing. What do <em>you<\/em> see? Do you see a pass or a fail of 1.4.1?<\/p>\n<div id=\"test6\" class=\"test\">\n<p>Lorem ipsum dolor sit <a class=\"samecolor\" href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a class=\"samecolor\" href=\"#\">laboriosam<\/a> corrupti <a class=\"samecolor\" href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a class=\"samecolor\" href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.<\/p>\n<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>Well, this one\u2019s a doozy. Technically speaking, there is no change of colour here to indicate that this is a link, because the links are the exact same colour.<\/li>\n<li>While this is not a 1.4.1 failure, it is <em>absolutely awful for <strong>everyone<\/strong><\/em>.<\/li>\n<li>But it can\u2019t be pinned on use of colour and there is not really another SC that this can be pinned on, so unfortunately we are left with Best Practice for this, with the strongest possible condemnation and highest possible severity rating! (And also, probably, some expletives.).<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading7\" data-landmark-index=\"13\">\n<h2 id=\"sectionHeading7\" tabindex=\"-1\">Test 7: Cool, 2 Actions<\/h2>\n<p>Because it has call-to-actions. And there are 2 actions and \u2026 OK, move along, I promise you this is as bad as it gets, headings-wise (can\u2019t say the same for the actual tests, mind).<\/p>\n<div id=\"test7\" class=\"test\">\n<p>Quis voluptatem, accusantium maxime delectus ut quisquam laudantium hic iste? Natus fuga ipsum velit at consectetur, vitae, non accusamus architecto corrupti quo dolores. Sapiente tenetur cum nisi molestiae quod iste.<\/p>\n<ul class=\"cta\">\n<li><a href=\"#\">Read more<\/a><\/li>\n<li><a href=\"#\">Apply now<\/a><\/li>\n<\/ul>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>Well, it\u2019s a classic \u201cit depends\u201d but with this bare bones example, it\u2019s a pass.<\/li>\n<li>It depends on other content and layout nearby. But here, it\u2019s a (small) list of links after a block of text.<\/li>\n<li>The position and layout means that the links are not confused as being part of a sentence (as they might in Test 1).<\/li>\n<li>The shortness of the links (as shown here) also help reinforce this.<\/li>\n<li>Clearly the link phrases\u2014imperative call-to-actions\u2014make this much more obvious that these are links.<\/li>\n<li>Underlines would sure help here, but the position and language means that it is not just the change of colour at play here.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading8\" data-landmark-index=\"14\">\n<h2 id=\"sectionHeading8\" tabindex=\"-1\">Test 8: Such a Card<\/h2>\n<p>You know the deal: some blurb, some actions in something that has some card\/panel\/tile-like styling. How do these links fare?<\/p>\n<div id=\"test8\" class=\"test\">\n<div class=\"panel\">\n<p>Natus earum, error eligendi ab tempore dicta minus officiis fuga deleniti in a possimus sit voluptates, labore atque quam pariatur quasi velit.<\/p>\n<div><a href=\"#\">Apply now<\/a><\/div>\n<div><a href=\"#\">Read more<\/a><\/div>\n<\/p>\n<\/div>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>The design\/layout of the call-to-action links makes it pretty clear that these do something different to the text above, even as gloriously unstyled as they are.<\/li>\n<li>Colour is not the only thing that indicates these are links, position\/layout does this.<\/li>\n<li>As with Test 7, the imperative language of the call-to-action also makes it clear this is something to be interacted with.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading9\" data-landmark-index=\"15\">\n<h2 id=\"sectionHeading9\" tabindex=\"-1\">Test 9: Links. Lots of Links<\/h2>\n<p>As seen on web site footers everywhere.<\/p>\n<div id=\"test9\" class=\"test\">\n<div class=\"responsive container\">\n<div class=\"row\">\n<div class=\"column col-4 column1\">\n<h3>Thing<\/h3>\n<ul>\n<li><a href=\"#\">Lorem<\/a><\/li>\n<li><a href=\"#\">Ipsum<\/a><\/li>\n<li><a href=\"#\">Dolor<\/a><\/li>\n<li><a href=\"#\">Sit<\/a><\/li>\n<li><a href=\"#\">Amet<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>Another Thing<\/h3>\n<ul>\n<li>\n<a href=\"#\">Consectetur<\/a>\n<\/li>\n<li>\n<a href=\"#\">Adipisicing<\/a>\n<\/li>\n<li>\n<a href=\"#\">Elit<\/a>\n<\/li>\n<li>\n<a href=\"#\">Distinctio<\/a>\n<\/li>\n<li>\n<a href=\"#\">Ut<\/a>\n<\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>This Thing<\/h3>\n<ul>\n<li><a href=\"#\">Debitis<\/a><\/li>\n<li><a href=\"#\">Sapiente<\/a><\/li>\n<li><a href=\"#\">Labore<\/a><\/li>\n<li><a href=\"#\">Laudantium<\/a><\/li>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>That Thing<\/h3>\n<ul>\n<li><a href=\"#\">Commodi<\/a><\/li>\n<li><a href=\"#\">Dignissimos<\/a><\/li>\n<li><a href=\"#\">Expedita<\/a><\/li>\n<li><a href=\"#\">Laborum<\/a><\/li>\n<li><a href=\"#\">Iure<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>All of the text in the lists are styled the same.<\/li>\n<li>The layout (and in the real world with suitable link phrases, not Latin gibberish) suggests that these are links.<\/li>\n<li>This is typical of the what you might find in a site footer or an FAQ page. While there are no underlines present, the context tells you that these are links.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading10\" data-landmark-index=\"16\">\n<h2 id=\"sectionHeading10\" tabindex=\"-1\">Test 10: More of the Same. Almost<\/h2>\n<p>It\u2019s rehash (with a twist) time. How did you answer for test 9? Is your answer the same here?<\/p>\n<div id=\"test10\" class=\"test\">\n<div class=\"responsive container\">\n<div class=\"row\">\n<div class=\"column col-4 column1\">\n<h3>Thing<\/h3>\n<ul>\n<li><a href=\"#\">Lorem<\/a><\/li>\n<li><a href=\"#\">Ipsum<\/a><\/li>\n<li><a href=\"#\">Dolor<\/a><\/li>\n<li><a href=\"#\">Sit<\/a><\/li>\n<li><a href=\"#\">Amet<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>Another Thing<\/h3>\n<ul>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<li><a href=\"#\">Adipisicing<\/a><\/li>\n<li><a href=\"#\">Elit<\/a><\/li>\n<li><a href=\"#\">Distinctio<\/a><\/li>\n<li><a href=\"#\">Ut<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>This Thing<\/h3>\n<ul>\n<li>Debitis<\/li>\n<li>Sapiente<\/li>\n<li>Labore<\/li>\n<li>Laudantium<\/li>\n<li>Consectetur<\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>That Thing<\/h3>\n<ul>\n<li>Commodi<\/li>\n<li>Dignissimos<\/li>\n<li>Expedita<\/li>\n<li>Laborum<\/li>\n<li>Iure<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>Wait, what? This is the same as the example in Test 9, right? Nope!.<\/li>\n<li>Half of the lists are links, half are not.<\/li>\n<li>It may not be possible to differentiate by colour, and the layout of each group of links is identical. Yet some are links, some are not.<\/li>\n<li>The only differentiator here is colour, hence it fails 1.4.1.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading11\" data-landmark-index=\"17\">\n<h2 id=\"sectionHeading11\" tabindex=\"-1\">Test 11: Expect the UnUXpected<\/h2>\n<p>Because nothing says \u201cI\u2019m a smart designer\u201d more than throwing out decades-old conventions because you feel like it. Like I did when creating this monster (and yes, I HAVE seen this in the wild too):<\/p>\n<div id=\"test11\" class=\"test\">\n<div class=\"responsive container underlinedheadings\">\n<div class=\"row\">\n<div class=\"column col-4 column1\">\n<h3>Thing<\/h3>\n<ul>\n<li><a href=\"#\">Lorem<\/a><\/li>\n<li><a href=\"#\">Ipsum<\/a><\/li>\n<li><a href=\"#\">Dolor<\/a><\/li>\n<li><a href=\"#\">Sit<\/a><\/li>\n<li><a href=\"#\">Amet<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>Another Thing<\/h3>\n<ul>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<li><a href=\"#\">Adipisicing<\/a><\/li>\n<li><a href=\"#\">Elit<\/a><\/li>\n<li><a href=\"#\">Distinctio<\/a><\/li>\n<li><a href=\"#\">Ut<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>This Thing<\/h3>\n<ul>\n<li><a href=\"#\">Debitis<\/a><\/li>\n<li><a href=\"#\">Sapiente<\/a><\/li>\n<li><a href=\"#\">Labore<\/a><\/li>\n<li><a href=\"#\">Laudantium<\/a><\/li>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>That Thing<\/h3>\n<ul>\n<li><a href=\"#\">Commodi<\/a><\/li>\n<li><a href=\"#\">Dignissimos<\/a><\/li>\n<li><a href=\"#\">Expedita<\/a><\/li>\n<li><a href=\"#\">Laborum<\/a><\/li>\n<li><a href=\"#\">Iure<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>So let\u2019s get this straight \u2026 the links are not underlined but the headings are? People actually do this? (spoiler alert: they do).<\/li>\n<li>As with Test 9, the layout\/position (and content, in the real world) of this suggests these are links.<\/li>\n<li>The underlined heading is an extra \u2018screw you\u2019 to everyone, but it does not mean any of this fails 1.4.1.<\/li>\n<li>It is just bad, BAD UX and should be flagged as a best practice with suitably phrased angry words.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading12\" data-landmark-index=\"18\">\n<h2 id=\"sectionHeading12\" tabindex=\"-1\">Test 12: You Said You Wanted Underlines<\/h2>\n<p>Underline all the things! What\u2019s the worst that could happen?<\/p>\n<div id=\"test12\" class=\"test test12\">\n<div class=\"responsive container underlinedheadings underlinedlinks\">\n<div class=\"row\">\n<div class=\"column col-4 column1\">\n<h3>Thing<\/h3>\n<ul>\n<li><a href=\"#\">Lorem<\/a><\/li>\n<li><a href=\"#\">Ipsum<\/a><\/li>\n<li><a href=\"#\">Dolor<\/a><\/li>\n<li><a href=\"#\">Sit<\/a><\/li>\n<li><a href=\"#\">Amet<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>Another Thing<\/h3>\n<ul>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<li><a href=\"#\">Adipisicing<\/a><\/li>\n<li><a href=\"#\">Elit<\/a><\/li>\n<li><a href=\"#\">Distinctio<\/a><\/li>\n<li><a href=\"#\">Ut<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>This Thing<\/h3>\n<ul>\n<li><a href=\"#\">Debitis<\/a><\/li>\n<li><a href=\"#\">Sapiente<\/a><\/li>\n<li><a href=\"#\">Labore<\/a><\/li>\n<li><a href=\"#\">Laudantium<\/a><\/li>\n<li><a href=\"#\">Consectetur<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"column col-4 column1\">\n<h3>That Thing<\/h3>\n<ul>\n<li><a href=\"#\">Commodi<\/a><\/li>\n<li><a href=\"#\">Dignissimos<\/a><\/li>\n<li><a href=\"#\">Expedita<\/a><\/li>\n<li><a href=\"#\">Laborum<\/a><\/li>\n<li><a href=\"#\">Iure<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>If everything is underlined like it is here then they all look like links. Except they are not: each block has a heading (underlined) and links (underlined).<\/li>\n<li>The difference is the link colour alone (the fact that the heading has some space between it and the following links doesn\u2019t clearly indicate that the heading is not a link).<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading13\" data-landmark-index=\"19\">\n<h2 id=\"sectionHeading13\" tabindex=\"-1\">Test 13: Ooh, Look at Me<\/h2>\n<p>Similar to the previous card example, but with some subtle differences. Would you pass or fail this for 1.4.1? Note that we\u2019re interested in everything in the rounded corner box and its relationship with the text above and below.<\/p>\n<div id=\"test13\" class=\"test\">\n<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum vero sunt minus corporis nostrum tenetur quisquam deserunt dolorem voluptate a cupiditate officia vel est, maxime, possimus recusandae quo explicabo nulla!<\/p>\n<p><a href=\"#\"><\/p>\n<div class=\"panel\">\n<p>Natus earum, error eligendi ab tempore dicta minus officiis fuga deleniti in a possimus sit voluptates, labore atque quam pariatur quasi velit.<\/p>\n<div class=\"cta\">Apply now<\/div>\n<\/div>\n<p>Saepe neque repellendus alias ex earum eaque obcaecati quis corrupti error. Sed dolorem a, illo, explicabo facilis blanditiis dolor quas vel molestiae, corporis, iusto. Odit veritatis ex quaerat, cum. Unde?<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>Once again, the position\/layout and the imperative language of the call-to-action make it clear that this is a link (or something interactive, at least) .<\/li>\n<li>\nIn this example, all of the card content is a link (the <code>&lt;a&gt;<\/code> element wraps around it all, but only the CTA part has a hover effect).\n<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading14\" class=\"justUnder3to1\" data-landmark-index=\"20\">\n<h2 id=\"sectionHeading14\" tabindex=\"-1\">Test 14: The \u201cIsn\u2019t This the Same as Test 1?\u201d Test<\/h2>\n<p>Well, yes it is, but it\u2019s ever so slightly different but just for the purposes of creating a follow-up point.<\/p>\n<div id=\"test14\" class=\"test\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam<\/a> corrupti <a href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.<\/p>\n<\/p>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>The blue link text has no underline or any other distinguishable difference to adjacent body text. Only colour differentiates it.<\/li>\n<li>It\u2019s the same as Test 1 (so I hope that you answered the same for this) but I have a boring fact to give you about it.<\/li>\n<li>The contrast between the blue text and the adjacent black text of the paragraph is 2.97:1. That might be a boring fact, but we\u2019re leading somewhere with this \u2026<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading15\" class=\"justOver3to1\" data-landmark-index=\"21\">\n<h2 id=\"sectionHeading15\" tabindex=\"-1\">Test 15: The \u201cCome on, You\u2019re Just Repeating Things Now\u201d Test<\/h2>\n<p>Well, not quite. There\u2019s a VERY subtle difference here. The question is: do you know what it is and does it give you a pass or a fail?<\/p>\n<div id=\"test15\" class=\"test\">\n<p>Lorem ipsum dolor sit <a href=\"#\">amet consectetur adipisicing elit<\/a>. Blanditiis quae expedita quos molestiae ex praesentium <a href=\"#\">laboriosam<\/a> corrupti <a href=\"#\">laborum<\/a> illo minima aspernatur eaque, cumque ab autem. Eos maiores, iste omnis odit.<\/p>\n<p>Aperiam assumenda deleniti dolore accusamus suscipit, <a href=\"#\">consequatur<\/a> corporis reprehenderit qui perspiciatis ad vel ducimus numquam quia soluta odio temporibus eveniet nemo dolores at labore quod officiis? Harum quaerat reprehenderit modi.<\/p>\n<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails. No, wait \u2026 \u2705 Passes<\/div>\n<ul>\n<li>The blue link text has no underline or any other distinguishable difference to adjacent body text. Only colour differentiates it.<\/li>\n<li>So it\u2019s almost identical to test 14 (and Test 1, naturally) and yet \u2026 something is different.<\/li>\n<li>The contrast between this slightly lighter shade of blue text and the adjacent black text of the paragraph is 3.06:1. At this point some might say \u201cIt passes then, because it\u2019s above 3:1 ratio with adjacent text!\u201d. <del>But hold your horses.<\/del>.<\/li>\n<li>There is a technique: <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/general\/G183\">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where colour alone is used to identify them<\/a>. <del>But this does not\/cannot get you off the hook. Why? Because this <strong>cannot be used on touch devices, so is not valid in any situation where the user may be using a touch device.<\/strong> So sure, this text contrast difference is over the 3:1 ratio, but with no guarantee that the content will never be accessed on a touch device, it is not valid to use this technique<\/del>.<\/li>\n<li>\n<del>You may express your ire now. Or gratitude. It\u2019s a difficult one to call.<\/del>.\n<\/li>\n<\/ul>\n<p>So, at the point of originally writing this post, Technique G183 did not get you off the hook here. But as it takes me an <em>age<\/em> to complete articles, in between when I wrote the post and published it, the goalposts had moved. And they had moved in favor of this now being a pass (regardless of what was noted above re touch screens). This was originally indicated as \u2018fails (and for very specific and questionable reasons)\u2019. But now it is a \u2018passes (for the same very specific and questionable reasons)\u2019.<\/p>\n<p>As Patrick says in the comments below: <q>the note that clarifies that a contrast difference of 3:1 and over counts both as a difference in colour (hue) and lightness (a separate visual cue) is now part of the main understanding document for 1.4.1 \u2013 see https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/use-of-color.html. The extra underline stuff from technique G183 is not necessary, but rather best practice. So if there *is* a contrast difference of 3:1 or over, it counts as *not* colour alone. 15 is a pass.<\/q>\n<\/p>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading16\" data-landmark-index=\"22\">\n<h2 id=\"sectionHeading16\" tabindex=\"-1\">Test 16: One of These Things Is Not Like the Other<\/h2>\n<p>Quite a common technique that we see in navigational elements and such like\u2014the active\/current element has its colours inverted. Let\u2019s take this simple example, then. Would you pass this?<\/p>\n<div id=\"test16\" class=\"test\">\n<div class=\"row rectangular\"><button>Button<\/button> <button>Button<\/button> <button class=\"inverted noBorder\">Button<\/button> <button>Button<\/button><\/div>\n<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>In this example, the colour scheme (if you consider \u201cblack and white\u201d as a colour scheme) is the highest contrast possible, so inverting gives you a VERY obvious difference.<\/li>\n<li>Note that there is nothing normative in the reams of W3C documentation that says inverting is a valid technique, but our stance is that if the contrast is over 3:1 with the elements\u2019 text and background, then inverting is a suitable technique and we would pass it.<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading17\" data-landmark-index=\"23\">\n<h2 id=\"sectionHeading17\" tabindex=\"-1\">Test 17: What Becomes of the Faux Inverted?<\/h2>\n<p>Another example of something inverted (that isn\u2019t a straight up black and white answer, literally and figuratively). Pass or fail, what say you?<\/p>\n<div id=\"test17\" class=\"test\">\n<div class=\"softColouredButtons row rectangular\"><button>Button<\/button> <button>Button<\/button> <button class=\"inverted noBorder\">Button<\/button> <button>Button<\/button><\/div>\n<\/p>\n<\/div>\n<details class=\"p\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u2705 Passes<\/div>\n<ul>\n<li>Isn\u2019t this the same as the previous example? We inverted the colours, right? Not quite. That active button has different colour text, it\u2019s a darker colour than the other buttons\u2019 background, so it\u2019s not <em>really<\/em> inverted. It does, however, have a good contrast as a result (14.81:1 against its background, if you\u2019re interested, which would also mean the same contrast between the black text of the active button and the light green text of the inactive ones).<\/li>\n<li>The button background is inverted, giving a contrast between the inactive and active buttons of 2.8:1. While these two colours don\u2019t have great contrast, the higher contrast of the text means that the background colours are not really a factor here<\/li>\n<li>Note that while this does not fail 1.4.1, it does fail <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#non-text-contrast\" rel=\"noopener noreferrer\">SC 1.4.11 Non-text Contrast<\/a> because the difference between the gray and lightgreen buttons signifies whether the button is active, and where its boundaries are, but the contrast ratio between them is less than 3:1.<\/li>\n<li>Note also that the inactive buttons fail <a href=\"https:\/\/www.w3.org\/TR\/WCAG\/#contrast-minimum\" rel=\"noopener noreferrer\">SC 1.4.3 Contrast (Minimum)<\/a>\n<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<section aria-labelledby=\"sectionHeading18\" data-landmark-index=\"24\">\n<h2 id=\"sectionHeading18\" tabindex=\"-1\">Test 18: Risky Bisque-ness<\/h2>\n<p>Last one to look at. Well, I say \u201clook at\u201d, but really you\u2019ll need to do more than look at this one. As in: try out those buttons with your keyboard TAB key. Is it a pass or fail?<\/p>\n<div id=\"test18\" class=\"test\">\n<div class=\"poorFocusStyles row rectangular\"> <button>Button<\/button> <button>Button<\/button> <button>Button<\/button> <button>Button<\/button><\/div>\n<\/div>\n<details class=\"f\">\n<summary>Is this a failure of 1.4.1 Use of Color?<\/summary>\n<div>\u274c Fails<\/div>\n<ul>\n<li>When one of these buttons has focus, the colour changes from \u2018cornsilk\u2019 to \u2018bisque\u2019<\/li>\n<li>The colour contrast between these two wonderfully bland colours is an equally unremarkable 1.15:1 ratio<\/li>\n<li>The ONLY change here that indicates focus is the background colour change, but it fails because of the low contrast.<\/li>\n<li>Had the colour difference been more than 3:1 (for example going from \u2018<span class=\"cornsilk\">cornsilk<\/span>\u2018 to \u2018<span class=\"mediumpurple\">mediumpurple<\/span>\u2018), then it would have been a pass<\/li>\n<\/ul>\n<\/details>\n<\/section>\n<\/div>\n<h2>We\u2019re all done here\u2014how did you do?<\/h2>\n<p>Have you been keeping tabs on how many you got right\/wrong? Perhaps you think you got them all right but what we went for here was different? And if that\u2019s the case, we invite you to express your disagreements down there in the comments section. But whatever you do, try to keep the colourful language down; that is a Use of Color that will <strong>not pass<\/strong> (comment moderation).<\/p>\n<p><script>\nconst detailsDisclosures = document.querySelectorAll('details');\nArray.from(detailsDisclosures).forEach(detailsDisclosure => {\n const trigger = detailsDisclosure.querySelector('summary')\n trigger.addEventListener('click', e => {\n  console.log(\"clicked\");\n  if (!detailsDisclosure.getAttribute('data-hasopened')) {\n   let audio;\n   if (document.querySelector(\"[name=sfxChoice]:checked\").id === \"sfxYes\") {\n    if (detailsDisclosure.className===\"f\") {\n     console.log(\"f\");\n     audio = new Audio('https:\/\/a11y-tools.com\/SoundFX\/wrong.mp3');\n    } else {\n     console.log(\"not f\");\n     audio = new Audio('https:\/\/a11y-tools.com\/SoundFX\/correct.mp3');\n    }\n    audio.play();\n    detailsDisclosure.setAttribute('data-hasopened','true');\n   } else {\n    console.log(\"else\");\n   }\n  }\n });\n});\n<\/script><br \/>\n<script>\nfunction responsiveNavInit(){\n \/\/test2\n const exampleResponsiveMenuTrigger = document.querySelector(\".exampleResponsiveMenuTrigger\");\n const exampleResponsiveMenu = document.querySelector(\"#exampleResponsiveMenu\");\n const mediaQuery = window.matchMedia('(min-width: 768px)');\n function expandMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu){\n   exampleResponsiveMenuTrigger.setAttribute(\"aria-expanded\",\"true\");\n   exampleResponsiveMenu.removeAttribute(\"hidden\");\n }\n function collapseMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu){\n   exampleResponsiveMenuTrigger.setAttribute(\"aria-expanded\",\"false\");\n   exampleResponsiveMenu.setAttribute(\"hidden\",\"hidden\");\n }\n collapseMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu)\n exampleResponsiveMenuTrigger.addEventListener('click', e => {\n  if (exampleResponsiveMenuTrigger.getAttribute(\"aria-expanded\")===\"false\") {\n   expandMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu);\n  } else {\n   collapseMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu);\n  }\n });\n function checkMediaQuery(){\n  if (mediaQuery.matches) {\n    exampleResponsiveMenuTrigger.setAttribute(\"hidden\",\"hidden\");\n    expandMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu);\n  } else {\n    exampleResponsiveMenuTrigger.removeAttribute(\"hidden\");\n    collapseMobileMenu(exampleResponsiveMenuTrigger,exampleResponsiveMenu);\n  }\n }\n window.addEventListener('resize', checkMediaQuery);\n window.addEventListener('load', checkMediaQuery);\n}\nresponsiveNavInit();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>My colleagues and I argue about SC 1.4.1 Use of Color more than any other criterion, so I turned it into a game-show-style quiz. I throw a bunch of tricky, real-world-flavoured examples at you (links, buttons, form fields) and ask you to call &#8216;pass&#8217; or &#8216;fail&#8217;.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,11],"tags":[25],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-quiz","category-tpgi-backup","tag-1-4-1"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":10,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":434,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/posts\/124\/revisions\/434"}],"wp:attachment":[{"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a11y-tools.com\/blog\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}