<p>Published on <a href="https://blog.prototypr.io/google-search-glaring-usability-design-error-a6f6c1eda315?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Alan Bristow </p>
<h3>Google search glaring UI usability design error</h3>
<h4>AKA Cats versus cats</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uXPiWmuJwe4-UPNP8CwisQ.png">Pixellated word ‘Cats’ in two poorly contrasting colours with the word ‘versus’ between</p>
<p>The Google search page includes a <em>glaring</em> user interface (UI) usability design error.</p>
<p><strong>Aside:</strong> I am <em>stunned</em> Google UI designers have not addressed this yet — I cannot be the only one to have noted this…</p>
<h4>Low contrast when contrast is the only cue? #fail</h4>
<p><a href="https://www.google.ca/search?q=cats&amp;oq=cats">Search Google for cats</a> and you will get, er, a list of cat results.</p>
<p>Once you have torn yourself away from the latest cat-in-box images, take a look at the listings page.</p>
<p>The results you clicked are purple. Not blue.</p>
<p>That’s for a reason, to tell you that you have already clicked them. Yet Google have chosen a purple and blue that have a colour difference of 107, as measured by <a href="https://www.paciellogroup.com/resources/contrastanalyser/">the Colour Contrast Analyser app.</a></p>
<h4>107?</h4>
<p>A colour difference of 107 is <em>bad</em>. The Web Accessibility Initiative over at the veritable www.w3.org:</p>
<blockquote><p>… The W3C algorithm suggests to avoid brightness differences less than 125 and color differences less than 500. [<a href="https://www.w3.org/WAI/RD/2012/text-customization/r11">source</a>]</p></blockquote>
<p>Just to reiterate:</p>
<blockquote><p>… <strong>avoid</strong> … color differences <strong>less than 500</strong></p></blockquote>
<p>So Google’s colour difference of 107 is <strong>awful!</strong></p>
<h4>Google — please edit your CSS</h4>
<p>Google <em>just</em> needs to choose some colours that <em>reliably</em> convey the difference they are attempting to show, namely that a link was clicked already.</p>
<p>By choosing a colour difference that meets or exceeds the widely accepted limits, not only will they help everyone who uses Google for search (quite a lot of us), they will also help me find the next cat-in-a box. Or on a skateboard… COME ON GOOGLE!</p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fi.imgur.com%2FIuBd3Kc.mp4&amp;src_secure=1&amp;url=http%3A%2F%2Fi.imgur.com%2FIuBd3Kc.gif%3Fnoredirect&#038;image=http%3A%2F%2Fi.imgur.com%2FIuBd3Kc.gif%3Fnoredirect&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=video%2Fmp4&amp;schema=imgur" width="640" height="360" frameborder="0"><a href="https://medium.com/media/1da4529a7bc2dc4427fa38dd070c1353/href">https://medium.com/media/1da4529a7bc2dc4427fa38dd070c1353/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a6f6c1eda315" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/google-search-glaring-usability-design-error-a6f6c1eda315">Google search glaring usability design error</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Google search glaring usability design error

Google search glaring UI usability design error

AKA Cats versus cats

Top Stories