8 ms·
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 ty
by primigenus 10y ago
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-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en 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-tools/wiki/Audit-Rules#ax_color_01 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.
- K0nserv 10y agoI 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&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=555&bcol... [1] - http://webaim.org/resources/contrastchecker/?fcolor=566b78&bcolor=ffffff http://webaim.org/resources/contrastchecker/?fcolor=566b78&b...
- epidemian 10y agoI 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 10y agoMaybe 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.
- epidemian 10y agoYeah, 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.
- ry_ry 10y agoAlmost 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 10y agoYou 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.
- jda0 10y agoI 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.
- antisthenes 10y agoI 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.
- ethanbond 10y agoWas the site that's linked to here too hard to read?
- theGimp 10y agoIt 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 10y agoIt was awful. Things went well before and after the text contrast thing,
- deleted 10y ago[deleted]
- coldpie 10y agoApple's developer documents are a particularly awful example of the "grey-on-grey" trend: https://developer.apple.com/library/mac/technotes/tn2091/_index.html https://developer.apple.com/library/mac/technotes/tn2091/_in...
- CM30 10y agoYeah, 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.
- ladzoppelin 10y agoIt 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.
- Nadya 10y agoHigh 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 http://codepen.io/anon/pen/ZORWRv Though even the "medium contrast" is much easier on my eyes than default.
- sp332 10y agoCan'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 10y agoWhy? #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 10y agoThat 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 10y ago
- unethical_ban 10y agoIt's a hell of a nitpick to say this isn't web design. Layout is a vital part of design.
- rtcoms 10y agoI will just post this link here : http://contrastrebellion.com/ http://contrastrebellion.com/ . So that more people can spread word about how low contrast/less readable text hinder accessiblity.
- Osiris 10y agoInteresting. 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 10y agoThe 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 10y agoYours 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) https://en.wikipedia.org/wiki/Contrast_(vision) 2. https://www.smashingmagazine.com/2014/09/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/ https://www.smashingmagazine.com/2014/09/design-principles-c...
- CognitiveLens 10y agoHere 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) https://en.wikipedia.org/wiki/Contrast_(vision), going into the details of contrast sensitivity, which deals with almost-imperceptible levels of contrast.
- chris_va 10y agoAs 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 10y agoand why's that?
- chris_va 10y agoLooking 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 10y agoI'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 10y agoIf 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
- matejn 10y agoMy 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.
- zodPod 10y agoHonestly, 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.
- collinmanderson 10y agoI saw the #555 and thought that was pushing it a bit. #222 is pretty safe, and I try not to go above #333.
- deleted 10y ago[deleted]
- e_proxus 10y agoThe 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).
- crispyambulance 10y agoIt 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 10y agoI 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!
- sontek 10y agoI 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.