Never Use Black (2012)
ianstormtaylor.com
ianstormtaylor.com
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.
> “It took me four years to paint like Raphael,” he famously explained, “but a lifetime to paint like a child.
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.
I mostly like skeuomorphic designs, so I'll definitely keep this one in mind next time something looks off.
"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)
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.
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.
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.
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.
Thanks for the information, this is interesting to note!
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.
I always appreciate this sort of feedback - especially as a young guy! :)
but I find 'warm' colors with medium contrast on black to be easiest to work with (yellow, amber, green, etc.).
I tend to work a lot at night/fairly dim rooms though, not sure if that makes a difference.
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 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.
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.
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.
Ambient lighting levels certainly affect the equation.
This depends heavily on the display. White text on a black background is a joy to read on an OLED screen.
I still find amber on black one of the easiest color schemes to read.
edit: s/on/one/
I also find, I'm _waaayy_ more annoyed by smudges on my glasses then when I was younger.
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...
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
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.
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 ?
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.
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).
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.
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.
The gray is markedly superior to the white. It may be a hardware feature, but it's not a "limitation".
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/
I guess it basically boils down to working in a dark(ish) area, my eyes are too dilated to like a bright background?
Outdoors, dark themes are invisible on most of my laptops. Indoors, I tend to prefer them.
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.
The site
https://www.contrastrebellion.com/
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?
* 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.
If you force me a reduced contrast, I can't adjust. If you give me black on white, I can always set my screen at a comfortable level for me.
With reduced contrast, you also might force me to increase the brightness of my non OLED screen, which will use draw more power from my battery.
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.
Another tool that might help: zooming texts so you don't need them so bright in dark mode. It might help reduce eye fatigue too.
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.
For example, take this photograph: https://monovisions.com/wp-content/uploads/2015/04/10-famous...
There is pure #fff in that photograph, but it's used very sparingly, so the overall picture is still pretty dark.
You are correct, there's very little pure black and white in the photo. Only a handful of pixels.
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.
Or it's because they don't expect anyone to sit and compute in an unlit room.
And HDR content can look really good if you have a high peak brightness.
I'd use comfortable lights and window screens myself.
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.
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....)
I've railed against it for decades.
Predicated on poorly-picked presumptions. (On the web.)
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.
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.
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.
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?
If text used to be black and now it's almost black so something else could be darker, some of the customers are going to be grumpy.
Give me black-on-white for text.
(It's also annoying on e-ink, as you might expect.)
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?"
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.
Honestly, if that is the case then the display is set much too bright.
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.
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.
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.
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.
Don't tint your black, black is one of the most amazing colors you can choose, there's a reason why it's such a classic.
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).
@-moz-document url("about:reader") {
body.dark {
--main-background: #000;
--main-foreground: #aaa;
}
}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.
I'd suggest stop walking and reading a phone at the same time.
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.
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.
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.
- Line art and etchings render wonderfully. There's a reason Onyx features these in its marketing and screensavers, they look truly delicious on the devices. See for example: https://blog.the-ebook-reader.com/wp-content/uploads/2019/03... and https://www.e-readerweb.nl/test/data/articles/images/lightbo...
- 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...
- Yes, there are some colour devices available. They're the minority, saturation is limited, and hue fidelity varies markedly from original art. See: https://www.liseuses.net/wp-content/uploads/2020/08/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.
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.
There are a few factors causing this:
* 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.
"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.
[0] https://twitter.com/marcedwards/status/1053519077958803456?l...
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.
--black: #113654
color: #555
On text that's supposed to be dark. Tires your eyes and makes reading anything long painful. But hurrrrr it's not black it's modern!!1.
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.
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!
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.
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.
Magazine piece on Albers and his work: https://www.schirn.de/en/magazine/context/josef_albers_inter...
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.
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'.
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.
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.
Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=24303042 - Aug 2020 (162 comments)
Design Tip: Never Use Black (2012) - https://news.ycombinator.com/item?id=17334627 - June 2018 (44 comments)
Design tip: Never use black (2012) - https://news.ycombinator.com/item?id=6581253 - Oct 2013 (63 comments)
Design Tip: Never Use Black - https://news.ycombinator.com/item?id=4357002 - Aug 2012 (210 comments)
Also somehow related:
Never Use White Text on Black: Astygmatism and Conference Slides (2017) - https://news.ycombinator.com/item?id=21367116 - Oct 2019 (59 comments)
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.
Note: the font you're reading right now is #000000.
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.
During the day, though, black-on-white all the way.
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).
Checks publication date
Ah.
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.
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.
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'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.
What is the natural color of language?
I just don't know, "never" is a big word. Black can be useful in kind of an absolute, floating in space, NOTHING IS HERE fashion.
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).
Objects in the sun's shadow are usually lit primarily by the sky and the sky is blue! Maybe this occurs naturally to others, but I never thought about it until it was pointed out to me in a photography article.
https://www.theguardian.com/artanddesign/2018/aug/21/holed-u...
I’m also not sure if this article is about print, screen, or both.
I prefer black on white for default on a page, the user can adjust their monitor or use a css patch to their liking.
I'm not talking about the absence of light, here - pitch black is something else - I'm talking about paint or other coloration that absorbs light.
Black 3.0 is one of these.
HSL and the like delivered better results.
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.
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.
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.
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.