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

[patrickburke]

Try high contrast chrome extension choose increased contrast

[ethanbond]

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

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

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

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

[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?