Several designers pointed me to Ian Storm Taylor’s article, “Design Tip: Never Use Black.” In it, Taylor argues that pure black is more concept than color. “We see dark things and assume they are black things,” he writes. “When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.”
Taylor was correct. The problem is applying it badly. You can back off from absolute black and white while still having good contrast. This is especially true for dark mode.
The author later compares things to newspapers, which are traditionally black on white. Except not quite; newsprint paper isn’t bleached white, and I’m guessing the ink isn’t quite as deep black as it first appears, either.
More importantly, there’s an important distinction between newspapers and computer screens. Newspapers only reflect light around them, while screens give off their own light. This means screens can be significantly brighter than the environment around them.
That’s why dark mode works so well. It keeps the bright points on the screen to the parts you need.
Pure blacks save power on AMOLED screens though…
Thank you. A long overdue article.
I’m currently fighting with my main software. It uses gray on gray, a small font you can’t change or resize, and highlights important messages with weak red and green text that I cannot see as “non-gray” due to the fonts size and thin-ness. So it is hard for me to find the few important lines in maybe twenty pages of output.
Ignore the fads and go back to the typographic principles of print — keep your type black, and vary weight and font instead of grayness.
Also provide a dark mode or make sure automatic dark mode transforms work.
Also provide a good base font size and do not use serifs for body copy like the article.
Why not serif body copy? (looks at most newspapers and books)
Print/paper should use serif, screen usually san-serif (with few exceptions), though it is getting more contested nowadays, due to better screen resolutions in general.
But it has to pop…make it pop and grab the reader! They need to SEEEEE the offer and hand over their money. Bigger please, make it bigger and pop even more. We don’t need white space!
My browser is set to override the colour scheme of all pages I visit. It breaks the odd site that doesn’t know how to present image content correctly, but I consider that an acceptable tradeoff. It also forces a specific font and minimum font size.
Do you use a browser extension for this? Can you share it? Thanks!
No extension—even Netscape 1.0 had most of this stuff built in. I use Pale Moon as a primary browser, but the settings required still exist in modern Firefox, under General > Language and Appearance > Contrast Control and General > Language and Appearance > Fonts > Advanced. Note that although the font labels may say “Serif” etc., Pale Moon at least doesn’t care what you put there—you can set “Serif” to a sans font if you like, or vice-versa.
Of the Chrome-based browsers I have lying around for work and emergency purposes, Vivaldi has the font settings under Webpage, but doesn’t have full webpage colour settings (although you can force a dark theme, which might be enough). Chromium has the font settings under Appearance > Customize Fonts, but lacks anything that looks like useful colour settings.
If you’re looking for browser extensions that will restore the colour-forcing functionality for Chrome-based browsers, “Accessibility” is one category to look under.
Ironically, I had to turn on reader mode to read his website because the black text on white background is just too harsh on my eyes. My reader mode settings have a contrast ratio of 6.16 according to the site that he links.
A lot of that is also a function of displays.
Everyone and their mother want ridiculously bright displays with high contrast because we are all afraid of (I will never feel comfortable typing this without an awkward preamble) crushed blacks and so forth. Most people have no fricking clue what a “nit” is but you are more likely to know how many of those a display has than the actual resolution because that is what is put in the copy sent to reviewers.
And when your display puts out brighter light than the bare light bulb in the room… suddenly a white background is REALLY brutal and everyone jokes about getting flashbanged.
I hate bright screens. On my phone I used the accessibility options to set up a trigger to reduce white point, turned it down decently far, and it’s easily the best QoL adaptation I’ve ever made re: screens.
Only downside is it’s very difficult to tell what is in darker pictures. But because it’s on a trigger I can toggle it on and off very very easily.
I genuinely wish I could do the same thing with my tv with just a simple trigger… I know I can alter the brightness and contrast and stuff but I’d have to mess with so many options, spread across so many sub-menus (fuck you, googletv OS, you suck super hard. Whyyyyyyyyyyy are there multiple settings menus???), to get it anywhere near what I want that it’s not really worth doing (I just crash it down to zero brightness, it’s adequate, I guess, but it’s no white point reduction…)
and the whole website is pressed against the left side which would be alright if we would still use 19" 4:3 CRTs at max.
So my browser’s reader theme is at black background (#000) with white text (#fff) and I just reduce the backlight at night, while keeping the windows open in the day time.
Similarly, I reduce mobile brightness indoors, but keep it at full, when using maps while riding.
When using an LCD monitor, it is beneficial to be able to reduce backlight brightness instead of reducing the colour value in software.
There’s a widespread movement in design circles to reduce the contrast between text and background
This was the trend circa 2012 too, at least I recall Microsoft’s pages and software becoming less legible. Not sure if I got used to it, screens got better, or it went back to higher contrast.
I always saw it as a pendulum swing in retaliation to the neon naughties and Web 2.0 web design trends.
Let’s just build a new web based on the old BBS terminals, and 16 color images. Too much graphics was a mistake.
Welcome to Gemini!
