[primigenus]

This is a pretty nice demo of the process of turning a basic page into a "design" (in the sense that applying positioning, spacing, contrast, and things like typography is visual design - I might call it layout instead).

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.

[antisthenes]

I could not agree with this more.

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.

[coldpie]

Apple's developer documents are a particularly awful example of the "grey-on-grey" trend: https://developer.apple.com/library/mac/technotes/tn2091/_in...

[jakub_g]

My personal theory is that stuff looks / renders differently on Macs due to them having 1) retina screens, 2) different font smoothing algorithms, 3) glossy screens.

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.

[edejong]

If it is true that most designers are not aware of the accessibility issues caused by their designs in various environments, how can we still call them designers?

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.

[richforrester]

> If it is true that most designers are not aware of the accessibility issues caused by their designs in various environments, how can we still call them designers?

... 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.

[tripzilch]

Not so high when it really is the equivalent of an app-developer unaware that an iOS app won't run on Android.

[jarcane]

I own and work on at any given time, all three of Mac, Windows, and Fedora Linux, and let me tell you this shit gets infuriating.

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.

[semi-extrinsic]

> 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

Have you tried Infinality on Linux?

http://www.webupd8.org/2013/06/better-font-rendering-in-linu...

[tripzilch]

> Most "designers" work exclusively on Macs and they are not even aware of the issue.

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?

[majewsky]

> Most designers work exclusively on Macs

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

[coldpie]

I do development exclusively on Linux so their docs look like this: http://i.imgur.com/80uc91Y.png Urgh. Luckily Firefox's Inspect Element lets me turn off their awful stylesheets and make them legible.

[overloaded]

That's terrifying. You should do whatever it is that makes Linux have good fonts.

http://i.imgur.com/AawrGCc.png

[jablan]

It's not really fair to compare that with Retina output. But yes, lot can be done to improve Linux font rendering.

[coldpie]

Alternatively, Apple could not use grey-on-grey color schemes.

[patrickburke]

Try high contrast chrome extension choose increased contrast

[ethanbond]

Was the site that's linked to here too hard to read?

[theGimp]

It was for me. I don't have bad vision by the way. It's just that I decided not to zoom in this time to experience the website properly. Once I got the the grey colour step, it was clear that the top comment here would be about it ... for good reason :)

That said, great presentation and a lot of great advice in this submission.

[mynegation]

It was awful. Things went well before and after the text contrast thing,

[rtcoms]

I will just post this link here : http://contrastrebellion.com/ .

So that more people can spread word about how low contrast/less readable text hinder accessiblity.

[Osiris]

Interesting. I have on gripe with that page is that the examples of bad contrast say "NO CONTRAST" while the good examples say "HIGH CONTRAST". The bad examples should be more accurately labeled "LOW CONTRAST".

[Retr0spectrum]

The definition of contrast is "a striking difference".

- "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.

[suchow]

Yours is a definition of contrast, but not the one used in design or vision science [1, 2], where contrast is defined as a difference in luminance or color between regions of an image that makes objects and textures visible. If an image has no contrast, it is a solid patch. If an image has low contrast, the brightest or most colorful regions are not too different from the other regions, as if seen through a dense fog. If an image has high contrast, the brightest or most colorful regions are quite different from the other regions.

1. https://en.wikipedia.org/wiki/Contrast_(vision)

2. https://www.smashingmagazine.com/2014/09/design-principles-c...

[CognitiveLens]

Here we're talking specifically about "visual contrast", which has a meaning in perception slightly different than the common usage of "contrast".

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.

[Silhouette]

I just wish they'd fix their site so it doesn't break the layout horribly if someone has set their default browser text size to something other than 16px! The irony of a site that is about maintaining accessibility for those with less than perfect vision breaking under one of the most likely changes to be made by someone with less than perfect vision is rather awkward.

[KevanM]

Is it me or did the buttons and space bar not work? Or is having a usable UI the next project?

[DigitalJack]

need something like that for colorblindness.

[jstimpfle]

While I dislike these Javascript scroller pages, that must be one of the most simultaneously legible and pleasing designs I've ever seen.

[CM30]

Yeah, the grey coloured text was quite hard to read on this screen too.

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.

[epidemian]

I was going to comment the same. The first change to the text color was to #555, which IMO is way too light already. Something like #333 works much better at "softening" the sharpness of black over white while still maintaining the text pretty readable.

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 :)

[sdegutis]

Maybe it's a matter of screen quality? I don't have the best eyesight, but I saw no discernible difference between the #000 and the #555 when it switched. And neither were either too harsh or too soft on my eyes. But I was looking at it on a macBookPro.

[ry_ry]

Almost very designer I've worked with has eschewed black in favour of one of the lower order grays, not just to make the contrast less jarring but also to ease the browser's own font smoothing a little as it tries to jump from 0 to 255.

[cpeterso]

You could probably get a similar effect by softening the background color from a harsh #FFF. You might not need to use as light of gray text color then.

[epidemian]

Yeah, i suspect that might be the case. The author may have designed this on a similar high-contrast screen too. I saw it on a regular 1366x1024 laptop screen and the reduction in contrast from black to #555 was discernible.

[jda0]

I saw this on a 1080p 15.4" display and whilst the switch to #555 was not especially jarring in itself, it made the harshness of the perfectly white background more prominent.

[K0nserv]

I noticed this too, it's easy to fall into the trap of subtlety when designing. Subtle often ends up as low contrast which can definitely hurt accessibility. I think the first body color #555 was nice and it gets a good accessibility score too[0] whereas the second edition of the body color #566b78 is a bit too low contrast and subsequently gets a non perfect accessibility score[1].

> 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...

[collinmanderson]

I saw the #555 and thought that was pushing it a bit. #222 is pretty safe, and I try not to go above #333.

[unethical_ban]

It's a hell of a nitpick to say this isn't web design. Layout is a vital part of design.

[ladzoppelin]

It hurts my eyes when text is #000000 but maybe its because I have a really nice screen with high resolution. I understand it is about what works well but for some, above #000000 is much more comfortable.

[sontek]

I'm the same way, that is why I find it interesting that so many people are complaining that the tips in the article. They definitely help my type of vision a lot. I find #000 very harsh and difficult to read and these softer tons help me.

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.

[sp332]

Can't you adjust your monitor (usually the "brightness" setting) until it's comfortable for you? Personally, I like keeping the text black and adjusting the background to be darker if I want to reduce contrast.

[kuschku]

Why? #000000 is meant to be pitch black, as black as being locked in a room without windows or light. #ffffff is meant to be as light as looking right into the sun itself, blindingly bright. (And my monitor accomplishes quite something like that).

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.

[fsck--off]

That analogy doesn't work because your screen cannot reproduce every color that is perceptible to people.

#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.

[hiou]

I have my brightness as low as it can go on every device and #000 on #fff is definitely not fun for my eyes.

[sp332]

But then wouldn't it make more sense to have a darker background instead of lighter text?

[Nadya]

High contrast is the issue and is generally uncomfortable when compared to lower (but not too low) contrast.

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.

[zodPod]

Honestly, with my glasses I've got pretty good eyes, and the gray text was a LOT harder to read than the black text. When it faded it became like reading through a blur.

[matejn]

My laptop has a pretty bad screen and several shades of light grey and dark grey appear white or black, respectively, so these sites can be really annoying.

[sontek]

I think everyone is different and it is hard to make everyone happy. This website is 100% more readable to me than HackerNews. It was painful to switch back to HN comments after viewing the final product of the site.

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.

[crispyambulance]

It is not true that pure black text on pure white background is a better user experience for most people. It might be better for a small minority of people with vision problems.

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.

[tripzilch]

I am so glad this is the top comment :)

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!

[e_proxus]

The main text in the article is actually not flagged for low contrast it the Accessibility Audit. Only the inline code and pre elements (which I agree are hard to read).

[chris_va]

As a takeaway from many many experiments, I would recommend something like #030303 over pure black, even if you don't want to embrace grey.

[NDT]

and why's that?

[chris_va]

Looking at page timing, people seem less jarred by the slight contrast difference, even if they would have a hard time distinguishing the two. As for why, I am not sure.

[caffeinewriter]

I'd love to see a blog post on some of the nitty-gritty details on this. Even if there's no known root cause, it'd be fascinating to see your analysis on this.

[rangibaby]

If you think about paper, it's not perfectly white because of the material and light passing through it and reflecting off it. Neither is the ink perfectly black. I've also found that a mix of shades is preferable to either pure white or black. On my latest site I used:

#0f0a01 for black #fbfbfb for white