The example from the article is #F2F2F2 and #222222, which has a contrast ratio of 14:1, which is nearly three times the WCAG guidelines and better than most websites. I think it would be instructive for people who think they hate off-black and off-white to try reading #FFFFFF on #000000 text and compare their reading speed to #F2F2F2 and #222222. I believe (but can't prove) that most of the hate is for contrast ratios below 10 being falsely applied to higher ratios.
People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.
I worked in the nuclear industry for several years building control room consoles. Use near-black and near-white was dictated. Neither programmers nor designers had a say in the matter. It was not a matter of "opinion". Human factors researchers made those decisions.
In fairness, that's also what the article is saying: near black and near white.
Do you have any links to the studies by those researchers? My own understanding is that yellow-on-blue is traditionally meant to be the most visible option, but that there's not actually a huge amount of evidence to back this up, and it's more tradition than anything else right now.
I do not understand the first rule. I want pure black backgrounds, even if "you" wont give me pure white foreground letters. This has become more and more important as I have aged. Maximum contrast please. Especially on OLED.
> Too much contrast has never been an issue, which is why no one uses flux or dark themes, right?
f.lux is for increasing color temperature. Dark themes are for reducing the ratio of bright to dark. Neither is primarily intended for reducing contrast.
> It's relatively easy, by turning #ffffff and #000000 both closer to #ff0000, or in other words, by reducing the contrast.
Yes, but decreasing contrast is an unfortunate side effect, not the goal. This is like saying that the purpose of a light bulb is to increase your electricity bill.
> Dark themes (excluding amoled themes) exist to reduce the perceived contrast between the screen and the environment.
Yes, but not the contrast between text and background.
I actually have trouble reading the text on that page but not on HN. When you have actually bad eyesight you can easily "see" what works and what doesn't and that page is bad.
The main problem is that the worst consequence of not following this rule is still perfectly usable, while the worst consequence of overdoing it is the
font-weight: 300, color: #555
nightmare that we see everywhere on the modern web.
So lets just not.
Also, a backlight-based screen is not the same thing as a newspaper, where you can easily increase contrast by improving your light source almost infinitely. I can always decrease my screen brightness quite a bit, but there is an upper limit of increasing it.
The opinion that something is wrong with your display if black text on white background is too bright strikes me as odd. Would one expect that #f00 or #0ff to be comfortable as well? Asking the monitor to blast the highest light intensity possible across the screen clearly risks being uncomfortable in many light conditions. Monitors emit light, they aren’t passively illuminated like a paper. If you reduce the brightness to the point where #fff is comfortable across the screen, there’s no room for bright details, that should exceed the brightness of the bg. So many programmers use dark mode to reduce eye strain for a reason.
That said, even though monitors like laptops and phones increase brightness, that’s not enough when in direct sunlight. There, black in white would make sense, but of course comes at a cost of reducing range (it’s physically impossible). Screens that are incapable of keeping up with direct sunlight should probably increase contrast in those conditions.
If you are making a video game or movie and you wast super-bright stuff on the screen, that's what HDR is for.
(Incidentally I'm a big gamer but I generally prefer to turn off HDR because it hurts my eyes. It's actually really annoying. I don't want certain parts of a scene to be extra-extra-bright.)
If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately. The vast majority of text I look at is already black-on-white. By reducing the contrast of your text you're assuming that everything else I look at is blinding me and somehow you're saving me with more appropriate contrast. No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
> If you're giving me text, please don't second-guess whether I've set my monitor brightness appropriately
Why would #000 text on #fff be the correct way? It’s common but not at all ubiquitous, there’s no standard for this.
> No, I've set my monitor so everything else I look at looks right and what you're showing me is too washed out.
If you don’t like the extra range you can easily increase the contrast and reduce the brightness, but the other way is very destructive. You can go from #def -> #fff with a simple transform but you can’t go the other way. And if you use 100% of your range in a single element, you have no room for using color, shadows and background, which is a critical tool for all complex design, including old school Windows and Mac UIs from the 90s.
That said, there should be better APIs/standardization and monitors should be better at adjusting brightness and contrast to lighting conditions. I don’t mind at all that people change to whatever suits them, in fact I wish it was easier to use things like reader mode (which ad-tech has been fighting against, hard). Lots of web sites suffer from all kinds of design issues these days, sometimes too low contrast, even for me.
People over the age of 30 can mostly read books and newspapers just fine, and when they can't it's rarely the fault of the off-white paper and slightly faded ink.