Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Design Tip: Never Use Black (2012) (ianstormtaylor.com)
158 points by declanhaigh on Aug 29, 2020 | hide | past | favorite | 162 comments


Pure black is the correct color for text. Ink and paper manufacturers go to great lengths to make inks and papers with the darkest blacks and brightest whites, and there's no reason text on screen should be any different. Firefox's Reader View foolishly throws away contrast with gray text, but this can be fixed in chrome/userContent.css in the Firefox profile directory:

  @-moz-document url-prefix("about:reader") {
    body {
      background-color: #FFFFFF !important;
      color: #000000 !important;
    }
  }
toolkit.legacyUserProfileCustomizations.stylesheets needs to be set to true in about:config for recent versions of Firefox to load userContent.css

Some people complain about excessive brightness being hard on their eyes. They likely have their monitor brightness set too high. Most monitors can have their brightness set using DDC/CI (this sometimes needs to be enabled from the monitor's OSD). Most Linux distributions include "ddcutil". Install it and give the user who'll run it permissions to access I2C. In Debian, this can be accomplished by adding them to the i2c group.

Find out which I2C buses your monitors are attached too:

  ddcutil detect
Now you can change brightness from the command line:

  ddcutil --bus=6 setvcp 10 50
The first number after setvcp is the feature value to set. "10" is the standard feature value for brightness. The second number is the percentage brightness. I suggest picking values for low/medium/high brightness for each monitor, and binding a script that sets all them at once to the otherwise rarely used PrtScn/ScrLk/Pause keys. Presumably there is some way to do the same thing on other operating systems.


There's a huge difference in having a surface that's white reflecting your room color versus having a display blasting light directly into your eyes.

Computer screens and paper are not comparable, they're physically different and they're not really even used in the same fashion. Yes, you can read off of both but you get the point.

You sound like a person who uses a terminal with a black bg and neon green text and claim that as superior. Maybe to you but surely not for the majority. Most likely that's not even optimal for you but you've just convinced yourself of that.

I get the frustration you seem to carry towards designers, but if you're blaming _all_ designers because some might utilize anti-patterns or you just have personal preferences that differ, you're kinda missing the woods for the trees.

You do realize that the chair you're sitting on, device you're writing on and building you're (likely) in are all designed by designers.


> There's a huge difference in having a surface that's white reflecting your room color versus having a display blasting light directly into your eyes.

What's actually different between a photon of a given frequency that enters my eye after reflecting off a surface and a photon of the same frequency that enters my eye after being emitted from a display?

> You sound like a person who uses a terminal with a black bg and neon green text and claim that as superior. Maybe to you but surely not for the majority

BTW, in the CRT days green on black was actually objectively superior if you were using small fonts on most displays. That was because most displays would have slight misalignment of the red, green, and blue, especially near the edges, leading to color fringing around white things. For small text, the fringing could make text blurry and hard to read.

Pure green on black had no red or blue, so no fringing. Red on black or blue on black would have worked too, but most people find those much harder to read than green on black.


Because the light emitted from the LEDs of the display is focused towards your eyes by a very reflective film behind the panel while the light reflected off a book's page is heavily diffused due to the roughness of the paper.


The photons are not somehow "different" because of this.


> What's actually different between a photon of a given frequency that enters my eye after reflecting off a surface and a photon of the same frequency that enters my eye after being emitted from a display?

Nothing.

OTOH, the spectrum of photons emitted from maximally white and maximally black pixels on an LCD screen is probably nothing like those reflected from black ink or bright white paper under any realistic lighting conditions.


But "your room color" is not the same frequency as "display blasting light". The former will vary with time of day (some displays try to mimic that now).


I preferred amber monochrome, the ergonomic choice. Especially at night time.


Reading black text on a pure white computer screen capable of a decent contast ratio is more akin reading black text on tin foil with a studio light behind you.


Yes, you are of course right, technical limitations have had reasons in the past to use suboptimal solutions if we're talking about coloured pixels in CRT or LCD displays even but in today's world with our display technology there's no real reasons to use those other than personal preference.

About the photons, you could look into a regular paper sheet's or book page paper's albedo values and compare that to the light emitted from a led display, it's not even in the same ballpark. Why do you think people enjoy reading on an ebook reader rather than a normal tablet with a lcd/led display?

Artificial light strains our eyes way more than normal sunlight (or even indoor lighting) reflecting off of surfaces indirectly lighting everything for us.


> What's actually different between a photon of a given frequency

Well, none, of course. But the point is that white paper and a display's #FFFFFF probably won't send the same wavelength or number of photons into your eye.


> What's actually different between a photon of a given frequency that enters my eye after reflecting off a surface and a photon of the same frequency that enters my eye after being emitted from a display?

One of them gives me a migraine after 5 minutes. I assume because light being reflected off a sheet of paper gets weaker, though I'm not sure how.


I think I have the right to blame them for creating accessibility nightmare which are unreadable without modifying CSS for many people while claiming it's a good helpful thing.

> You do realize that the chair you're sitting on, device you're writing on and building you're (likely) in are all designed by designers.

ANY designer having gone through design school can tell you that low contrast text is a no-non.

So maybe we should just say that the people doing designer jobs without learning about the basics of color, contrast and accessibility are unqualified to do their job in the same way a architect is unqualified if they design streets to small for cars or similar.

Btw. if you have problems with to bright whites (which I increasingly feel is related to OLEDS but that's just a wield guss). Make the background non-white but keep the text black or very close to black.

Also just to be clear I think no on is blaming all designers but just such which do thinks like gray on gray. And then believe it's all okay because their expensive OLED display displays it still kinda readable (again I'm just guessing about OLEDS, I think I have to make sure to get my hands on one to check that).


I didn't talk about low contrast at all, I specifically mentioned WCAG2.1 as it has set minimum contrast values for certain text sizes which should be readable. I forced my previous place of employment to take WCAG AA-level as a minimum for every UI element and created a separate high contrast mode for our product which fulfilled the AAA-levels even though we weren't legally obligated nor had any customer ever asked for it.

In the example (yellow on black) I mentioned has too much contrast and actually hinders readability for most people with a normal visual acuity as well as certain types of impairments.

Designers are also the ones responsible _for_ all the accessibility features and standards set to help developers implement accessible solutions.

If you're a software engineer who cares about contrast and studies different vision problems to figure out solutions for example, you're a designer in my book.

This is why I also specifically separated aesthetic and usable design. The former is more akin to "art" as it aims to simply look nice and I don't personally consider it design as design is problem solving and bad design just creates more.

I've always said that if a designer or web developer doesn't actively hinder accessibility, it's already a win in my book. It requires someone to make the decision to slap a #fafafa shaded text o top of a #ffffff background, semantic html and OS default colors go a long way if you don't know better.


You'd have a really interesting conversation with an artist or designer if you asked, "What is the correct color for text?" instead of uh, just saying that the answer is whatever your computer draws as RGB #000.

That's part of what this article gives you, why it's talking about art school and not technology. Miscommunication - incommensurability of how to see the world really - is the pitfall when engineers are tasked with creating a subjective thing and asked to try to do something simultaneously functional, familiar and original.

Just put yourself in this guys shoes. Just like you are excited to share Linux display color control commands, this guy is excited to share a new way of thinking about black and dark shades that instantly expands your vocabulary - both for creating new things and understanding the decisions of others.

Anyway, the negativity of others in this thread, it's ironic because that's exactly the point of the article, really, that the pedantry gets in the way of being creative - or at the very least, seeing things originally.

I work with an artist daily. I appreciate and value his opinions that there should be no pure black in the creative product we make together. It elevates what we make above all our competitors. It's an extremely insightful perspective.


I don't see why I should care about the opinion of designers when they're the ones responsible for such anti-features as vanishing scrollbars and hamburger menus. RGB #000 isn't truly black, but it's always the best approximation of black available on a computer monitor.


What's wrong with vanishing scrollbar? I prefer them this way. The first thing my emacs config file does is to hide scrollbar.


It makes me waste valuable working memory remembering my position in the document, and the animation of it appearing and disappearing is distracting. I have a widescreen monitor so I have plenty of horizontal space already.


Even though I agree with you re: pure black text, I sense a lack of understanding that should be present here.

Design is always a trade off. Do you want more focus on content, or more information with less focus? Is your default setting more friendly to smaller or larger screens? Every person has different preferences, and every trade off has cost benefits you can run. Yet your statement here is very “black and white” (ahem), assuming everyone should think like you. That betrays a lack of nuance in understanding how design works.

In the programming world, you also have these trade offs, yet it’s easier to avoid thinking about them at times. Static vs dynamic languages are full of trade offs like this.

To avoid coming across as yelling at clouds, attempt to frame why it’s a trade off you prefer, rather than a platonic ideal others don’t see (because it isn’t).


Mine too, but I’m already familiar enough with Emacs that I don’t need it, and in general most things in Emacs are scrollable and you can recognize them as such once you’ve used it for a while.

It would not be the right choice for a default config, or in a context where sometimes things are scrollable and sometimes they aren’t. (This is often the case on mobile phones; if there’s no scroll bar, the only way to tell if something is scrollable is to try it, if you think to.)


It adds to cognitive load, now I have to hunt for the frickin scrollbar... mystery-meat UI if you ask me.


Discussion from two days ago: https://news.ycombinator.com/item?id=24293421


To be fair, we engineers also have plenty of UI war crimes to answer for :)


But do we claim to be the experts, authorities, and judges of UI design?

Well, ok, sometimes we do, but...yeah.


The smarter ones usually iterate based on user input.


To be fair, the smarter designers do too, but you don't hear about them because good design doesn't shove itself in your proverbial or literal face.


and some of the designs that you don't personally like were undoubtedly the result of iterating based on user input - what actually tests well with users is very often not what the sort of people who post on hacker news would assume is the best design.


Yeah, just to add:

and some designs come out of relentless targeting the impact of the bottom line at the expense of aesthetic or "pleasurable to use", some designs come out of snake-oil sales-people, etc etc.

Different populations, different needs/wants/desires/cultural expectations. This is what focused advertising is all about. You can create one interface and say "everyone must use and learn to love this one," and that can work well. You can also gain immediate appeal by creating "one interface for each population of potential users" and relentlessly target your designs for each of those populations. I don't think we've fully recognized it in software engineering circles, but I think a lot of what are producing today is really about creating different experiences for different populations when the core capabilities have been there, available for free or on extremely cheap computing platforms, for anyone to use, for decades.

I imagine that's fundamentally what the job of most software engineers is today: find the design that best matches the needs of the customer, and build a workflow for their needs.


Not just UI crimes either. I know of at least one that lost a company a couple hundred thousand due to clever engineering.


You’re asking why you should care about opinions that are different than your opinions?


There's no need to care about their opinions, but what's being talked about here is not opinion. They're basic principles of color theory that have remain unchanged for centuries if not millennia. They became principles because they work. What do you think is more likely to be incorrect -- the millennia old principles, or your unsubstantiated, untrained opinion?

I agree with your chagrin for vanishing scrollbars and hamburger menus, by the way. There ought to be a good term for designers who do the opposite of what good design does (which is make things which are usable).


> I appreciate and value his opinions that there should be no pure black in the creative product we make together.

Is this why the most fashionable websites are also the most difficult to read? I ask purely for information.


Aesthetic design and usable design are very different things. If the sites you're talking about are made by people who care more about making things look nice instead of being usable, then yeah that would be the issue.

WCAG2.1 has some great guidelines when it comes to color contrast in digital text and as long as those are adhered to, most people will have a near optimal experience consuming that text.

And yes, too big of a contrast difference is not great either. Just try to throw bright yellow on top of a black background, it's gonna hurt your eyes pretty quick.


Instagram's text color, the first but not the last I'll check, is "rgb(38, 38, 38)." I wouldn't characterize it harder to read than this website, which uses "rgb(0, 0, 0)", or easier to read than the NYTimes (the third), which uses "rgb(85, 85, 85)." Anyway, I would hardly characterize those as fashionable, they are some of the portals on the Internet. So maybe you're talking about a different site, or something, but certainly, among the most mainstream sites, there is a consensus to not use pure black in the font.


Windows distressingly has two completely different mechanisms and APIs for setting brightness: one that operates over DDC/CI, and another that does something else (I’ll call it Method B, not knowing a better name). External monitors use DDC/CI, internal monitors (mostly meaning laptop screens) use Method B. I have failed in any attempts to hook brightness keys in user space (like how on Linux you’d just intercept XF86BrightnessUp and XF86BrightnessDown); something steals those keys before they ever get to user space, and use Method B. And there is no user interface anywhere for DDC/CI adjustment: it’s only an API that you can call.

So the end result is that Windows users can’t adjust the brightness of their non-laptop monitors without third-party software, or reaching around the side of the screen and fiddling with the infuriating controls of the frustrating OSD interface. So almost no one ever adjusts their screen’s brightness at all, and almost no one of the remainder adjust their screen’s brightness to match conditions. And manufacturers have (understandably) decided that too dim is worse than too bright. So most people’s screens are genuinely painfully bright. So then people say “don’t use actual white” and “don’t use actual black”. And those that have calibrated displays end up sad.


hey, try ClickMonitorDDC: https://clickmonitorddc.bplaced.net/

It allows you to change brightness, contrast (and volume, never tried it), from the taskbar.

It works for a Dell and iiyama monitor I own, but not my Agon one, so YMMV


I found a freeware program ScreenBright a few years back and use it so that I type “b 0” in my command line to set the brightness to zero. (I tried it out to confirm that this DDC/CI thing would actually work, before I bothered delving into the Windows APIs to write my own CLI; but then figured, since it had a CLI, why bother? and just wrote a batch file around it that contains `@%~dp0\screenbright.exe -set brightness %1 -set screen 2 -set brightness %1` to do both monitors at once.)


> something steals those keys before they ever get to user space

The brightness keys could be managed by BIOS? If you can modify brightness during early boot, or while BIOS settings is showing, then there is a chance Windows doesn’t see those keypresses.


No, they’re being handled from within Windows, somehow—it shows a screen brightness adjustment popup thingy in the corner, same as it does if you adjust the volume by key. I think it must just be some driver or something consuming them and turning them into something else.

I do wish I could intercept it, not just for external monitors’ sake, but also so I could make it logarithmic or similar, like I did in Arch Linux + i3 with XF86Brightness{Up,Down} mapping and an xbacklight wrapper script. On my Surface Book, the smallest effective brightness change is 2%, and each 2% step between 0% and about 20% has at least as much effect as 40–50% or 80–100%, yet the seemingly-hardcoded behaviour is that the brightness keys just adjust the level by a flat 10%, which is what every platform does (OK, I can actually only directly attest to Android, Ubuntu from some years ago, xbacklight by convention and Windows, but I think the rest do it to), even though such a linear scale is obviously stupid and wrong. On my phone, two millimetres of adjustment on the left has about as much effect as the whole right hand side of the scale (several centimetres).


>"So the end result is that Windows users can’t adjust the brightness of their non-laptop monitors without third-party software"

Not sure what are you talking about. I can adjust brightness (and lots of other things) of my monitors just fine using their own buttons.What on Earth does that have to do with the Windows OS?


Please finish reading the sentence you’re quoting.


Yeah, guilty. Still not sure if it practically matters. Do they really need to adjust brightness every day?


If you’re in a windowless or heavily-shaded office with consistent lighting, probably not.

But if you’re in a normal house in a room that gets plenty of lighting from outside, absolutely. I tend to run my external monitors at 0% in the earlier morning, 20% in the mid-morning, 40% by the afternoon, sometimes up to 70% on a particularly bright summer day, and down to 0% in the evening (and I’d take it towards −20% at times if there was such a thing, their minimum brightness is nowhere near as dim as my laptop’s screen’s minimum brightness, which is even acceptable for use in a completely dark room; their 0% is its 25%, while their 100%s are similar). Leaving them at the 100% they came at would be awful, it’s a little too bright for my situation even in the middle of the day, let alone the evening.


>"If you’re in a windowless ..."

Yup. That would be me. My office is in a basement of my house and has been for the last 20 years.


The appropriate brightness for programming or browsing the web isn't the same as for gaming or watching movies. Samsung monitors have a dedicated button for cycling through brightness profiles. DDC/CI control is even better.


> Pure black is the correct color for text. Ink and paper manufacturers go to great lengths to make inks and papers with the darkest blacks and brightest whites, and there's no reason text on screen should be any different.

Is this your opinion or is this widely accepted as fact? I've read countless design suggestions to reduce contrast and avoid using pure black or white on an LED display. I'm curious whether there's research that supports either side.


> I've read countless design suggestions to reduce contrast and avoid using pure black or white on an LED display.

I have seen those suggestions too, but they seem to be just parroted off of each other. I have never seen a single one link to any reasoning or studies that support the claims of better readability. They all seem to say it because someone else said it in a game of design telephone.

In my personal experience, I find gray text on an off-white background to be very difficult and straining to read, and additionally, I don't think it looks good.

I can see some merit in reducing the whiteness and thus brightness of the background, but I don't see why reducing black to some lighter black or gray helps at all. Having text in a nice solid black or near-black with an off-white background seems reasonable to me. That matches more closely with reading things on actual paper, where dark black inks are possible but the background is not pure white. That leaves legibility in place and reduces background brightness.

It's possible this whole "reduce the contrast" thing has gotten off track, when to me at least, the goal seems to be to reduce the blinding background blasting you with light and not to simply reduce contrast.


> I have seen those suggestions too, but they seem to be just parroted off of each other. I have never seen a single one link to any reasoning or studies that support the claims of better readability. They all seem to say it because someone else said it in a game of design telephone.

I so wish I could find that research that once and for all debunked the "UX expert" urban myth that #fff + #000 = evil. It made me consider past mistakes and I go for all black on all white whenever I can. Doesn't hurt from a WCAG perspective.


I debunk your debunk with the following paper.

Rello, Kanvinde, & Baeza-Yates, 2011. Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics.

If you suffer from astigmatism you might experience halations or if you have contrast sensitivity, visual distortions.

https://dm-ed.com/info/contrast-sensitivity/


> Is this your opinion or is this widely accepted as fact?

Well, in either case, perhaps nobody should hard-code the darkness of text in their CSS but instead allow the user to set it in their browser?


Unfortunately browsers have lots of objectively bad defaults (e.g. h1 { font-size: 200%; }) so we have to decide which defaults we should fix and which ones we should leave alone.

I agree that the user should have browser defaults that they prefer, but motherfuckingwebsite.com still looks awful in most browsers.


it might be ugly, but it's easy to consume and the experience is way better than on "well designed" sites with user hostile design choices


>" I've read countless design suggestions to reduce contrast and avoid using pure black"

>"I've read countless design suggestions to reduce contrast" I would say that modern design suggestion often the opposite of usability/ergonomics. On many sites you now often see undecipherable light grey text on white background. It sure is soothing. It also sure is useless as many people who do not have perfect vision are unable to actually read it without blowing text size out of proportion.


Fortunately ultra-light (sub-pixel stroke width) grey fonts on grey backgrounds as a design trend has been receding again. Rule of thumb: The lighter the font, the bigger the face needs to be! Ultra-light is okay for a hero text that's literally 100 pixels tall, but never for body text.


Yeah, I don't buy it either. Books can be printed on anything a publisher wants, yet most books use a creamy paper rather than the whitest white they can get.


here is something with a link to a research. The examples used in article convinced me to avoid pure white and black.

https://uxmovement.com/content/why-you-should-never-use-pure...


Tony and UX Movement is chock full of bad advice, doesn't do proper research and can't take criticism at all. I would avoid it at all costs. Feel free to read his "article" "The Aesthetic-Accessibility Paradox" and "Why radio buttons and checkboxes can't coexist" and read the comments to those and see what I mean.


I think a parallel can be drawn to the loudness wars in music.

The user can easily change brightness of their screen just as the user can easily change volume of their music. But producers want their creation to stand out. Make their music a little bit louder, or their website a little bit softer than the rest.

In both cases the outcome is a race to the bottom and reduced dynamic range.

And finally, in both cases it's fairly inconsequential. Things get worse but only a little bit.


OP's comment sounds to me like they want to throw a compressor with a low threshold and high gain on top of their master and gave everything either clipping or gated. Screw transients, am I right?


Text is not music. Transients don't belong in text.


I don't enjoy staring directly at the sun as I do not enjoy sitting with my ear pressed against the speaker at a festival. Your senses are not meant to be either not stimulated at all to fully stimulated, there is such a thing as a sane middle ground.

Please do some research instead of doubling down on opinions you're presenting as absolutes.


> The user can easily change brightness of their screen just as the user can easily change volume of their music.

This is just not true.

100% (minus rounding error) of devices can easily adjust volume.

Phones and laptops can adjust brightness, but dodgy automatic brightness adjustment is the rule of the day. And basically no desktop monitors can easily adjust brightness (not because they can’t, but because OSes have frustratingly ignored functionality that has been standard for a decade or two; on-screen brightness adjustment is absolutely consistently painful enough to use that I disqualify it for the word “easily”—oh for the brightness wheels of the CRTs of yesteryear!).


>Ink and paper manufacturers go to great lengths to make inks and papers with the darkest blacks and brightest whites

That this is the top comment and yet no one has refuted it boggles me. I cannot think of anything I've read recently that uses bright white paper. Sometimes I see reams of bright white paper for sale for a few extra $. However if I'm printing a resume, it's on x% linen slightly off white. If I'm reading a book, it's on warm-colored paper. If I'm reading music, it's on even warmer colored paper- and dare I say it as a musician for decades, the stuff on bright white paper (a photocopy, or self-published octavo for example) is the HARDEST to read!


Even hacker news itself is black on a warm paper color


For monitors, http://www.lagom.nl/lcd-test/ is helpful for making adjustments without external calibration tools.

For books, paper isn't the brightest white; it's only copy/printer paper that got in to a ‘horsepower race’ for brightness.


Some people complain about excessive brightness being hard on their eyes. They likely have their monitor brightness set too high.

This, absolutely! Monitors usually come with an eye-searingly-bright default that's meant to look good in a showroom and wear out the backlight more quickly, not at all a good brightness/contrast for normal use. I set my monitors to 0 when they were new, and that was already very bright; now, many years later, they've gone up to 20-40 to compensate for backlight degradation, but are otherwise still more than bright enough.


The majority of text displayed on a monitor only uses a small number of pixels, which emphasizes the edges where it doesn't cleanly intersect all of the component colors of the white background. #000 on #FFF emphasizes the colorful artifacts. We don't control what monitors our users own. Taking a step away from the most extreme possible contrast makes our UI's look a lot less like rainbow bleeding failure on the uncalibrated 1080p 29" monitors commonly used by executives making software expense decisions.


Looking to have easy control of monitor brightness?

For Mac users, look at https://lunar.fyi/. There are a bunch of other options as well.

For Windows, look at https://github.com/emoacht/Monitorian


Wow, just today I learned I can control my monitor via software and it worked. All this time I've just dealt with the brightness since I game on it and use dark themes to mitigate the white flashing. Besides that it takes a while to adjust and my monitor's on a flimsy mount and so I hate to have to move touch it. I'm going to hotkey it and have a one-button solution now. Thanks to your comment and to OP's.


There are multiple blatantly obvious reasons why text on screen SHOULD be different. For one, IT'S NOT PAPER. Second, you should avoid blasting unnecessary light into your users' eyes. Third, bright screens consume more power than dark ones.


Only if they are CRTs or OLED screens, both a distant minority.

No need to yell.


Many years back, at the cusp of consumer internet taking off I owned a magazine company - we worked purely in print.

Pure black is often not the correct colour for text, unless it’s monokrome (“B&W”) printing, rather than CMYK (but more on that later, because B&W monokrome black is often not “true black” either).

If you are printing CMYK you rarely use key (“K” - black) on its own, but rather use a CMYK mix to build a black shade, to give a rich black (more M) or cooler black (more C) or balanced black - neutral but not stark. The different mix can really change the way a page feels - and the right mix on the right paper (“stock”) can make the black pop or muddy, and have a huge impact on readability. This is really important when you’re designing for print. It really does make the difference between someone continuing to read and chucking your print aside after a paragraph. Good print designers know how to build different blacks for different stock.

When you are printing in monokrome black you are really printing g a shade of grey, to a greater or lesser extent, determined by the absorbency of the paper you are printing on.

And, indeed, different inks have different qualities so some “black” ink for monokrome print maybe be built from various pigments giving it a slight blue sheen or a brownish tint under certain lights. Plus inks - and the paper substrate - are more or less reflective meaning they will behave and appear differently depending on the light conditions.

I loved working in print.


I have a very high sensitivity to light as a side-effect of medication.

Dark/black background with lighter text doesn’t bother me. White background with black text does.

Are you really going to tell me that I’m wrong for doing what is right for me because of your opinion?

The monitor only goes so low. And this works. Paper is very different to a screen. There’s a reason e-readers exist.

Maybe people should just do whatever they prefer/works better for them instead of insisting that light themes or dark themes are objectively better.


The frustrating thing about lowering brightness is that on a great number (probably the majority) of computer displays, lower brightness comes with lower contrast and color vibrance as a side effect of the pixels and backlight being separate layers in traditional LCDs.

Because of this, for me the biggest benefit of upgrading to a phone with an OLED display was that it enabled me to adjust my phone's brightness without such dramatic loss of contrast and vibrance. Unfortunately I don't think OLED panels will ever become practical for desktop monitors… they're just now becoming somewhat available in laptops and even then sometimes come with issues similar to those seen in early OLED phone screens. We're probably going to have to wait for microLED tech to mature to get this benefit in full sized monitors.


Why not? Large, high res OLED TVs are common (if expensive). Burn-in?


I'm not part of the industry or well-read on it so I can't well explain why, but if I had to guess this is due to the dramatically smaller volumes involved.

There's far fewer desktop monitors and laptops being shipped than phones or TVs, and the majority of desktop and laptop panel sales are tied up in basic office-grade econoscreens and gaming monitors focused on high refresh rates and low input latency. Midrange/affordable laptop/desktop OLED panels fit neither of these categories and as such haven't received nearly as much investment and R&D.


To find your profile directory, go to about:support

To only apply the tweak to the dark theme, you can do:

    @-moz-document url-prefix("about:reader") {
      body.dark {
        color: #FFFFFF  !important;
        background-color: #000000 !important;
      }
    }


> brightest whites

I which they would not, it's annoying when reading outside.

But I'm all in for the darkest blacks.

And yes I agree that if the contrast is to bright it most times you monitor which is generally set to bright.

Hm, maybe one exception might be OLED screens, but reducing the general screen brightness should still work.

If you are still convinced that it's to bright DO NOT make the black not black but make the withe less bright, preferable some subtle bright non gray color like for example hacker news does it.

That makes the contrast less strong without being a accessibility nightmare which requires people to open their web-console and modify your CSS.


This is bizarre and just completely and utterly wrong.

The first part is true... yes, obviously shadows aren't black.

But in the real world (including screens and pigments) nothing is black if there's a lighting source somewhere. The #000 on your monitor is just dark gray, because your black pixel is still being lit by nearby pixels, ambient light, etc. And the LCD component (or unlit OLED) isn't perfect black anyways.

Actual good graphic design advice is to aim for a comfortable level of contrast. Not too little, and not too much. Which is why most good websites don't use pure-black-on-pure-white, it's a little too strong.

But another big reason for not using pure black or white for backgrounds is that they allow you to use #000 or #FFF for emphasis highlights that really "pop".

But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense.


> But absolutely none of this has anything to do with #000 being "too black" that's "not natural". That's just utter nonsense.

It would be if that point was made anywhere in the article. Thankfully, it's not.

The article points are : - you are surrounded by black which are actually not black but rather dark grey with a significant amount of color mixed in ; - pure black should be avoided as it tends to overpower other colors in a palette ; - mixing an increasing amount of color to your grey as they get darker will make them softer and feels less dull.


> It would be if that point was made anywhere in the article. Thankfully, it's not.

The article literally says: "When you put pure black next to a set of meticulously picked colors, the black overpowers everything else. It stands out because it’s not natural."

Pretty sure that's exactly the point I'm describing. The author literally uses the words "not natural".

And my point is that the author's worries about pure black are irrelevant because #000 isn't pure black either. It's already just dark gray on any real screen, so there's no need to avoid it.


Well, it is not natural. In almost any literal situation you're not surrounded by black, but various shades of dark. As a concept it's foreign and thus, not natural.


Right, but the author is confusing the "pure black" you're describing with #000. That's the error.

#000 is perfectly natural. It's my unlit laptop screen, which is basically the same color as my black chair, my black printer, etc. So using the idea that "pure black" is unnatural is zero justification for avoiding #000 on screen.


#000 is your unlit laptop screen. But the designer doesn't know what color that is.

By having a very dark grey with saturation, like they advocate, they can (get close to) a saturated dark color that works with their design scheme, instead of something that is arbitrary based on your environment and that you're actively training your eyes to subtract from the image.


It seems like you're making the argument that no color palettes are any more natural than any other color palettes, since all colors exist in nature, but I don't think that's the point of the article.

You may be right that #000 is not actually pure black, because of the light reflecting off the laptop screen and other such reasons, but when looking at an image, our brain tends to compensate for these things. It interprets colors based on the surrounding colors in the image. Introducing pure black into a color palette without being thoughtful can throw off the balance and create a color combination that feels "unnatural", since it would be rare to see colors with that sort of contrast side-by-side in nature.


> Introducing pure black into a color palette without being thoughtful can throw off the balance

But my point is precisely that this is incorrect, that there is nothing special about #000.

In reality, let's say your other #888 color is giving off 54 units of luminence according to some measure. And maybe your #111 gives off 8 units of luminence and your #000 appears to have 6 units of luminence because of ambient reflection and diffusion. There is nothing special about those 6 units of luminence. You're still far away from 0 units of luminence.

> it would be rare to see colors with that sort of contrast side-by-side in nature.

This is also not correct. Our eyes interpret a gigantic range of contrast. What any screen can produce is a tiny fraction of that. We see far, far, far more contrast side-by-side in nature than we can on any computer screen.


We're discussing different things, I think. As someone with painting experience, I'm focusing on palettes and value ranges, and what colors and values when put next to each other feel the most pleasing and 'natural'. You seem to be focusing on the objective experience of color, how 'pure black' on a screen is not truly pure black, and how nature contains all the colors we experience on an LCD screen, and more. I don't disagree with your points, these are just two separate discussions.


In modern times it's hard sometimes to find darkness, but go on a cave out our in a woodland on a dark night: pitch black.

I'm in a city and walked down a side lane at night (new moon) and it was so dark I couldn't see my feet.

It's the contrast (seeing black next to light colours) that's not natural - but, I'm not sure how relevant that is.


But, if you’re out there in the country on a clear night with a full moon, the moon/background sky contrast is pretty close to #000/#fff


Why "not too much?"

I literally choose my apps on my OLED phone for which ones give me 000 and FFFFFF color schemes. Like this one (Materialistic on Android).

I recently bought a cheap, small LG OLED TV and do not know if I can stand my old 85" top of the line Sony LCD anymore.

I have a 4 year old Alienware OLED laptop, and any future laptop is going to be OLED too.

I personally cannot get enough contrast or a dark enough black for TV or computer or mobile use.

Maybe before presbyopia set in, I would have been more lenient.


Correction: unlit OLED black IS perfect black. If I open a 000 black image in a dark room and hide the UI, I don’t see my iPhone 11 Pro anymore.

That’s the whole point of OLED: each pixel can be completely off. There’s zero difference between a black screen and an off screen (at least visually)


That's not perfect black. The black of your OLED is still reflecting and diffusing ambient light. It's still just dark gray, just like any black object next to it.

"Perfect black" is something more akin to Vantablack. [1] Which you are not going to encounter in any normal setting.

[1] https://en.wikipedia.org/wiki/Vantablack


Contrast ratio itself is an insufficient metric, because it is ill-defined for emissive displays ("What's the display contrast of #111 on #000 on an OLED? - about inf:1" => "Okay, NEVER USE #000!"). It works in specific circumstances, but not as a general approach.

I think you'd need to define a sensible range of brightnesses relative to the viewing environment and then the brightness difference between background and foreground (in stops). The latter avoids becoming meaningless with dark backgrounds, because the brightness difference between a few cd/m² (~black on an IPS panel) and 100 cd is about the same as 0/m² cd and 100 cd/m², convesely, it really doesn't matter for perception if the typeface is 2 cd/m² or ~0 cd/m², unlike what the contrast ratio would suggest for some displays.


A honest question: why books do traditionally use pure black on white? Is it a matter of ink costs and they would also look better with a slightly lighter ink, or do different principles apply than on screens?


Two things. First, most books aren't -- the paper is gray-ish and the black is matte so under lighting it's more like dark gray.

Second, the contrast is limited to ambient lighting. Whereas the white on computer screens is often far brighter than a sheet of white paper nearby, which is why avoiding extreme contrast is even more important.


The books I own don't use actually white paper, with the notable exceptions of graphic novels and expensive textbooks. Most are a greyish beige. Inks aren't always a full-on black, either -- most are a very dark gray, some with a touch of brown.

Most books aren't "graphic design" -- they're humdrum utilitarian walls of text. Books like graphic novels, textbooks and coffee table books with color graphics are printed on white paper because they can optimize for color fidelity between design and production.


Books try for pure black inks to maximize contrast against a not-pure-white background. Most book paper tends to have a little yellow, a little brown, and a carefully non-specular texture. Art book paper tends towards glossy, bluish tones closer to pure white.


One analogy this makes me think of with respect to mixing and mastering within music production is the idea of headroom. You usually want to leave your levels low enough that the unmastered mix never goes above -6 to -3 DB, and in order to do that, you'll usually end up mixing a lot of your tracks significantly lower and a couple of tracks close to the ceiling. Putting something straight at 0DB is a no-no because you obliterate the headroom.


This might all be true for paintings, but on a screen, #000 isn't black. It is usually a dark gray, depending on the backlight and contrast of your screen. And even with OLEDs, it might be darker, but it isn't really black. So imho, no need to be afraid of black for screen design.

As for print, it depends on the process. Anything that composes colors from CMYK pixels will look ugly and blurry if you do not use pure colors e.g. for fonts at low resolutions or close up. Just compare black fonts and dark brown or grey fonts out of a color laser printer for an example.

So no, only avoid black if it is really black you are avoiding and if it doesn't cause other problems.


Something that tripped me when setting up a new monitor was dealing with also the software set rgb range (0-255 or 16-235). By default I didn't get true(er) blacks because it clamped from below to 16.


Black isn't the total absence of light in the first place. It's just a relative absence of light.

It works the same way for paintings, screens, oleds, etc. So when the author is talking about "black" they're using it in the same way that a normal person would talk about "black"--it's a very dark color.


In that interpretation, the authors point is even less valid. In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability.


I see and partly agree with your point, but to be fair to the author one interesting advice he gives is to use not only a less dark color but to choose a hue and increase saturation, so it's not just a "neutral" less dark grey.


> In that interpretation, the authors point is even less valid.

The author's point is quite valid. #000 is a bit harsh and should be used sparingly.

> In that case he just advocates substituting a dark color by a less dark one, wrecking contrast and thereby acccessability.

That's pretty dramatic... just by swapping out black for a dark color you wreck contrast? No, that's wrong.

Check out the WCAG guidelines. Recommended contrast ratios for body text are 3:1 (minimum), 4.5:1 (level AA), or 7:1 (level AAA). The linked article uses #113654 on #FFFFFF, which has a contrast ratio of 12.5:1, which meets the highest level of the accessibility guidelines for body text contrast.

Meanwhile HN has text #828282 on #F6F6EF with a 3.54:1 contrast ratio. Barely meets minimum contrast guidelines for people with good eyesight. HN even features some #AFAFAF text, with a barely-readable 2.02:1 contrast ratio.


>Meanwhile HN has text #828282

To clarify a bit... the #828282 is for some header info like story url domain in (parentheses) next the title, HN user names, relative timestamps, etc.

The main body text of comments which is the majority of content is #000000 total black and because of that, the high contrast makes it very readable. I hope HN never succumbs to fads and copies other websites that think it's stylish to use hard-to-read gray text on white or off-white backgrounds.


A screen is a good example where you shouldn’t use black.

Here’s a similar article with pixel art examples:

http://samkeddy.com/pixel-art-outlines-part-2-using-color/


That's very narrowly focused on pixel art. You're reading and writing black text right now, and it's much easier than grey on grey. Screens are an excellent place for black.


For text...but that’s not what the article is about


Well it seems like it is; the article's biggest demonstration of its rule is its blue text. (And it practically breaks it with a large patch of 2% brightness in the author's photo, which of course looks good.)


Is the K in CMYK black, though?

I had an HP Deskjet that you had to swap out the color CMY cartridge for the black cartridge, otherwise black was a dark green.

My newest printer is CMYK and the black is crisp.


CMYK doesn't have just one black. A couple examples listed here:

https://en.m.wikipedia.org/wiki/Rich_black


This is just bad advice. From an artist's perspective, folks just have to realize why they are making the choice. If you want a painting to look natural, by all means - avoid black most of the time. Black, like grey, is generally something that has color to it where a standard black paint really won't have the depth.

But not everything needs to look natural. Black text? Just fine. I do a lot of abstract art: Black works well. I'm not going to give up black ink linework any time soon.


His bottom line "when you find #000000 in your color picker, ask yourself if you really want pure black. You’re probably better off with something more natural. And if you’re feeling adventurous, try staying away from the left edge of the color picker altogether" is much less radical than his title "never use black".

I think this more subtle statement is fair advice to beginners in design, who might sometimes make an unreflected choice of black or not be aware that shadows aren't just black.

So in my opinion it's probably bad advice for more experienced artists like you, but it might be very helpful advice for somebody else.


It isn't helpful, though. It creates false rules for folks, and his conclusion is false.

It doesn't take long to explain where such rules came from and the effect they have. He's just parroting an "art rule" that isn't and then explaining some of his own process while acting like it is a hard-and-fast rule. I should mention that this "art rule" is the most commonly repeated "art rule" that folks repeat. I've had this conversation before.

(Seriously, I'm sitting here from the side of helping others people do art when they are a beginner, and have for some years. I've taught a weekend art class for children and have been making art since I was young - I started oil painting before I was 10. I'm over 40 now).


> His bottom line "[...] You're probably better off with something more natural. [...]"

The point is that this is false. In the vast majority of cases, you are not doing purely non-functional visual artwork, usability matters, and naturalness (or pretentions thereof) is undesireable.


Great minds, etc.


I agree with you mostly - it’s bad advice for people who know what they’re doing or have a specific reason for doing it, but it’s a good rule of thumb for a beginner or for someone who doesn’t have time to master design work who nonetheless does it frequently, like most small-shop web developers.

“Don’t use the flash on your camera” would be a similar rule of thumb for beginners, even though there’s lots of great flash photography and there are many circumstances where you’d have no picture at all without the flash.

I’d wager 95% of people probably go through their complete lives without ever thinking about how color works in visual media, and I appreciate posts like this one that may crack a few of those nuts.


>> Here’s a bit of a contrived example… Dribbble has a pretty awesome feature that lets you search for shots by color. If you search for shots with pure black and shots with “real black” which ones feel better? Not the ones with pure black in them.

They both look fantastic on my new matte screen laptop in 2020. That's why updating your assumptions on the regular is a good idea. It's only 8 years later and this is already getting out of date.


A bit of a tangent, bit where have you found a matte screen laptop recently? I much prefer them for handling glare, but glossy screens seem to have taken over completely.


Lenovo ThinkPad X1 Carbon and Extreme laptops have anti-glare options for the display: https://www.lenovo.com/us/en/laptops/thinkpad/thinkpad-x1/c/...


https://www.bhphotovideo.com/c/product/1560979-REG/hp_3h662u...

I don't know why it says it has a touch screen, but it doesn't have one. The price premium over the 45% NTSC/250 nit version ("Standard") reflects the better light and color, not a touch screen.

The performance is good. I threw 6 Wavetable instances at it in Ableton Live before I admitted defeat. AMD set a new standard with the 2020 mobile chips. The only downside is I haven't had a matte screen in ages and forgot you can see the matte diffuser if you really look for it. But every single color except #FFFFFF is brilliant, and even that is fine. Off-center viewing angles can be a little funky even with the privacy screen off, but it's fine once you get used to it.

Buy another 8GB stick of RAM to fill the second slot to make it dual channel. It opens with a Phillips head screwdriver. HP posts service videos: https://www.youtube.com/watch?v=gxMMjSF4QFw


The new XPS 13 has a good matte display that's not too matte and not too glossy for me, you might want to check it out.


I find matte screen protector to be quite a good option, since you don't have to sacrifice the robustness and aesthetics of thin frame glass screens.


Personally, I just put on a matte screen film on my glossy screen, and that works great for me.


HP EliteBooks. For convertibles even a matte and touch option.


Most Thinkpads are matte or have an option of matte.



The argumentation basically boils down to the fact that black induces too much contrast with other design elements. That's because those were not made with such context in mind.

If you look at the metro design language as used by Windows Phones[0] a few years back, this worked perfectly fine, was pleasant to use, and very gentle on phone batteries.

[0]: Random example: https://i.pinimg.com/originals/63/b6/bd/63b6bd3d59cc3f65782b...


Black is beautiful. You get this bad advice in art school to not use black from some instructors who are almost religious about it. When you study great painters from the past, like Sargent, black was an essential color on their palette. Frazetta made stunning use of pure black.


Like all things in art, chiaroscuro has fallen in and out of fashion over the centuries. That said, things have undoubtedly accelerated - we cycle through trends more quickly today.

At some point in the early 90s, songs were either soft, or they were loud, and it gave Nirvana a beautiful opening to dial that contrast up to the max.

The moment all our websites become shades of gray, some rebellious designers will buck the trend, create stunning interfaces with pure blacks and bright whites, and the cycle will begin anew.

These sorts of absolute "rules" like "don't use pure black" are silly, of course. We have to have some understanding of the context: Is this a website for marketing purposes, or something which must be read for hours on end? On what kind of screen is this being viewed? (LCD? OLED? E-paper?)

But even if the rules of thumb are silly, they're still important to learn - a good artist has a deep enough understanding of the rules to know when to break them.


Yup, it's more like.... "are you REALLY SURE you want to use pure black?"


Isn't the instructors advice relevant to student artists though. It's like 'never use goto', until you understand your craft as a master then it's useful advice.


Do use black. Use whatever gives you high contrast, to start with. Pretty != usable.

Not to mention that staring at a screen that is basically a light bulb pointed at your face is bad for the eyes. Anything that reduces the amount of light you're bombarded with is good.


What if you're designing for OLED panels, where black is a stand in for "pixel off", which saves power and can help to hide bezels or (as with the default iPhone X Wallpapers) a notch.

Sure, it's not trivial to get right, and it should definitely not be used outside backgrounds, but never is a harsh word.


For accessibility, please use black text. Just look at Hacker News and grey text on bone background. It is not good for those of us with vision impairments.


> Black overpowers everything else.

Exactly that's why there is one single wide spread place where black is the default, one place where companies probably could have saved money by using gray but didn't.

And that's text.

Not titles, not headlines or other similar text based constructs but boring continuous text.

Another thing well known to be important about text is readability.

But one companies designer had a wonderful idea to use gray text on gray background and do so at a place which works as a model for other.

And now it's everywhere.

It's annoying, it's exhausting and it's drives me mad.

Luckily the designer of this page knew what he did.

He used dark blue, which has a strong contrast and can be mistaken with black when sleepy.

But you who made low contrast gray on gray a thing, know that I don't like you as you have cause me many troubles ;=)


The problem is, people misinterpreted it in all possible ways, the result being low contrast between the background and foreground text you can find everywhere. The second culprit after the font being too small.


The popularity of “pure black” themes for apps on OLED screens is the biggest counterpoint. When designing dark mode for mobile, please use #000.


This works well for static screens like ebooks, but scrolling text on a pure black OLED background causes smearing because it takes longer for the pixel to turn on than to change colours. This effect is especially noticeable on my phone at low screen brightnesses.

On Android, many apps actually have three colour themes: light, dark, and black, where dark uses a dark grey background.

I also like how Samsung One UI handles this, where any text is on a frame with a grey background, but everything else has a pure black background. Example here: https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/...


Reducing blackness of text to color is a mistake. Effective perceived contrast really depends on weight, size, tracking and leading. Same color looks darker with heavier font and less contrasty with thinner type set more speciously. Compare body text in Swift docs in Safari (uses macOS system font stack so may look differently on other systems) and Django docs for an example.


My idea for making pay websites work is that you always serve all articles, but those who pay get a much better rendering of the text.

If the Economist lets me read all their articles, but it pink on gray comic sans text, I get a chance to become hooked on their great articles, and a reason to upgrade.


I love opinionated esthetics like this. They're like schools of thought. Back when I did user interface design and technical writing, I would sometimes consider black design elements, like doing the squint test to see how headings balanced body text.

FWIW, physically printing black can be very interesting. "Rich black" includes the other colorants (cyan, magenta, yellow). IIRC double black is having more than one (lithographic) plate with black. Really subtle stuff that you don't notice until something seems wrong.

https://www.prepressure.com/design/basics/rich-black

Then of course there were many partisans of the misc suppliers of black ink, each claiming superiorities.


This article is so true. I really have trouble reading white on black, or differentiating different shades of black and gray, it all blends together, further exacerbated by using a low blue light setting on my monitor.

This is something that worries me about the trend towards dark modes and often complete lack of light mode alternatives (Steam). And as others have mentioned, the complaint about light modes being too bright is often a brightness setting issue and not a design issue.

There was a trend a few years back of using really light text colours on white, that's awful too. We need to respect the rules of contrast before what may "look" appeasing to the designer.


2012 tag is very fitting. I remember being bored by all the off-black designs produced back then (2008-2013?). It all looked mushy and spineless.

When The Verge came on the scene in 2011, they showed just how pretty the proper use of black can be.


If you are in a room with no light sources, shuttered windows, what colour do you see? I would call that black.

Sure, it's rare to be in such a setting nowadays (at least your cellphone indicating it's charging will be there, or there'd be stars or moon outside), but I think caves are perfectly natural, and you get pure absence of light there. Or 10km below the sea level.

As others have pointed out, you rarely even get pure black, especially with text: on top of reasons others have mentioned, displays use subpixel rendering to make an illusion of higher dpi (similar techniques are employed in the print industry).


There is nothing wrong with 100% black. It's good to understand the author's reasoning, but better to regulary break one's self imposed rules. Design doesn't have to be smooth all the time.


In ye olde days, print designers avoided pure black because it didn’t print well. Sometimes you’d put a light screen of blue or red over it so it didn’t look dead.


Design tip: There is no such thing in the real world of materials and displays as pure black or pure white.

Even if we had pure black and white, the real environment of the user would tweak the white balance.

The same design or page, taken from a dark bedroom to an office to bright sunlight will range from unusable through fine (and maybe back again).

So a designer can say #000 against #fff is too high-contrast for some environment, but some users will be in environments where it is not.


Is this a good place to complain about the choice of colour in KDE's konsole and threaten the developers with physical violence? https://stackoverflow.com/questions/38277542/minicom-black-b...


My computer is black. My keyboard is black. My mouse is black-ish.

Many beautiful things are black. Like a grand piano, or its black keys.


Take regular photos of these things, and you’ll find that they’re not black black.

This article is specifically about the blackest black possible on screens.


Reminds me of an artwork that was specifically created to be the "blackest" possible black. And a man fell into it ... [1]

[1] https://www.theguardian.com/artanddesign/2018/aug/21/holed-u...


My monitor when turned off, is also not black black. So the blackest black possible on my screen is around the same color as these other black things.


Yeah, but the point here is that everything’s relative: #000 is the blackest black possible on screens, so within the scope of the screen if you use it you can’t get anything blacker. Within the scope of the screen, the items you describe won’t be #000.


Design Tip: Never say never. Decide what's appropriate. Rules change in different contexts.


#000 is the correct color for backgrounds on articles, and #fff is the correct color for text on that background. I wish I could make everything have an OLED pure black theme, but sadly many apps use gray, very annoying.


I really don't dig the dark blue text. Historically that's the color of HTML links.... just make it black, everyone's used to it already.


Is the Facebook friend request screenshot intended to show what happens when you have a tendency write long, detailed articles about the color black?


User: selects dark mode

Website: shows bright gray

User: screams


Design tip: don't listen to designers who talk in absolutes.


The text on this page is a little hard to read. It could use more contrast.

Black?


Is that why I prefer the iPhone design with a white front cover until iPhone 8? This is by the way also much easier on the eyes when reading because it reduces contrast, thus avoids ghost images.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: