contrast of some text hurts my eyes

stevefaulkner commented 7 years ago

bug

contrast of some text hurts my eyes

- If the current behavior is a bug, please provide the steps to reproduce.

Check contrast of text on page: there are many tools to do this, The google chrome accessibility developer tool indicates the following content may have problematic contrast ratios: As always with auto testing tools, the results need to be verified

[Warning] Text elements should have a reasonable contrast ratio (57)

<a href="#main" class="skip-main">Skip to main content</a>
<em>Boooo-yah!</em>
<em>unfinished</em>
<a href="https://github.com/smashingmagazine/redesign/issues/new">Report a bug on GitHub</a>
<a href="mailto:fish@smashingmagazine.com?subject=Something is fishy!">via email</a>
<em>Also: beware of cats.</em>
<title>Clear Search</title>
<h4 class="header__topics__title">Browse All Topics</h4>
<a href="#the-almighty-smashing-magazine-s-redesign">The Almighty Smashing Magazine’s Redesign </a>
<a href="#why-such-a-big-change">Why Such A Big Change? </a>
<a href="#visual-overhaul-it-s-all-about-cats">Visual Overhaul: It’s All About Cats </a>
<a href="#up-for-the-next-part-of-our-journey">Up For The Next Part Of Our Journey? </a>
<a href="#articles-in-the-series">Articles in the series </a>
<a href="https://next.smashingmagazine.com">browse around</a>
<a href="https://next.smashingmagazine.com">next.smashingmagazine.com</a>
<a href="https://www.twitter.com/smashingmag">let us know</a>
<a href="https://twitter.com/danmall">Dan Mall</a>
<a href="https://twitter.com/SaraSoueidan">Sara Soueidan</a>
<a href="https://twitter.com/markodugonjic">Marko Dugonjić</a>
<a href="https://twitter.com/pukhalski">Ilya Pukhalski</a>
<a href="https://twitter.com/biilmann">Matt Biilman</a>
<a href="https://twitter.com/behindcadi">Ricardo Gimenes</a>
<a href="https://twitter.com/sarah_edo">Sara Drasner</a>
<a href="https://twitter.com/Malarkey">Andrew Clarke</a>
<a href="https://twitter.com/Netlify">Netlify</a>
<a href="https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/">JAMstack</a>
<a href="https://www.netlify.com">Netlify CDNs</a>
<a href="https://www.gocommerceapi.org/">GoCommerce</a>
<a href="http://netlifycms.org/">Git-Based CMS</a>
<a href="https://www.algolia.com/">Algolia</a>
<a href="https://github.com/GoogleChrome/sw-toolbox">Service Worker Toolbox</a>
<a href="http://gohugo.io/">Hugo</a>
<a href="https://github.com/netlify/victor-hugo">Victor Hugo boilerplate</a>
<a href="https://stripe.com/">Stripe</a>
<a href="https://www.algolia.com/">Algolia</a>
<a href="http://cloudinary.com/">Cloudinary</a>
<a href="https://github.com/netlify/gocommerce">GoCommerce</a>
<a href="https://www.gotrueapi.org/">GoTrue</a>
<a href="https://github.com/netlify/gotell">GoTell</a>
<a href="https://preactjs.com/">Preact</a>
<a href="https://next.smashingmagazine.com">browse around</a>
<a href="https://github.com/smashingmagazine/redesign/issues/new">report issues and bugs on GitHub</a>
<a href="https://www.smashingmagazine.com/2016/08/behind-the-scenes-what-it-takes-to-publish-a-smashing-article/">Behind The Scenes: What It Takes To Publish A Smashing Article</a>
<a href="#">Matt Biilmann</a>
<a href="#">Ørjan</a>
<span class="ladda-label">Submit Comment</span>
<h4 class="footer__topics__title" id="topics">Browse All Smashing Magazine Topics</h4>
<p>With a commitment to quality content for the design community.</p>
<p>…</p>
<span class="lining-figures">2006–2017</span>
<p>Made in Germany.</p>
<a href="#">Write for us</a>
<a href="/contact/">Contact us</a>
<a href="#">Datenschutzerklärung</a>
<a href="#">Impressum</a>
<title id="title">Back to top</title>

contrast ration of text to background should be at least 4.5:1 refer to WCAG 2.0 Contrast (Minimum) criteria https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Tested using Chrome latest on Windows 10

vitalyfriedman commented 7 years ago

We definitely have accessibility improvements on our to-do list, dear @stevefaulkner — actually actively considering an accessible mode as well for night view, for example. On it!

stevefaulkner commented 7 years ago

@vitalyfriedman i found a number of other issues, but it is unclear whether they are issues or artifacts of placeholder content. Ping me when you have some production content page examples and I will happily review them.

PS: checking the DOM (via bookmarklet) using the W3C Nu markup checker throws up some errors that may need fixing, including Heading-level outline (mis-nesting of h1-h6), for example:

<h2> How I Built The One Page Scroll Plugin
 <h3> [missing]
   <h4> Browse All Topics

<h3> About The Author
<h2> A Little Surprise Is Waiting For You Here — Meet The Next Smashing Magazine
 <h3> [missing]
  <h4> [missing]
   <h5> Quick Summary

vitalyfriedman commented 7 years ago

Will do, thanks @stevefaulkner!

vitalyfriedman commented 6 years ago

We've been working with Heydon to improve accessibility and implemented changes in terms of accessibility.

smashingmagazine / redesign

contrast of some text hurts my eyes #47