As someone with less than perfect vision, I've seen far too many websites embrace the "greyness" in design, employing far too light shades of grey to display their main content.
This is especially evident if using an older monitor with a TN panel. While IPS monitors have become affordable in the last 2-3 years, there was a period of time when they carried a hefty premium, so most consumers are still probably stuck with at least 1 TN panel in their home.
I cannot describe a user experience of reading a low contrast web page on a TN panel as anything but horrible and have had to manually override CSS rules to be able to process the content.
Most designers work exclusively on Macs and they are not even aware of the issue.
In particular, very thin fonts look well on Macs while they look like absolute garbage under Windows (to the point where some serifs are plainly not displayed so you can't recognize the letters).
I also think that certain "gray on gray" combinations on average have higher contrast on Mac displays than on non-Macs.
It has always been my deep understanding that the artist is trying to communicate within a constrained space. Without knowing the bounds of this space an artist is truly lost. By constraining, however, the artist is able to focus, form and foster a microcosmos.
The modern web designer is rarely an artist. Web design entails extending of bounds more often than focusing them. Selling out instead of focusing and selling paradigms.
... penny for every time I heard a developer say something stupid about their own field.
Just because you're not aware of 1 thing, doesn't mean you shouldn't be called a designer anymore. Just so you're aware, your horse is high as a kite.
[edit: coherence]
I don't even know why we have the TrueType font standard anymore, if not a goddamn platform on Earth even bothered to render them remotely the same.
You know how hard it is to find a code font you like, when it doesn't even look the same from platform to platform? I've actually given up and gone so far as using old bitmap fonts from the 16-bit era, because at least I can trust those to look the same, in theory. Sometimes even then the Mac's ludicriously overzealous font smoothing will render them unintelligible.
I am impressed at the quality of the Mac's rendering but man alive, it's so extreme sometimes that it's tempting to call any font running on a Mac a derivative work.
The flipside of course is that if you're on any kind of Linux, even getting your font rendering to something like palatable can be all manner of obnoxious, not least because it will even vary from software to software. Tweak the system fonts all you want, it'll do fuck all when your browser decides to just completely override and ignore the system font rendering for it's own, usually uglier, ideas.
This is why designers give up and just design for the Mac. Because ultimately, they want things to look good, and trying to make things look both good, and consistent, on everything, is an intractable nightmare.
Have you tried Infinality on Linux?
http://www.webupd8.org/2013/06/better-font-rendering-in-linu...
FTFY. Seriously, if you do all your design work on a particular piece of display hardware and actually are unaware that things tend to display differently on different hardware and in different environments then yes, hand over your "designer" title, please.
I used to have colleagues like that. I didn't tell them this quite as bluntly (because, colleagues) but oh did I wish I could. Have some pride in your work, please. Now this was in the time that "responsive" was not yet a thing (and we were happy when IE7 came out hahaha finally PNG transparency :p).
But today? What is responsive design if not a fundamental awareness that your site is going to look different on different types of hardware? How can a designer get away with such ignorance today?
An outstanding example of the annoyances this causes is the website of my local tram operator. Here's a screenshot on my notebook: https://twitter.com/stefanmajewsky/status/536948106366304256 -- If you want to compare the rendering on your machine: http://www.dvb.de
Also what has this to do with Retina? I always assumed Retina is just a resolution thing, right? But the screenshots are the same resolution.
Retina does effect screenshots. I use Dropshare[0] and it actually has an option[1] to downscale Retina screenshots to a 'normal' resolution
That said, great presentation and a lot of great advice in this submission.
So that more people can spread word about how low contrast/less readable text hinder accessiblity.
- "No contrast" means that there is no striking difference.
- "High contrast" means that the difference is highly striking.
I agree that "low contrast" also makes sense, but I still think "no contrast" is a better fit.
1. https://en.wikipedia.org/wiki/Contrast_(vision)
2. https://www.smashingmagazine.com/2014/09/design-principles-c...
Visual contrast is measured on a spectrum that starts at zero and goes up from there - a box of a particular color inside a box of the same color would have no contrast, but if there is any difference in the color values then there is at least some visual contrast.
Wikipedia isn't a great source for definitions, but has a reasonably thorough take on this https://en.wikipedia.org/wiki/Contrast_(vision), going into the details of contrast sensitivity, which deals with almost-imperceptible levels of contrast.
But do you know what else was hard to read?
The code blocks themselves. Because of the syntax highlighting and pastel colours, I had to focus quite a bit to see any of the actual code. It got better with a few more lights on in the room, but someone with below average vision would likely struggle to read much of this page.
But after that step the tutorial redefined the text color to #566b78, which is even lighter. I understand that the blue shade is a nice touch, but decreasing the legibility of the text so much is not.
Besides these nitpicks, the article is great though :)
> So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black.
[0] - http://webaim.org/resources/contrastchecker/?fcolor=555&bcol...
[1] - http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...
If I find an article with #000 (or for example... HN comments) I can't sit and read them all at once, I have to go through them in bits and pieces and give me eyes a rest.
So if I want to be able to play games tweaked for this wide spectrum, and read text, I either just can't, or have to hope websites use grey-on-grey.
#000 is as dark as your screen is when the screen is turned off, which is not the darkest color that you can perceive. And if at any point it is uncomfortable to look your screen because it is blindingly bright, then the screen brightness is set too high.
White on Black (or Black on White) are generally bad. I prefer the low contrast in my example: http://codepen.io/anon/pen/ZORWRv
Though even the "medium contrast" is much easier on my eyes than default.
So yes there are some people who will have issues reading what is proposed, there are other people who have a hard time reading what you are proposing.
While it is reasonable to argue whether #555 is the exact right level or not, the point is you need you need to make the contrast less harsh than black on white. Otherwise its just fugly.
I checked the site and it's absolutely lovely, I was all ready to jump at the occasion and share this link to all my friends who ask me about "design tips" some times (I got a decade of experience on them so I intuit and spot things that are "off" but often it's first this 4 minute stuff that needs fixed), and when he got to the text #555 bit I was like "NOOOOOOOOOOO now I have to send this to all my friends with the caveat 'but please ignore the text #555 bit'" (which will get lost somewhere and we'll end up with more bad contrast sites).
I can say a bit more about this, but since the site is all about "do this!" (no reasoning given) I'll first just say: "don't do that!" :)
The claim that black text is harsh on the eyes is a similarly unfounded-yet-oft-repeated "Designer Wisdom" like that Golden Ratio shit--it's also similar in the way that it's not per se wrong to use it, but like bbq-sauce on pizza/sex, only if you know wtf you're doing, not something to apply willy-nilly without clue or cleverness.
And it's IMHO slightly worse than the Golden Ratio because 1. the Golden Ratio doesn't hurt and 2. the Golden Ratio thing sounds sciencey but is hard to experimentally confirm or refute while anybody can see that black on any screen was never really black to begin with so what are you on about in the first place "never use pure black" (as a designer, I WISH I could use pure black, but we can't, scientists told me only a black hole is really pure black, and you can't paint with those because they're bad for the environment or something), it's a really arbitrary distinction.
As for "don't use pure black", I do that, but the most important rule of design remains:
You have got to know the rules before you break the rules!
And the rule is black on white. Which you can't achieve. So practice on that first. Then you can break it and ask yourself "why am I breaking it?". Personally what I like to do is use a very dark colour like #321 or I don't know, #114 maybe. This way, on a high quality bright and contrast-rich monitor the people with medium-good eyesight get a slightly coloured tone in the blacks that you can use to match the other colours, warm it up, cool it down etc. And for everybody else, it looks like black! I usually do the same for white. And if you use something like redshift (or Flux) it gets all messed up any way, but if you place your blacks/whites slightly off minimum/maximum and you do it in harmony with the other colours, then a transformation like redshift will also leave a lot of that colour harmony in tact. So that's a good reason not to use pure black or pure white. However, upping your blacks all the way to #555, will get a lot of use out of the non-linearities in the blackbody-radiation that redshift emulates and it'll mess up the colours.
Also #555 is 33%! Post-gamma, even! You just threw away one-third of your dynamic range for what reason? Say somethingcontrastsomethingsomething again, I double-dare you. Again, learn to use contrast first, before you decide to get rid of it because you've heard somethingsomething somewhere.
Otherwise, wow this site is absolutely lovely!! :D Let me not understate that!
#0f0a01 for black #fbfbfb for white
However, if you run Chrome's Accessibility Audit (https://chrome.google.com/webstore/detail/accessibility-deve...) on this page, you get warnings about low contrast for 100+ elements and a link to https://github.com/GoogleChrome/accessibility-developer-tool....
So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.