I have been a professional artist for about twenty years and it is my considered opinion that any "rule" given out to beginners is actually a warning: violate this rule and making something that looks good becomes a lot harder, so you should probably better make sure you're not violating any other "rules" unknowingly.
If you know damn well that you're violating multiple rules then sure, go for it - break your perspective, fill the drawing with tangents, shade with black, etc, break the fuck out of these rules, and you can end up with something pretty good. You have to know your shit backwards and forwards to really pull this off; go look at how solid Picasso's pre-Cubist stuff was, for instance.
There are good reasons to choose to use black and there are good reasons to avoid using it; this article talks about several. IIRC, one of the reasons painting teachers traditionally like to tell you to avoid it is because most commonly available black pigments can very quickly ruin the saturation of any other color you mix it with, ending up with unpleasantly grey shadows. But if you do more graphic work that treats each color as a largely separate entity then a lot of solid black can make stuff positively glow.
You can paint like a child, as long as you has the network of social relationships that Picasso had.
Artists provide often a connection between the rigid wealthy class and the low classes seen as more free to experiment. We can see it in Picasso, but also in Warhol or Bacon, for example. Context is everything, and in that context drugs, sex or friendship play a big part, so is not just as simple as paint anything and sell if for an obscene amount of money.
Today videogames and internet provide similar experiences of living a second life and hanging up with interesting people so making the same impact as Picasso as a new artist would be much more difficult.
“Drawing like a kid” is it’s own special part of the craft. You have to deliberately step back from a lot of the skills you’ve learnt about what makes a “good drawing”, and yet since you usually have a reason to make a drawing that looks like a kid’s work, you still have to keep in mind all the skills that apply even if your rendering and anatomy is deliberately lacking and broken. You can’t even just draw a stick figure because after a serious education your stick figures are bursting with life and anatomy. So you look at a bunch of kid’s drawings, recall a few of your own special kid-art quirks, and you make sure the composition is crystal clear, maybe add a few labels in a childish scrawl or a neat parental addition...
Rules are great for when us non-pros make something that looks bad, but we don't exactly know why, we just know we made something we aren't happy with.
I mostly like skeuomorphic designs, so I'll definitely keep this one in mind next time something looks off.
#000 on my screen isn't going to be pure black either. There's ambient light, the black level on the monitor, etc. Several of the examples of saturated grays in this article are low-contrast UI that's hard to read. Please don't do that.
"Words on web pages aren't black". But they should be #000 or close to it. Let the user's screen and environment determine the rest.
Interfaces are artificial constructs designed to be as readable and understandable as possible. Looking at the color of shadows and physically dark things is unhelpful for designing readable interfaces with sufficient contrast.
You should use moderation. Guidelines for accessibility suggest a 3:1 contrast ratio as the minimum contrast level, but having too much contrast can also make reading more difficult (e.g. for people w/ dislexia)
Black text on white background (#000 on #fff) used to be standard on computer displays, and still is for many desktop applications. The expectation is that one's display is set to a reasonable brightness & contrast settings for that, which usually means less than 50% brightness setting. In addition, as the GP notes, black usually isn't very black on LCD displays (IPS panels in particular).
Web sites using noticably lower text contrast are bad in that one has to constantly adjust the display settings depending on the web site or app. Having less-than-optimal eyesight, I struggle with anything significantly less than pure black on white for running text, with regular contrast/brightness settings.
> Black text on white background (#000 on #fff) used to be standard on computer displays
Aside from computers with built in (e.g., early Macs) or external TV-style displays that had no color support (e.g., Timex Sinclair 1000), and later Macs even though they had color support, that doesn't seem to have ever been common, even on other machines of the same time.
EDIT: It was common on word processing, desktop publishing, and some other apps once WYSIWYG became a big trend, but that was pretty explicitly about print-on-white-paper skeumorphism, not an idea of what was ideal for work on a computer outside of the specific context of mirroring what print would look like.
> Black text on white background (#000 on #fff) used to be standard on computer displays, and still is for many desktop applications. The expectation is that one's display is set to a reasonable brightness & contrast settings for that
Tangentially, original Kindles render black text on a gray background, and it's great. Books use white paper and will hurt your eyes with glare if you read them outdoors. But somehow Amazon has decided that gray is only for their cheapest, crappiest model, and you should be excited about the "PaperWhite" "option". I don't get it.
It would be nice if the default background color was a choice rather than a price point. Personally I like reading in dimly lit rooms or subway rather than outside, so a brighter “paper” is an advantage. But I definitely understand that for reading on a beach you would like a darker one.
Since you have eyesight considerations, I'm curious: what about white on black (#fff on #000)? Is there any noticeable impact, positive or negative, over black-on-white?
For my eyes black on white is far superior. White on black results in haloing around all text, whereas black on white results in generally pretty crisp text. This is why I use light themes and high-contrast mode for anything that supports it. (The glaring exception is Spotify)
The basic idea is that for folks with blurred vision (not out of focus, literally blurred), bright colors will erode into dark surroundings. Dark text on light background means the text is uniformly slightly lighter than "ground truth", light text on dark background means a distracting halo forms around the text.
This. A thousand times. I'm an oldster -- and no, 40 is not old. My vision varies from dead sharp to blurry depending on eye fatigue, probably blood sugar levels, and how my rather large floaters are behaving. But by the end of a day of reading, it's almost guaranteed that my eyes will be blurry from fatigue and age-related stiffness, complicated by that modern-day miracle -- replacement lenses for cataracts. As a consequence, reading any light text on dark background when my eyes are blurry is just a mess of haloing. The haloing bleeds three or four lines above and below the line I am reading, creating a big fuzzy mess that's annoying and hard to read.
To be clear when I mention floaters, I don't mean the little black squigglies that everyone experiences at any age. Rather mine are more like floating but not completely un-anchored translucent blurs that move right when my eyes move left. I suspect mine are Weiss rings.
Know that all that time you spent choosing a font color that is one-level of gray removed from invisible ink will never be enjoyed by me. I've overridden the the default font and font color in my browser to be a nice large, heavy, mono-spaced black font. When my eyes are fresh, yeah, I can read your 300-weight pseudo-invisible ink just fine, but it flatly irritates me, hence the overrides. And right click inspect is my boon companion when reading any page too-trendily designed.
If you're less than 40, it's hard to appreciate how age changes one's eyes. So if you're a youngster, have a bit of sympathy for us old folks when choosing color schemes. Or don't. I'm happy you can do creative, and that those of us with less-than-youthful vision can make adjustments. Best of both worlds.
This is great insight, thank you for commenting. I'm very much interested in design that is at the intersection of accessible and beautiful at the same time. Unfortunately those things seem to be pretty mutually exclusive but it's my belief they don't have to be.
I always appreciate this sort of feedback - especially as a young guy! :)
Sounds like you have astigmatism. It can be mostly corrected by glasses.
But yes a dark on light theme helps a lot too! I like that almost all apps support light and dark modes these days so I can just switch to what I feel like. I have some astigmatism to but not very bad and I like the calm of a dark screen at night.
There are a number of aspects to light mode vs. dark mode. One important aspect is ambient lighting: to avoid eye strain, the average display brightness should be similar to the ambient lighting level. At least that's the general recommendation, and it matches my experience. So unless one works in the dark, that means light mode is more ergonomic. At night in bed though I read with dark mode on an iPad.
There also seems to be some scientific evidence that dark on light text is generally easier on the eyes than light on dark text: https://graphicdesign.stackexchange.com/a/15152.
I don't know how well-grounded that is (and whether it's independent from ambient lighting), but from personal experience I tend to agree with it. With white text on black, there is some blooming effect that makes reading more straining.
Finally, there are still many GUI applications that do not support dark mode very well (if at all), and a mixed environment (e.g. a dark-mode web site on a light-mode desktop) is just unpleasant.
For all those reasons, black on white works better for me.
I've seen this idea mentioned before, and while I don't know for 'average user' for my near sighted old butt, generally working in a fairly dark room...
'Dark themes' are much easier for me to work with for long periods.
I like 'medium' contrast (ambers, yellows, greys, greens) on a dark background the best.
Yeah - I just find it interesting that I've gravitated to preferring darker environments for screen work...I see those 'room setups' where people have bright sunny windows near the computer and just think "oh god, the glare!" :-P
> One important aspect is ambient lighting: to avoid eye strain, the average display brightness should be similar to the ambient lighting.
Which average (mode, median, arithmetic mean, geometric mean, harmonic mean, other?) of which measure of brightness?
> So unless one works in the dark, that means light mode is more ergonomic.
Does it? I’d like to see the work on that. IME, with common monitor settings, the brightness of most of the screen in light mode is typically much brighter than anything other thab directly looking straight at light fixtures in a typical work environment, it doesn't tend to approximate the ambient lighting level. Light mode on a purely reflective e-Ink type display would approximate ambient lighting, but that's not the kind of display usually used.
Do you use custom setups to browse the web? I'm curious what your thoughts are on color schemes such as HN's or Google's. Those aren't #000 on #fff but also aren't egregious super low contrast either, and at least to me, moderately high contrast palettes are easier on my eyes when I'm situationally reading in a dark room than pure black on white.
HN is acceptable (barely) on OLED mobile for me, but I’d prefer a white background and blacker text (like e.g. reddit). On other displays I often compensate by increasing the font size, but obviously that’s not optimal.
There's definitely a specific reasonable brightness level for #fff, depending on room brightness, somewhere in the realm of 200 nits. But I think a reasonable setting for #000 is "as dark as it goes". It doesn't seem right to depend on screen settings to control the contrast against black.
It might have been standard on web pages...
But there was a reason green screens and especially amber/yellow displays were popular long after color displays came out...
I still find amber on black one of the easiest color schemes to read.
> But there was a reason green screens and especially amber/yellow displays were popular long after color displays came out
Yes; monochrome monitors were typically higher resolution and color adapters could usually handle only very few simultaneous colors, providing very little benefit for the tradeoff of resolution.
IBM MDA (1981, monochrome text-only) was 80×25 text with a 9×14 font, or 720×348.
IBM CGA (also 1981) had 320×200 4-color graphics, and 640×200 monochrome graphics, with at most 80×25 8×8 text.
Hercules InGraphic (1982) had the same text mode as MDA plus 720×348 monochrome graphics.
IBM EGA (1984) highest resolution mode on a color monitor was 640×350.
It wasn't until VGA (1987) that there was a common PC color adapter that could drive a color monitor at or above the resolution of MDA text and Hercules graphics.
So, yeah, there was a good reason that monochrome (either alone or alongside a color display) hung around in the PC world.
>>It wasn't until VGA (1987)...
Personally, I didn't know anyone doing graphics on them. They were for pure text usages: programming, point-of-sale, etc. I think that's the reason they eventually died out: It wasn't people were giving them up, it was the home market taking off and people wanting color for games, photo editing, etc. People that worked on computers all day, were still using and loving their amber displays.
I was still using amber Wyse terminals well into the 2000s...Its like the old joke: Would you rather have a Wyse display or a 3270 keyboard ?
> Personally, I didn't know anyone doing graphics on them. They were for pure text usages: programming, point-of-sale, etc
Sure, and it wasn't until VGA that color displays could match MDA text quality, in theory, with the right display. But even then they were much more expensive.
>there was a reason green screens and especially amber/yellow displays were popular long after color displays came out...
yes, and the reason was the fuzzy-blurryness of color display technology at that time, and the fact that those in the industry were already used to monochrome displays and had workflows and settings adapted to monochrome. Once color display quality became high enough, monochrome demand completely evaporated.
I'm not saying that there is nothing nice about a monochrome display, and displaying light on black (my terminal and emacs windows are still black background, with a distinct fondness for green; I too am an old-timer), but still...
>>yes, and the reason was the fuzzy-blurryness of color display technology at that time, and the fact that those in the industry were already used to monochrome displays and had workflows and settings adapted to monochrome. Once color display quality became high enough, monochrome demand completely evaporated.
Eh? no one had color back then.. You had monochrome - you just got to pick which color you wanted: white, yellow, amber or green.
And I never saw monochrome demand 'evaporate' - I saw lots of new people come into computing in the 90s that wanted color for games, photo editing, whatever.
edit: what I mean is, there weren't enough of us 'text only' people to make it worth while for manufacturers with the armies of new users coming in with games, gui's and all that
I used to be quite fond of the amber CRTs, and still am from an aesthetic point of view. Also, for roughly my first decade of programming I used white text on blue background almost exclusively. So I get those who like dark mode. But eventually me and my eyes got older.
yeah - I find as I get older, I prefer a darker environment for working on the computer (turn of the room lights, etc) and a bright(blinding!) environment for working with my hands ;-) (Where did that #%$#% screw go!)
I also find, I'm _waaayy_ more annoyed by smudges on my glasses then when I was younger.
It kinda became that - with internet explorer and front-page? IE had different styles from Netscape and mosaic that both featured grey backgrounds and black text (blue/purple links).
I'll take your word for it :-) I don't really remember the early web well enough to recall. I was much more IRC/Gopher then WWW back then. Also, I was too cheap to pay for Turbo-C on windows back then, so I was using linux/gcc. I missed most of the early IE 'fun' :-)
Actually, come to think of it - I think front page was the harbinger of white backgrounds - not ie. I think the standard ie user style sheet also used black on grey.
3:1 isn't anywhere close to enough. That's the recommendation for graphics and UI components. For body text, WCAG suggests 7:1 and even that can be too light if the font is a thin style or is small.
Not to mention the various environmental factors that affect the contrast ratio in practice. Crappy LCDs in poorly lit environments rendering with buggy software. Err on the side of darker is better.
Here's an eminently readable site. Now sure it doesn't use #000 but it's also way more than 3:1 contrast ratio and uses reasonably sized generously-bodied fonts: https://www.contrastrebellion.com/
has my thoughts exactly (gee, I'm actually not the only one!) except usually I'm not just thinking but screaming until I have a sore throat. So, finally I agree with the Web site designer: Since clearly they don't want people to read their site, I won't read their site and, thus, just click away and intend never to return.
There is a special case of this gripe -- graphs. When I do graphs, say, in Excel, I spend over half the time just fighting the defaults. I want the fonts large, just BLACK, and BOLD. For the axes and tick marks, BLACK and THICK. I want to be able clearly to SEE the data and to READ the axis annotation. E.g., I'm on a diet of about 1500 C a day. I keep careful data and occasionally graph it. Sure, I want to print the graphs on my black and white only laser printer to give, say, to a nurse at a clinic. Soooo, I want the graph to be super easy to read once printed on my black and white printer.
mentions, what was it, some artistic or emotional goals? Well, it appears in most graphs that finally do make it into the content of the mainstream media (MSM), the intention is that the line for the data be an emotional expression, say, of a thrust of eureka up and to the right. So, they go for art (communication, interpretation of human experience, emotion) instead of data analysis. Graphs in papers in physics and engineering commonly are nicely done!
What is in common on many Web sites and graphs in the MSM seems to be a goal of an emotional expression instead of information. I'm in favor of a lot of emotional expression for both fun and profit. And if my Web site works, e.g., helps my users have good emotional reactions, then I will want to analyze and, at times, graph the profit, and there I care only about, call it, data analysis, e.g., information presented clearly and explicitly. To "circle back", when a site has text, I want to be able to read the text!
I know; I know: On a Web page with text that maybe artistically something or other but super tough to read, I can grab the HTML and use various text editor macros I have to rip out the HTML markup, leave the text, format the text, and then read it in my favorite text editor. THIS is what the Web site designer had in mind?
And some people can't really see writing at all if it's grey and white.
The best solution is user agents that actually convey a modicum of agency to the user. The second-best solution is adjusting your monitor; most monitors, you can reduce the contrast, but you can't really increase it.
I have a design background and have written a lot of CSS, and I have opinions so just interpret this all as a personal preference if you want.
* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?
* Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember.
* Shadows are really never black and your CSS shadows will look better if you don't default to black. Toggle 'tint shadows' on the _excellent_ css shadow palette generator: https://www.joshwcomeau.com/shadow-palette/. Play with background colors, you'll see.
* Your design will never please everyone, especially anything close to a majority on certain tech news aggregators.
Device-specific limitations and concerns should be addressed on-device rather than globally.
If a device's white is excessive then have that device correct for it. Attempting to treat special or exceptional cases as a general rule, or even the current primary modality leave you with such disasters as presuming all devices will have some fixed maximum display size (320, or 640, or 800, or 1024, or ... pixels), or refresh rates, or palettes ("Web-safe" colours, anyone), etc., etc.
We're working in a digital medium. The domain we can control is the content itself --- text, the source images, audio, etc. All of those are going to be interpreted and mediated by the devices and tools through which they're accessed.
NB: In my far-more ambitous youth, I'd have said "people can choose their own preferences. While I'd very much prefer that that capability be preserved, in the overwhelming majority of cases, people stick with defaults and won't change even the most basic of settings.* This is why both content and UI/UX designers and device manufacturers should ensure that 1) defaults are sane and that 2) automatic adjustments occur and are well-suited to circumstances.
Pixel-perfect presentation is a persistant pox on publishing predicated on ... the Web. (I ran out of Ps....)
The default brightness of a monitor is optimised for looking good in a brightly-lit showroom (and also for stressing the backlight enough to ensure it fails just outside of warranty, but I digress...), not for comfortable reading in an average room.
I started with brightness and contrast set to 0 on a pair of LCDs over a decade ago, and they've only gone up to around 20 after all this time to compensate for wear.
> Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?
What kind of fear mongering is this? :D If I ever feel we should have made something less dark I will just change it. It's not like I signed a deal with the devil which locks me into that particular colour choice.
I understand if you ask a similarly worded question about some choice in a database schema, but colours on a UI? Fleeting like a butterfly.
Consider the following: if your design expertise was as significant as your database expertise, perhaps your view of the downstream implications of decisions in each would be more alike than not.
Downstream implications are less important in some fields than others.
Can you present an argument for your case that downstream implications in design are about as important as they are in databases instead of appeal to imaginary authority?
All the colors in a design are chosen to look good together. Changing one major color could necessitate changing all of them, and likely also icons and image assets. Even photos could be tuned to the contrast ratios of the design.
This. People use 100% screen brightness then try to compensate w/ low contrast colours.
I see a lot of colleagues messing with low-contrast color themes for their editors. I use the default Emacs one (black on white), but my screen brightness is always at around 20-30%.
I've learned the rule is to set your screen brightness _as if_ it were a piece of paper being illuminated by the ambient light.
Maybe not blinding but not pleasant. Keeping brightness in check is something I do often but I doubt many people do — notice how bright everyones devices are in public next time you're in a restaurant or theater.
I'm with you that you want high contrast, but you also want balance. I think the #000 on #FFF of this textarea I'm in works because the leading is tight, the kerning is appropriate… its information dense. The NYT website is information dense.
If I squint and I see a grayish blob I feel like good decisions were made. If I still see mostly white then there's work to be done.
I've always been of the opinion that if you find a completely white screen to be blinding or even painful, then you either need to turn down your brightness or add additional ambient light to your room, or both.
A lot of screens are too bright even at 0% even at night. My LG 4K screen is such an example, I work on 0% during the day with 70% contrast and it's just about ok.
During the night it's wayy too bright though and I need to reduce contrast to almost 0% which helps but kills colour depth.
Screen manufacturers optimise for high brightness way too much. I guess because it looks good on the shop floor.
In summer I often work with the windows open at night but the lights off to avoid attracting bugs. All my displays are horrible in this scenario. Except my old amber vt520 which I can set so low I can barely read it in a dark room, or so bright it is easily readable in sunlight. It also has amazingly convenient brightness and contrast dials instead of a frustrating OSD menu. Some display qualities of CRTs have still not been matched.
Not really, like I said I use my 4K at 0% brightness in a sunlit room and it's just right. So even there I have no adjustment options anymore without compromising colour depth. When I have artificial lights on I already need to reduce contrast substantially.
My unlit room thing is only in summer, as I live in Spain and have no AC I need to have the windows open at night. It's pretty extreme and I understand that screens are not made with that in mind but they should handle a normal evening scenario just fine.
Most of the apps text editors etc. I use are in dark mode. So yes, my screen brightness is set to above 50%. When I switch to a white-background page I get instantly blinded.
> Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?
Assuming you have a well-managed CSS architecture, you could use black for the darkest thing on your site now and change it later if it absolutely becomes necessary! I don't quite follow the logic of not using pure black now because you might need it in the future, since that same argument will apply just as much at that future time! Besides, there are only 256 shades of neutral gray (black #000000 to white #FFFFFF), so even if your "black" background is #333333 one could still argue "Are you 100% sure there won't be more than 50 darker shades of grey on your site you'll ever need to declare?"
> * Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember.
I always thought the grey window backgrounds used by the Classic Mac OS Platinum appearance were great for this. Bright enough to not be dingy and depressing like the more middle-greys used by Win9x, but dark enough to not be blinding, and also dark enough to use actual black for text to maintain high contrast ratios.
Platinum was designed at the height of CRTs, which were considerably brighter and higher contrast compared to the LCDs that followed them — even run of the mill budget CRTs outperformed the average early LCD, and consumer LCDs didn’t really catch up for a good 10-15 years after CRTs went out of style (in some aspects, LCDs are still playing catch-up). I wonder how much the hardware was responsible for shaping screen content design trends.
A colleague who's a CSS wizard was working on a site where a defined colour in SCSS was "black" and it was #333333. He added a darker black at #222222, and then didn't call it "dark_black" and I've never forgiven him.
>* It's basic floor/ceiling stuff. Once you go #000000, you can't go any darker. Are you 100% sure the thing you're making #000000 is the absolute darkest thing on your site/app you'll ever need to declare?
That's kind of like in BASIC incrementing line numbers by 10 instead of one so you can more easily add lines that you will eventually realize are needed to be shoehorned in.
> * Conversely, never use white! Modern macOS sucks at this! A large window of Mail.app in light mode is pretty blinding. What if you want to add a subtle highlight to a button border on a white background? #fafafa was always a go-to white for me because its easy to remember.
Yes this is why I love dark modes these days. So many apps totally overdo it with the white. MacOS indeed but also pretty much all Google apps and sites are light gray on white. It's too blinding and I can't reduce my screen brightness as I'm already at 0% during the day. Screen manufacturers are now optimising for high brightness that stands out in the shop but ignore low levels.
And so I reduce my contast as the only option but it reduces colour depth too much.
Dark modes are not a perfect option either because they make the apps that don't support it be ultra bright in comparison.
But either way it starts with misguided design principles from Apple and Google IMO. The old Grey window fabric of windows 2000 was boring but it really balanced things out.
I much prefer managing my own contrast levels. Always have.
The product of all these attempts to do things for people results in a mess. It's one of those, "if only everyone would..." scenarios. Fact is they just won't.
All that said, leaving some room makes sense. That's likely in the median of the mess and not contributing to it all that much.
macOS doesn't suck at all. It's the device performance being exemplary and people not realizing what that means that sucks.
Where I've done the most graphic design, offset printing, you get 4 colors (CMYK), and you can pay a little extra to run another plate of a spot color.
In that environment, if you use rich black instead of just K, you'll see registration errors that hurt legibility, especially for small print and at any light/dark boundary. I've got this deep, deep muscle memory of checking the separations to see if we used any accidental rich blacks -- fairly common with advertiser art, but also common in illustrations.
Of course on color pages things are a little different -- looking at the separations, and watching how our photo editors edited levels to make them look good in print, definitely made me think hard about how much hidden detail is in the blue part of an image and how colorful shadows are!
But we were usually on a budget and usually stuck in K. This has for sure colored my design choices, and it's helpful to see the reminder to try designing away from pure black on the screen.
Wow, this threw me back to the early 90s when I did print graphic design.
It's common to use one of the Pantone "rich black" options for spot color, because our eyes see it as "blacker" than 100% K. But yep, if you were doing 4 color work, it was a different kettle of fish.
I hate that websites don’t use pure black for text anymore. As someone with an astigmatism, it makes the text much harder to read. I keep finding myself disabling css with inspector tools until the text is back to the user agent’s default of #000 again.
I don't understand the reasoning behind using some "designer black" for large blocks of text. Especially when the background is also chosen to be a softer tone, contrast is reduced even further.
Imagine you're walking outside, trying to read an article with your phone, having trouble reading the text due to bright reflections. After finally managing to maximize your display's brightness, you realize that the website designer has decided to use these "nice" colors. You crouch down, cupping your hands over your phone to educate yourself about how to never ever use #000000 black.
Imagine you're trying to listen to classical music at a steel mill, but because the piece is mixed "correctly", you can't actually hear it. You turn up the volume to max but it's still too quiet to hear through the industrial noise and your ear protectors.
Now, is it the mixer's fault you're trying to listen to the music at a steel mill?
A lot of people answered "yes" and that's how we ended up with the "loudness wars" lowering the quality of all music to shit. A mistake that's ruined entire generations of music, only available at crap, compressed radio quality.
Where you can do so, use your browser's Reader Mode.
It's possible to further tune Reader Mode (using userContent.css) to your personal preferences, though I believe you can also directly set colours, typically to Black-on-White, White-on-Black, or a Sepia (usually dark brown on smokey white) theme.
When using a full-powered desktop, I'll use Stylish to adjust site CSS to my preferences, usually nuking distractions, though also occasionally modifying colour schemes. That's problematic as there are often many elements to change (nuking all but the principle payload has the side benefit of simplifying this problem).
The advice against using pure black is reasonable and sound for areas of colour and for art that is trying to match how things appear in nature; but I don’t believe it was ever correct to apply it to simple text when your goal is reading rather than art.
The original article here doesn’t even not use pure black, it uses a quite saturated dark blue for its text, which I find quite obnoxious. I find fully desaturating its #113654 to #303030 improves things markedly, and darkening it to #000 makes it even better.
Mind you, I’ve recently shifted to using mildly-off-black (no lighter than #222, which is I think about the lightest you should go) for normal text and true black for bold text and titles (currently demonstrated on my personal website). I think this works pretty well.
Just use a reader mode / extension that respects your preferences. I honestly have set my iPhone to open all pages in reader mode (and if that doesn't work, I turn it off or whitelist the site).
This 2012 advice has aged poorly, and as with all absolutes, fails to consider context, capabilities, and functional goals.
In the specific case of e-ink, where colour is usually nonexistent (there are some colour devices, these are the exception and have limited rendering), where greyscales are limited (16 shades on high-end devices, and often less), and total foreground/background contrast is limited (restricted more by the dark "white" than the light "black"), the advice to avoid saturated blacks is quite poor.
This is most applicable to text, where the most frustrating experience is reading a greyed-out or coloured text, often on a shaded background. Firefox's Reader Mode is a lifesaver, as is the EInkBro browser. High-contrast text and black-on-white themes are strongly preferred. Ironically, I use the Dark Reader extension to force light themes on numerous websites. The fact that the extension itself features a dark theme for its controls is ... unfortunate.
Generally for e-ink, I'd suggest:
- Use solid blacks and high-contrast whites where possible. This should always be the case for text if at all possible. Reversed white-on-black should be reserved for controls and emphasis.
- For photographic and shaded images, halftoned or dithered images are an improvement over shading which is at best posterised. The high DPI (200--300 on most screens) achieves near-photographic quality at a modest viewing distance.
- For icons and UI elements, line- and solid-block art is much clearer and more distinctive than shaded or coloured elements. The top four lines of icons in this image are Onyx-provided applications, the lower rows are third-party apps. Onyx's icons are much better suited to the device: https://sm.pcmag.com/t/pcmag_au/review/o/onyx-boox-/onyx-boo...
Keep in mind that all display systems offer limited ranges of darkness, intensity, hue range, and saturation, and that their best capabilities can be severely degraded depending on viewing conditions. Emissive displays achieve their best results under dark ambient conditions, and become difficult or impossible to read under bright light or sunlight, whilst e-ink devices shine (or more accurately, reflect) at their brightest under direct sunlight.
Now you have a new problem of no one agreeing on a standard saturation level. I'm noticing this more with "dark themes": everyone has a different idea of dark gray.
Since dark themes naturally lead to subduing all other colors except for little accent pieces, the screen is a collage of dark grays to the point that, instead of the background fading away, the background is now stealing the show from everything else. It's this dismal bouquet of gloomy colors and it's hard to focus on the content.
Contrast this (pun!) with terminals and console apps: your terminal is a constant background color while you're working. It doesn't change its shade of gray as you go so it really does stay as a "background" and isn't distracting.
Finally, I feel dark themes exhibit this more than light themes. I feel years of different subtle paper whites has made me less sensitive to variations.
* People have monitors with different gamma curves, and even if you try to match them slight different output for top white and bottom black. Heck, on bad monitors these things can vary across the screen or if you aren't sitting perfectly head-on.
* People are working in different environments so ambient like that they are seeing the screen against (home & office lighting, light from windows, reflections of those off home/office decor, and so forth) will vary.
* Peoples eyes vary in a considerable number of ways, even ignoring those with variations significant enough to be considered “defects” from the norm.
* These things can all vary over time, over different cycle times.
It doesn't just affect blacks and grays: on a simple dashboard I've created pastel colour backgrounds are used as subtle highlights (used to separate things, guide the eye a little, to indicate status of things (though there are other, less subtle, indicators when this is significant), and to just make it look nicer (as coldly objective as I can sometimes be, even I appreciate a bit of effort there)) that are useful (you miss them if they go) but don't want to be attention grabbing. I've needed to tweak the colours chosen because while they did the job on my screens they were too similar or too almost-not-there-at-all on other people's.
I think the variations are intentional. If I were a designer and looking to match backgrounds, I wouldn't eyeball it. I'd screenshot the target and eyedropper the color - that's independent of panel differences. But maybe I'm old fashioned and not a designer anyway.
"Dark themes" are the new sexy right now and everyone's having a play at making their design palette stand out. I think good usability is taking a back seat to artistic freedom and expression.
And don't forget about the most obvious factor, which is that people simply want their website to look a certain way and don't want all websites to look the same.
Since getting OLED displays I've started using more all black themes. Especially at night it helps decrease the amount of light my phone emits significantly (or so it seems).
And OLED screens power consumption is proportional to how much color/white is displayed, so black uses less power. Good for your battery, and the environment too.
In a dark room or outside at night, black on an OLED is truly black and everything else floats magically in the void, it's a wonderful effect.
Back when we had CRTs where black also meant no light, you could have real dark in the room if you only had a terminal with green on black or white on black on the screen :)
There is the problem of "OLED smearing"[0] with pure black that makes using it somewhat unviable. It seems that some OLEDs are more susceptible than others, though. Also fairly certain that this only happens with #000.
All LCD technologies have pixel transition times that vary based on the old and new colors and are often larger than the refresh rate, this is nothing new with OLED. Typically these do get improved over time. I've compared the video on my OLED phone and non-OLED monitor and the smearing is not significantly different.
Astigmatism in both eyes and I still use it although my glasses help somewhat. I find that it's usually not all that bad at night when it comes to the halos around text or doesn't really bother me enough vs adding more light by going with a lighter grey theme.
I have pretty bad astigmatism and love white on black in a dark room on an AMOLED screen with the brightness turned way down. It's the only screen I can look at for over 10 hours without getting a head ache.
At night, I can barely see my finger against the empty Feedly screen. Too bad not all applications (looking at you, Strava and MFP) provide an OLED-compatible dark theme and the "Force dark mode" dev setting does not persist after a restart.
I do the same thing. Black background with white text is by far the best contrast setup for reading hands down, it's better than reading paper or e ink. The only thing entering my eyes is the information I want to see, since I started reading this way I cannot purchase a mobile device without OLED.
I design in the CSS and always stick to shades of gray until I get the layout and interactions right, which are easy to reason and conjure off the top of my head. I can always tell `#ccc` is lighter than `#cacaca` but it's not easy tell how luminant a color is just by looking at its hex.
Lately, I've been playing with HSL, which makes the calculations easier, but luminescence is still difficult. Hopefully, LAB color space will be useful in that regard.
Agreed 00000 is not black, but the reflection is not from the backing layer but from the transparent glass.
if the glass’ reflection is greater than the emissivity of the actual screen, isn't the screen black for all purposes? After all, even if you painted the back of a pane of glass with vantablack you would still have a reflection of the glass!
This reminds me of some difficulty I've encountered with printing computer images. #000000 often comes out as just-off-black. Computers use RGB while printing uses CMYK, with the K meaning "black". So in some places, like Vistaprint, I would have to specifically set K to a max value to make it look right
Talking about text, as my eyes get older I need more contrast to make things legible. This low-contrast nonsense is anti-accesibility and makes the web harder to read for a lot of the population.
As for artwork, using this for foreground artwork makes things look hazy and over-exposed. Have a look at a good quality black and white print and see how black the blacks are. I want to see real blacks in images.
A lot of blogs over the last decade took this advice too seriously and set up dark grey on light grey color schemes that are really hard to read.
I can see using 08 for general text so that headers and other stand-out bits can be 00. And, I can see using an off-white to tone down a bit from paper-white.
But, monitors in general only cover a tiny bit of the brightness range you are accustomed to in daily life. Pretty much the range from "black paper" to "white paper" in a normal office setting. Certainly not "Vanta Black^(TM)" to "Staring at the Sun". And, 256 steps is only just barely enough to cover that tiny range semi-smoothly. Using that tiny range effectively is a struggle. Restricting yourself to subset of that range is an even bigger challenge.
Along the same lines, Edward Tufte recommends Josef Albers's book Interaction of Color, which teaches that there's no absolute colors - it's all relative.
> Whenever you’re working with grays, add a bit of color to them and they will feel less dull.
This is such a great advice, and one that's easy to not think about if you are not experienced enough. Just tweaking grayscale colors a bit like that makes a huge difference.
I'm not sure I agree when OP says that shadows are not black though, like sure a road with a whole bunch of stuff around it and some lighting source somewhere can look blue-ish, that's not measuring the color of the shadow though (whatever that means, it's not like shadows are actual physical things), that's measuring the color of the road.
A shadow is not a physical thing, it is the area where the light sources are blocked by objects. Objects in that area are darker but never black due to ambient light from the general environment. If there is only one light source and very little other scattered light from the environment, you can get a very dark shadow that will seem close to black. Situations where the lighting is so extreme are rare and it makes them look unnatural.
Windows 10's dark theme basically has this problem: it makes everything #000000 black, which is not most people usually want. It's really tiring to the eyes and I switched back to the light theme instantly.
Most applications look very weird on Windows 10 dark mode, especially some older Win32 apps that were not clearly designed around a dark theme. Windows Explorer looks particularly bad IMHO, it's just too dark and the icons clash badly with those almost pitch black folder backgrounds.
I generally avoid dark themes because 1. they are IMHO very ugly, 2. I find that "night mode" apps like redshift are much better for tired eyes, and 3. I noticed that black themes users often end up keeping a higher screen brightness level than me, which counters IMHO any benefit you may ever gain from night mode.
I don't understand how anyone can read white on black without their eyes hurting.
When I first tried it out I was instantly taken aback at how MS had used full black for their darkmode. Not suprising, considering their inability to implement reasonable design, but ridiculous nonetheless. I can't fathom how no one on their design team stepped back and thought 'maybe there's a reason dark mode is usually a dark grey instead of black'.
> When I first tried it out I was instantly taken aback at how MS had used full black for their darkmode. Not suprising, considering their inability to implement reasonable design, but ridiculous nonetheless. I can't fathom how no one on their design team stepped back and thought 'maybe there's a reason dark mode is usually a dark grey instead of black'.
It is most likely due to AMOLED and their big investment in mobile technology (Surface, etc.) I imagine a lot of them have AMOLED screens, so a pure-black dark mode pays off here. Nevertheless, I can't imagine it would be hard to just let people choose the colour of the dark variant, like GTK / Qt theming systems do on Linux.
Not designing for a variety of displays and viewing conditions is frowned upon in general, but should be inconceivable for a company the size of any MS org.
On that note, this is one of the reasons I still use a 1x display as my main. Currently it’s a comically large 43” 4k@1x, so it’s only representative of “normal” usage when I remember to shrink windows, but still.
White text on black is terrible with LCDs, but with OLED it is wonderful. Imagine dimming your screen just right, the only thing you can see is the text you want to read. It is much more easy on the eyes than even paper or e ink devices IMO, as long as the display isn't turned up too bright.
I don't have an extensive design background, but took art classes through out high school and college. What he is saying as absolutely true for painting and drawing images - pure black or even mixing with black puts a hole in the page that is almost never the effect you are going for.
But when we moved on to graphic design, that advice changed. Pure black ink on white has been used as an art form for centuries. The sharp lines and contrast create an effect that really pops which is often what you want. And the gamut of (non-HDR) monitors isn't wider than what you would get in these mediums, so that isn't a concern.
You don't want to use it everywhere, but it absolutely has its place. If anything, the trend towards low-contrast design is worse than over-use of high contrast elements these days.
That’s cool until it doesn’t match with the lighting in your room. I believe that designers love to work in a complete darkness, otherwise all these shadows start looking very unnatural to the surroundings. We never get the “real” coloring (or contrast, or curves) on our screens, no need to make it worse by adding light sources that aren’t there. You can’t even make two identical part number displays look the same side to side, they’re all different (esp. in 2012).
The text in the article is blue, not dark. Paintings look very off too. Maybe that’s the point, but my light isn’t acid orange to begin with. Also, I feel dizzy by looking at colored shadows that some video bloggers use, it feels like looking at the cheap “white but not really, blinding but not bright” led bulbs.
That said I rather like black and white for readability. I've even got a chrome extension to be able to read stuff without all the grey on grey, cool but almost can't read it stuff.
80-90% grey background with 10-15% grey foreground (text) is an ideal contrast ratio/color scheme, for me. It doesn't burn my eyes out at night on my panels, in contrast to white-on-black schemes.
During the day, though, black-on-white all the way.
Except! For backgrounds on powerpoint slides around images. That black on a projector becomes invisible and you're left with just the image, or they just blend with the border of the monitor and you're left with just the image.
For phones with OLED displays, I like to use pure black background for this reason. It feels like I'm interacting with an object, rather than a portal into a 2D world.
I know that this is meant more towards design for digital screens, but I recently learned something interesting about black and gray tints when I was looking for colors to repaint some rooms in my house and ran across full spectrum colors.
The theory behind this is that actual black and gray tints put in paints absorb light and most main stream paint colors use it to tone down colors. It does the job and is less expensive, and will make the color a bit more consistent in all light settings, but the colors tend to be a bit more muddy looking.
This was why the impressionist painters generally didn't use black or gray tints directly. If they wanted a shade that looked black etc. they would combine tints from the ROYGBIV spectrum to create them which is why you see a bit of a vibrance in their paintings.
Now that I've done a few rooms with the full spectrum and can compare you can definitely see the difference. Another fun benefit it that the full spectrum has more nuance depending on the light etc.. It is also why it is impossible to get an accurate color match of expensive full spectrum colors such as those by Farrow and Ball to try to save money with a less expensive paint. One is using several tints, the better ones a minimum of 7 different ones with no black and grey, while the standard paints use 4 (maybe 5).
I always make my text black by overriding CSS that makes it some stupid shade of grey.
But "never use black" is a good rule for backgrounds. I worked in military and nuclear UX, and the standards there were pretty clear to not use black backgrounds in software interfaces. Driven by solid human factors research I had always assumed.
And we have to live with the consequences of this advice today. People misinterpreted it in all possible ways, often by using gray instead of black - which might be nice for some, but is terrible fore readability. Fortunately we have the reader mode so I can ignore their design choices.
Back when many people are still using black, more nuanced coloring would pleasantly stand out because it makes the former look blunt.
Now, after the doctrine has taken over the world for quite some years (the article was from 2012), designs like Vercel landing page[0] feel like fresh air to me. I like the aesthetics because it's clean and straightforward, and how it communicates in a clear way by punching important information in my face.
There's a certain dynamic behind the game, since what I perceived as blunt before, I perceive as clean and straightforward now.
On a mostly unrelated note, I've always thought that there should be two color scales for a display; one for UI elements and text, and another for images. For full-screen video, I can switch the brightness levels on my monitor, but for websites with embedded videos and white backgrounds, I have to choose between the video being too dark or my monitor doing a fair imitation of an SAD lamp.
Friends who work in the VFX compositing departments always talk about how they integrate the cg elements into the video by doing something called "lifting the blacks". They can say it better, but this is what I understood the process as.
When you render out your 3D elements you can get a realistic output but it won't match to the real environment they should be part of. So with a bit of tooling and artistic eyeballing they match the darkest point of the real video to the darkest part of the cg render resulting in the feeling of the 3D element integrated in the real environment. They call it "lifting the blacks" because usually the 3D elements which are rendered are pretty dark, as in the shadows and stuff being black and they need to saturate them and add more light to be able to fit into the real environment, which is mostly done in a compositing software like Nuke.
I recall reading this once before, but I quite like full black backgrounds with full white text on them. I think it looks clean and sharp. Even on my IPS monitors.
I've always been annoyed with dark modes using grays instead of black. Thankfully OLED stuff is getting more popular and I can use the setting meant for them on whatever screen I want.
The whole premise that “nothing in nature or the real world is true black” does not address the fact that text, language, and words are not of the real, physical world. So why should I make my words the color of the deep ocean instead of vast interstellar voids?
Reminds me when my mom taught me that in oil paintings the “black” colour of a scene should be made by mixing all the colours used - there is information in “black”. Look closely at an oil painting, you’ll see that “black” has hues of red in it.
Also interesting, in the winter an asphalt road is even less black than typical due to the evaporated salt on it. This is a key way to notice if your tires will have grip on it (if a patch looks black, it could be black ice).
One of the reason I was so disturbed by Github's dark mode when they first introduced it. And I was not the only one [1]. Thankfully, they have tried to address with different shades of dark (`dark dimmed` and `dark high contrast`) since then.
On choosing colors, I might remind designers that about 25% of males are partially red-green color blind. They can easily distinguish fire engine red from emerald green, but otherwise a lot of reds, greens, and browns look much the same.
I struggle with any article that uses the word "never." We use black (or near to it #101010) on our mobile app. It's great for usability and makes select use of colors standout.
When I did (pre-GCSE) art at school I remember the teacher saying that shadows look like the opposite (yes, I can't remember on what axis!) colour to the light casting them.
I miss these design trends of decades past. The gradients. The skeuomorphism. The rounded corners. The buttons that look like buttons. The letterpress text.
Whatever. Why throw away 8% of your monitor's color gamut / dynamic range? Tip to the author, just turn up brightness on the monitor, or shine a desk light on it. Or get a monitor that bleeds some backlight or light from neighboring pixels. Unnaturalness fixed.
It's like saying digitized audio should never have complete silence in it because you rarely hear that in nature. Well, you rarely hear that in the room you're listening in either, or your own inner ear. Doesn't mean you have to add those sounds to the audio.
Funnily most digital audio is never fully silent for a different reason. Noise is added for the least significant bit, because otherwise you can hear artifacts (deemed less attractive than noise) on silent parts that are close to the threshold of the bitdepth.
That's the noise floor, which should be below the threshold of human hearing unless you turn the volume up so high that the loudest signals would be uncomfortably/damagingly loud. 16-bit digital audio has a dynamic range of 96 dB. Even in an extremely well-insulated anechoic chamber where we (unrealistically) assume the ambient noise level is 0 db, you would theoretically hear extremely quiet white noise when playing back a plain old 16-bit CD, but that CD would still be able to blast out 96 dB which in nearly all imaginable circumstances would be louder than desired. In a more realistic scenario wearing well-isolating headphones in a very quiet normal room, the ambient noise level is probably more like 30 dB, and plain old 16-bit audio gives you plenty of dynamic range to perfect reproduce any conceivable digital audio signal for the vast majority of use cases. Certainly for things like music, I think it would be quite rare for a recording to have a dynamic range greater than, say, 60-70 dB.
Dither works for images too, e.g. for cheap displays that only have 5 bits of color depth. It's hardly a problem for audio anymore which is now almost universally 24 bits (and arguably already wasn't an issue at 16..).
> Tip to the author, just turn up brightness on the monitor, or shine a desk light on it. Or get a monitor that bleeds some backlight or light from neighboring pixels. Unnaturalness fixed.
While I agree with your sentiment, none of those are good solutions. Turning up the brightness influences the bright pixels much more than the black pixels (especially on decent displays). The desk light and bleeding backlight sound like a nightmare.
A much better idea would be to change your monitor's calibration (either in the OSD or in the OS settings), or to use a browser extension for color adjustments.
Honestly, I just find this kind of weird. Unless you had a plasma display in 2012 (or a CRT?) you were using an LCD which have a realistic luminance ratio of ~200:1. Even the good FFS/IPS panels weren't better and the rest of the luminance range was taken up in the backlight... and unless you're in a blacked out basement you have reflection/scatter off the screen, which is already additive.
Most screen gammas are/were roughly square law (sRGB=2.2) above a small linear region below 16 (8bit) so green 0xFF is more than 256x brighter than 0x0F. This has changed with HDR and modern OLED and miniLED backlights that in a perfect environment (not your office) can achieve >1000:1 luminance ratios.
`prettier`, `black`, `go fmt` and other opinionated formatters must have saved tens of thousands of man-hours.
No more fiddling with getting format juuuust right. Save the file and accept the result.
Sometimes it tries to break long lists that better stay horizontal or matrices into long lists, in which case, wrapping the block with `# fmt: on/off` saves the day.
I don't think the formatters need to be so opinionated. The problem with older tools is that they don't have the capability to fix things even when it is easy to fix in an automated way. For example, I don't really care about fixing line length issues, but I really don't want to sort my imports by hand or fix the line breaks with my blocks.
If you know damn well that you're violating multiple rules then sure, go for it - break your perspective, fill the drawing with tangents, shade with black, etc, break the fuck out of these rules, and you can end up with something pretty good. You have to know your shit backwards and forwards to really pull this off; go look at how solid Picasso's pre-Cubist stuff was, for instance.
There are good reasons to choose to use black and there are good reasons to avoid using it; this article talks about several. IIRC, one of the reasons painting teachers traditionally like to tell you to avoid it is because most commonly available black pigments can very quickly ruin the saturation of any other color you mix it with, ending up with unpleasantly grey shadows. But if you do more graphic work that treats each color as a largely separate entity then a lot of solid black can make stuff positively glow.