> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
When viewed through the TangledWeb publication,we have set it to a dark mode, which is probably the best contrast possible per how Medium is configured.
Well he says medium uses grey text, yet this article has a purple background which is clearly not a medium default - so obviously he had some control and made this unfortunate choice.
They present the fact that it's hosted through Medium.com as if that was an immutable law of nature. Other websites exist.
By hosting the article at Medium.com, despite their objections to how Medium.com constrains the article's appearance, the author is demonstrating that they don't consider their own argument particularly persuasive.
I still think it's worth pointing out. I do believe this is the first purple article I've seen on medium, so I don't believe purple is a limitation of the platform.
It's effectively the author's personal website. If he can change the A record for his domain name, he is in control. That he might not want to do this is a different matter.
If I chuck your vase at a wall, I don't get to blame the inevitability of inertia for the resulting mess.
well not quite: before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
Further, Medium prevents their users from selecting black text as a choice. While Medium’s “Fischer-Price-simple” content creation is easy to use, it is also extremely limited, and fails in accessibility in areas beyond color. Perhaps this article can serve as a wake up call regarding this issue.
please stop forcing dark themes, reading white text on dark background is less readable so at least default to the user global preference cf https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
I'd be nice to see stats on the level of user engagement on black vs white texts, I assume the user probability to stop reading earlier when white is much higher, for me it is often a no go. Any scientific study out there?
I have astigmatism and work as a software engineer. All my colleagues use that Dracula theme for everything. I can't, because it makes the writing blurry.
as a counterpoint, this trigger me for natural language text but much less for code on an IDE, I don't know why but yeah prefers-color-scheme should be assumed as human rights in 2022
It is likely that this problem can be fixed by changing (by a lot) your monitor gamma. Text anti-aliasing is typically performed on linear brightness space, then adapted to the typical gamma of a monitor for black on white text. Many font renderers show white on black text by doing a simple operation like "255-x". This does not give at all a correct anti-aliasing due to the non-linearity of the gamma, resulting in badly blurry fonts. You may try to mitigate this error by un-doing the bad gamma, at the price of losing some brightness and contrast.
> so at least default to the user global preference
I'm actually kind of annoyed at prefers-color-scheme, and the inability to control it as a user in my browser.
I have my Windows set to dark mode because I prefer how Explorer and the rest of the Windows UI looks in dark mode, and I want my OS chrome to be less distracting and to just "fade away". However, all web browsers see this as a signal to tell every website I would prefer them to be in dark mode also, which is not correct! I wish I could set chrome itself to prefers-color-scheme: light (without having to use the dev tools on every website).
So change the website theme to light mode? I use dark mode, and am happy when websites are served in dark mode (and I think the majority are this way). I think you're likely in the minority, and the easy fix is just to switch the websites you use to light mode.
> the easy fix is just to switch the websites you use to light mode.
The trouble is that `prefers-color-scheme` is set at browser or system level. In order for a website to use a different colour-scheme, then they need to add functionality with Javascript in order to be able to load different styling at user request.
I wish there were some URL-based rules you could set in the browser settings (I expect there are addons to do this, haven't looked though!).
What if the website does not provide a toggle to control to control this? I wish there was a browser preference to control prefers-color-scheme (which it sounds like new FF does!).
I don't really care that I'm probably in the minority of users who think or care about this. It doesn't make how I feel any less valid.
Firefox lets you control that, at least since the latest Developer Edition (101b7). Under Settings, General, Language and Appearance, one can choose between the following:
I'm convinced that most people that complain about light themes being blinding either don't have enough ambient light in the room or have their brightness cranked too high (likely as a counter to the dark theme they use).
I was in student accommodation recently and noticed that it didn't have any reading lights at either desks or beds, neither as part of the standard finishing nor added by the students, at least in for the two or three rooms I saw.
My problem with prefers-color-scheme is that there's no way to distinguish between “unknown preference” and “prefers light mode”. I'd like my website to be dark unless the user explicitly requests light mode, but the web people decided I can't do that.
I don't think this is technically true. You can do `prefers-color-scheme: light` or `prefers-color-scheme: dark`. IIUC if there is no preference neither of those should evaluate to true.
That being said I think most if not all browsers will always answer true to one of those.
Unfortunately firefox with enhanced tracking protection claims that the user WANTS a light theme instead of indicating no preference - yes, the spec has no no-preference but a) this means the spec is broken because there is no equivalent setting to not implementing the spec and b) web specs are defined by browser vendors and Firefox used to have a no-preference value for this. In general, desktop browsers will also often indicate prefer-color-scheme: light if the user has not actually made an active choice - either as a default in the browser or based on the default system theme. This unfortunately makes prefer-color-scheme: light not actually carry any useful information so there is currently no way to have a dark theme by default but provide a light thome for those users that actually want it (you can only do the reverse).
Only terminal-based websites can rid of that but the price is getting rid of non-monotype fonts as well. Medium, tangleweb, HN - all of that are not using black text. Neither rest of the web does unless some "this is a website" [1] or maybe Stallman's website [2].
We should have a HN guideline to add (Medium) to the title when the URL itself obfuscates that fact.
Anyway, I agree with the article. I find myself resorting to reader mode more and more these days partly due to crummy web fonts, partly due to janky JS and bloat, and partly due to unreadable color combinations.
Are there any effective browser extensions to intelligently prevent things like a "Subscribe to our newsletter" popover?
I'm trying to think how i could tell uBlock origin to intercept any element with a high z-index which has it's ".display" attribute changed only in response to a timer or a scroll event.
In firefox i have the "I don't care about cookies" plugin and i genuinely forget that noise exists on the web until i use another browser and it all comes flooding back. I'm hoping there's something similar for this endemic cruft the web has been filled with.
Reader mode can be useful. NoScript can be useful but can also be painful.
Edit: it's a subscription. No, thanks. I much prefer the crowdsourcing model, which allows the entire world to have it (and contribute to it), and not only those who can pay such prices (that are quite expensive in most of the world, including where I live).
The problem I would think is the overlap for this of users who want jank removed from web pages and those who would choose to pay for it if optional is small.
Another subscription service and software you can't actually buy is much worse than the annoyance of pop overs. Does it atleast keep working without updates after a year?
I think it's about the websites you visit. If you only use "tech-y" or smaller niche websites you don't come across them. But if you visit websites like from the big news media or even niche websites that are not in English. There are filters for all major languages but there are certainly fewer skilled filter writers with time and willingness to write them in other languages.
There's also a gap of websites that are big enough to have this corporativist behavior of putting annoying... objects in their webpages, but not big enough that enough people visit to the point where it's likely that one of them will write the script.
Especially because, like, I do write some stuff for userstyles and userscripts sometimes, but I won't publish them unless I think they'll be useful for at least a small group of people, which I never seem to think will happen for websites in my mother tongue for some reason.
- Globally blacklist malicious JS (and other features) within uMatrix.
- uBlock Origin's "Annoyances" filter is highly effective.
- UBO's element remover tool is also quite good, and permanently removes misfeatures.
For added leverage, on desktop, I use Stylish to write custom CSS rules that assign annoyances the CSS property "display: none !important". This is typically on a site-by-site basis, though there may be some common targets that can be addressed either globally or with a standard stylesheet applied to multiple sites.
All of which is a pain, agreed, but less of one than not doing so.
I used to dive into the console and start removing stuff and even went so far as to write a bookmarklet that tries to identify and nuke anything with fixed position and reset the height to auto on body/html but ... if someone's going to be that user hostile it's not worth my time.
When this happens I'll copy the url, close the tab and paste it into archive.is.
Yes. I use tamper monkey to write scripts for sites I visit frequently that have annoying popups, content blocks (like chat) and link-jacking (streaming sports sites).
Yeah, the best solution is NoScript. It's not too painful as you tune your whitelist. It sucks, but it's better than the frigging popups. Even works well in Firefox for Android, which is a game changer.
It's a one click removal. It's nice because I dont have to search for the nearly transparent x or tiny no thanks, I can just muscle memory to the same button in the toolbar of my browser every time.
I know that such prompts are not technically pop up windows, but they are in spirit. I really wish the major search engines would penalize sites that use them, or that we would get browsers that started blocking them.
Soft paywall for some random guy's blog. Uses 40mb of artisnal javascript to display a basic text document with a few images maybe. Hostile to the open web.
Note that it does not include custom domains or image uploading on the free plan, but you can upgrade for $29 (lifetime), which gets you:
Custom domains (this is time-consuming)
Image uploading (due to the cost of hosting images)
Email subscriber lists (since it gets complicated)
Beta features (since they aren't ready yet)
You can upgrade for $29, flat.
The editing interface is just a textbox where you paste markdown; doesn't seem there's a github integration or anything like that, which is too bad.
If any young entrepreneurs are reading this, one of the few things I'd actually pay for is a web browser that worked like reader mode, but all the time.
This existed and it was called Opera. It had the ability to replace the style sheet on a site with a custom version, one of which was a high contrast reader mode. Opera split into two, and the current version doesn’t have this feature but maybe Vivaldi still does?
Medium is (so far) the ultimate manifestation of "Eternal September".
It doesn't just save people the technical effort of making a blog, but people think that it saves them the marketing effort -- which is a lot more effort.
> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
Why do they do that? They even have their own domain, they can get a domain but they can't host text themselves and choose their own colors?
Medium unfortunately simply doesn't work on my phone. It shows the first paragraph of text, then just nothing, no button to expand text or anything either. Some bug, they can't even render a textual article even though browsers could do that in 1993.
Give me a break. Medium is fine. The webfont they use is fine. Their jank is nonzero but minimal.
Sure, fine, whatever, The Web Is Worse Than It Used To Be. I wish every text-driven website (news, blogs, etc) rendered with zero jank and zero JS required. But Medium really isn't much worse here than everyone else. Their pages are more cluttered than they used to be, which sucks, but they're clearly just victims of the same forces driving all other commercial websites to do the same things.
> For over 1000 years black text on white paper has been the best practice for printed texts worldwide.
This alone almost made me stop reading the article. What worked for printed text has no bearing for what works on an illuminated screen.
But honestly, it's not grey text that's the problem. I agree with the author that maintaining high contrast is important, but it is equally important that things aren't too bright. You should avoid using extremes like #000000 and #ffffff unless you're really trying to make something highlight.
#0f0f0f or even #202020 doesn't make an appreciable difference, at least to my eyes. Believe me, as a 50+ year old, I notice when it's hard to read things.
You should avoid giving "advice". Because of ppl like you I have to constantly mess with CSS and have ton of extensions just to fix colors, just because you knew better.... oh my.
Paper isn't typically a pure "#FFFFFF" white and if you'd bothered to read the article instead of rage quitting after the sub-heading you'd realise that the article is advocating exactly the same point you are. Let me quote it for you:
> On a light or white background, body text should be black. In many cases it is more appropriate to reduce contrast by darkening the background. As an example a white #FFF background is really too bright for comfortable reading, a background such as #e8e2dd provides a less fatiguing background.
Sorry if I come across blunt but if you're going to be critical about an article then at least read more than the sub-heading first.
Normally I'd agree with all of your points but the article is really clear about lowing the page brightness and not the page contrast. They even had an infographic to illustrate their point: https://miro.medium.com/max/1400/1*xOhOFGLr6o4AsGhlACweSQ.pn...
At no point were they making any of the suggestions the GP are criticising them for.
On the contrary, I find that the "vitriol" was a good balance to the "rage quitting" disclaimer raising the rage level for no reason. It's an article about text legibility. We should be able to take it or leave it or refute it without rage.
(Whether they rage quit or "merely said they almost did" is same difference).
Paper can be very white and bright if well lit. Much more than a typical LED/LCD screen. If your screen is brighter than a white sheet of paper, it's probably too bright and you are probably tiring your eyes.
The only moment when a sheet of paper is darker than my screen is when I'm in my bed, in a completely dark room watching or reading something, and that's not known as a very good thing to do for the eyes (and for the body posture neither by the way).
I'm not buying the fact we should darken the background of a text. I think we should let people reduce the brightness of their screen instead.
Everything¹ can be brighter than a screen if you just shine enough light onto it. The main issue with pure black and white on screens is typically contrast. Modern screens can have a much, much higher absolute difference between the brightest white and the blackest black.
There is such a thing as too much contrast. Typical ergonomic workspace regulations (like the ASR in Germany for example) will tell you how much contrast any given type of workspace environment should have between the brightest and the darkest point for a reason.
Now someone with an old, washed out TFT might get a much different contrast when viewing a #000 #FFF page of text than someone with a modern HDR display if this is not accounted for in software. Now you could say they need to adjust their screen – but text is not the only thing people view on screens. Why would you throw away image and color fidelity, because some website doesn't fit that setup? We are on computers, why not just support different contrast levels like we do with dark mode?
> Everything¹ can be brighter than a screen if you just shine enough light onto it.
I should have mentioned that I was thinking of a sheet of paper in the same room / with the same lightning, next to the screen we are speaking about. Otherwise, yes, indeed.
> why not just support different contrast levels
So what I understand from this is that we can't get this right (in HTML/CSS) for now because we don't have details about the environment of the user wrt lighting/contrast (preferences/perception).
It seems like something that should be fixed at the browser or the OS level. One should be able to say: "this is some black text on white background that needs to be displayed so as to be comfortable for the user given their environment" (or something). Maybe that needs to be the default by the way.
Until then, any forced value is going to suck for someone.
FWIW, ambient light sensors were present in (high end) devices (and displays) for ages, but they never worked reasonably on desktop hardware: basically, they should let you configure at least two points of comfort in different lightning. Eg. when it's very dark, you set the brightness that is comfortable; when it's very bright around you, you set another level of screen brightness. Finally, display brightness gets set automatically by interpolating (and even extrapolating) from your chosen settings.
Advanced configuration could allow you to tune the curve continuously (or in a sufficient number of discreet steps that it seems to be continuous).
I think I noticed my Android phone at least doing a "I'll remember a relative brightness you want for this much light outside", though I haven't checked if it's really that.
I guess what I wrote about adaptation didn't some across as clearly as I had hoped.
Adapting to the ambient light and reading on paper which is never more than 90% DIFFUSE reflectance (typically 80% for paperbacks, and 70% for newspaper) is not at all like having polarized light beamed straight into your ocular medium to collide with your retina at well over 100% of the ambient adaptation level. Or words to that effect.
> _There is such a thing as too much contrast._
Yes, there is absolutely such a thing as too much contrast, however, I hesitate to say this as it is so often misunderstood—spatial frequency is the key factor to determine first. The contrast needed for small thin body text is very different than that needed for a large bold headline.
The thing that some find confusing is thinking that too much contrast with a light background means making the small thin text lighter grey, when in fact the text should stay darker tha #303030, and lower the luminance of the background to #e6e2dd. I say as much in the article.
Many people read the headline, maybe subheader and intro paragraph, and then just skip to HN comments – or skip the article entirely and assume the submission title says it all.
So IMO, both of you are contributing constructively here.
> You should avoid using extremes like #000000 and #ffffff
If it's too much contrast for you, maybe your screen is not setup correctly (too bright), or you don't zoom enough. Or your room is not correctly lit. Black on white should be comfortable.
Don't force me to squint or to use way too much brightness sucking too much power to compensate for poor contrast.
People are fine with office suites despite (thanks to?) them defaulting to black on white. We would have known by the time it if was an issue.
I disagree. If you have a screen that is capable of showing high enough contrast that you can have true highlights and true blacks, then why should you make image quality worse just because someone else is unable to reproduce that?
I guess the real problem is that there's no real standard for what #fff means – it has to be interpreted through a colour space, which in turn does not talk about brightness, I think.
Unless you are running with an OLED, reproducing #fff is really hard anyways. Just like unless you have e-ink, active lit #000 is going to basically be a light bulb.
Reproducing #ffffff and #000000 is relatively possible on higher level monitors that have HDR support and full-array local dimming or a dual-layer LCD. While these monitors shine in HDR mode, most of them are also useful for getting a perfect SDR image out of them.
> So, because I'm poor and can't afford such a monitor/screen,
Done properly, moving away from #fff/#000 can be done in such a way that it looks excellent on better monitors and is usable, at very least not entirely unpleasant to read, on less capable ones.
> I will have a harder time reading your site
It not looking as nice for you is fine, as long as it is readable. If we held everything back to making sure it worked on all screens there would be a lot more plain-text-only sites/apps out there. A perfectly good option IMO, but try getting the general screen using public to agree with that!
Even with a bad screen there are usually adjustments you can make to help.
There are of course many pages out there that are too low contrast, or otherwise unpleasant, unless you are using a particularly good monitor setup a particular way for which…
> or just give up and go somewhere else.
… is a perfectly valid option. You don't owe them your attention, though likewise they generally don't owe you anything either.
How about you modify your screen's gamma, calibrate it or install an extension to increase contrast? Why do I have to have my eyes blasted with insanely high-contrast text because my device follows the specs better?
The root cause could possibly be that not all displays are capable of proper contrast in dark mode at a comfortable brightness for also displaying expanses of white.
You would wear out the brightness controls in no time unless you go out of your way to mandate dark mode on everything.
Another factor might be the dark adaptation of the iris, which could be helped by desk lights.
I have never owned a monitor or phone without a brightness control. I challenge you to find any screen capable of displaying a paragraph that does not have a brightness adjustment. Any form factor (other than backlight-free stuff like ePaper and cheap calculators) will do, as long as it had top 100 market share in its segment at some point in this century.
(Brightness is the adjustment that decreases the max white level without also making blacks brighter. So, a display that only has a contrast knob would count as missing a brightness adjustment.)
In my experience with cost-optimized low-end LCD displays, changing brightness settings will more or less alter absolute contrast at the lower end as well.
Even if the ratio stays the same, the darker shades suddenly are a lot more distinct as they just aren't consumed by artifacts and color shifts or even just glare anymore.
My screen is fine, probably as good as or better than what most people have. We can't optimize for the almost 0% of people who have calibrated screens to the detriment of the big majority of people.
The brightness of a screen is also well-defined in the respective DIN norms for workspaces, which I’m following exactly.
Those norms also set a limit for the maximum amount of contrast allowed at a workspace, which #000000 on #ffffff violates if it’s shown on a color-calibrated screen with standard brightness.
> We can't optimize for the almost 0% of people who have calibrated screens to the detriment of the big majority of people.
We can’t just change the meaning of what definitions and terms mean just because it’s easier than making everyone follow the standard.
Create a color profile for your monitor, so your OS can compress contrast if your monitor isn’t powerful enough to reach the SDR sRGB specs.
To help with "making everyone follow the standard", why don't you start describing what those "standard" screen settings are instead of only talking from the point of authority?
Still, any standard prescribing "standard brightness" for office environments is bound to be nothing but a decent average or default. Even if there was biologically optimal display luminance, it would still depend on the environment lightning (which changes during the day if there's a single window in the room), and on the state of the viewers eyes (age, any visual problems or even temporary issues like tiredness), type of display...
>Still, any standard prescribing "standard brightness" for office environments is bound to be nothing but a decent average or default
The purpose of a standard isn't to be most preferred by any given person or "biologically optimal", it's to be...standard. Without a standard, a designer has no ability to pick a particular color and expect anything like that color to be what the end user sees. Without a standard, there's almost no point in discussing what text colors websites are or aren't using.
You might be taking this to an extreme. There are standard definitions of colours, and we've got reasonable ways to compare screens side by side to see how many colours they can reproduce. While humans can differentiate between a large number of colours, we usually think of them only in the terms of named ones (and no, I am not talking of "aubergine").
The GP was talking about using whatever "DIN norms for workspaces" regarding screen brightness are, so I don't see how that relates to colour calibration.
You also sound as if any one end user really cares if they are looking at exactly the right hue of blue when looking at the "hp" logo. If anything, the company and their marketing department care (for subliminal messaging?), but users really don't. I don't think anyone could pick a McDonald's red or yellow out of a given table of similar red/yellow hues.
But even so, if we were looking at any non-light-emitting content displaying colour (eg. a printout), it will look differently to your eye whether you are looking at it in dim light or in a very light setting, so designer can't do anything about that.
Anyone who knows even the most basic stuff about colour perception understands that it can't be decoupled from your environment (enter a darkroom and every colour is suddenly... black).
Colour calibration and standards are done so that you can guarantee that some things will look identical when displayed in exactly the same environment (so your two screens sitting next to each other show the same hues) or to reproducibly transfer between different mediums (eg. screen and paper), but there is no way you can guarantee that it will look identical for another user in a different environment.
Colour calibration is of limited use in general (eg. even different types of paper [think glossy vs matte] will produce different visual results), and while there's more stability with light-emitting mediums (like LCD screens) — because you, essentially, control some of the lightning as well — that breaks down for the average user because they do need to adjust the brightness according to their environment. Those who absolutely require reproducibility, control both their environment and their equipment.
Indeed, it reads like this, but the visually impaired minority is actually mostly part of the majority of people without calibrated screens I was mentioning. So I actually included them.
I'm sure people with calibrated screens can find a setting where black on white is comfortable, even temporarily, while most people just can't fix contrast lowered at the source. Including not visually impaired people in not ideal environments.
But that’s the wrong approach. You can always tonemap low-contrast values into a higher-contrast color range, but not the opposite way. Once you have something at #000000, it’s clipped, there’s no way for any distinction between these values, same at #ffffff.
That’s the real issue, isn’t it? The tooling for this is shitty. You can create an accurate color profile for your monitor, apply it in software and your OS will automatically map the values correctly. This will improve contrast quite a bit, but is complicated, expensive, and you’ll lose a lot of definition in other brightness ranges.
But the same issues apply in reverse if you try to reduce contrast because some idiot thought a 200:1 contrast for text was healthy.
> I use a color-calibrated screen and #000000 to #ffffff is a painful amount of contrast.
This seems highly unlikely if your brightness isn't completely off. What cd/m2 are you at? I'm on a Eizo CG277 with built-in hardware self calibration. It's set to 120 cd/m2 and I have hard time thinking it could be painful to anyone. I much prefer #000 on #fff over lower contrast alternatives.
In pre-press and photography we're used to ISO 3664:2009[0] which I believe establishes whitepoint brightness level between 80 and 120 cd/m2. It should be added that it requires isolation from daylight and ambient illumination level near 80 lux (and a good monitor)... But even at 150 cd/m2 in a room with controlled amounts of daylight, you should not be blinded by #000 on #fff.
"Screen configuration" means more things. You can optimize for readability, or you can optimize for faithfulness (and more). You should switch according to use.
I don't think this is entirely right although it sounds logical at first. Modern displays can be extremely powerful in terms of back light intensity and contrast; you realize that when you switch on the average model from years ago. They need that power so users can watch videos with intentionally dark scenes and still be able to perceive details in less-than-ideal situations. It does not automatically follow that the maximum contrast is intended or ideal for other purposes such as reading text.
I might add that office-type programs were developed at a time where 14 to 18 inch color CRTs were the latest and greatest. The image that modern flat screens deliver is much more dynamic and has way sharper edges, to the degree that maybe we should consider to artificially blur the entire display ever so slightly just so the higher Fourier frequencies get a bit less dominant.
Then unleash the full brightness when watching videos, and scale it back when reading text.
Until we get HDR on the web, one sRGB size must fit all. At this point, accessibility and readability are top priority. You can always tone down your backlight, while someone else might have it at full blast and still not be able to read without squinting in the sunlight on a cheap display. I know who I'm more sympathetic to.
You can not just tone down your backlight without having to measure the color profile of your monitor again. Which takes hours.
As I’ve said countless times before, we’ve got OS support for tonemapping HDR content onto SDR displays, now we need OS support for tonemapping SDR content onto shitty displays.
I know nothing about color profiles, I'm surprised you can't just turn down brightness to read something comfortably and revert to the original level when you need accurate colors again. Or you want accurate colors all the time? But what for, if you are just reading an average document?
I don't need accurate colors when reading text, but I need it to be comfortable. It seems having color calibration would actually suck for me if I can't adjust brightness depending on the weather, on the hour of the day, on the season, on whether I'm tired or not, or on the location I currently am, or on what I'm doing (reading, programming, or watching a video). I need to be able to adjust brightness without fuss.
I guess I would buy dedicated hardware and put it in a well lit-controlled room if I needed accurate colors.
> I know nothing about color profiles, I'm surprised you can't just turn down brightness to read something comfortably and revert to the original level when you need accurate colors again. Or you want accurate colors all the time? But what for, if you are just reading an average document?
I want accurate colors because setting it up is a pain, and switching between accurate and inaccurate colors takes your eyes quite a while to readjust.
It’s much easier to just have everything in an accurate color mode and have content designed for that than to switch it around.
Proper color profiles are actually even more of a benefit for cheap displays than good displays as cheap displays profit from proper colors even more.
Imagine what colors devs would choose if instead of defining white as "the brightest thing any given monitor can spit out" they would just specifiy some absolute value in e.g. Lumen per mm² and the screen tries to actually reach or maintain that value.
The issue with color on screens is a bit like the loudness wars in audio mixing: everybody tries to use the available bitspace to the max, because this made some sense in the days of 16 bit (or lower) audio. Nowadays much more dynamic delivery would be possible (with dynamic reduction as a user preference), yet there is no real, well designed system for such things in place.
If you actually measure the color of printed text, like in novels or newspapers, it is rarely pure black. It’s just really hard to make pure black in real life. It is typically a very dark purplish gray.
In addition, the paper it’s on is almost never pure white. And, as a reflective medium, the perceived colors of paper and ink vary with ambient lighting.
So in digital: should one create sufficient contrast to read? Yes, definitely do that. Stay well inside accessibility guidelines.
But a site absolutely does not need pure black text on white background to do that. And in fact at high screen brightness, that level of contrast risks creating little bits of ghost text in some people’s vision.
But if you measure how #000 is rendered on a screen, you'll also notice that it's not actually pure black too, because as you said, "It’s just really hard to make pure black in real life" and your screen responds to the same laws of physics as anything else. So there's no need to pick something else that #000 to avoid having actually pure black.
I've never understood this argument. If the display had pure black (depending on the definition of pure black here), it would either be an ideal absorber or reflector across the EM spectrum. My phone is not a theoretically ideal mirror, and it also doesn't accidentally cryogenically freeze surfaces when it's face down and displaying a black screen.
Similarly, it cannot boil water or charge my house's solar batteries if I display an all #fff screen.
(If it could do these things, then I'd argue for clamping contrast in the display driver, not in untrusted CSS code!)
Even in the realm of thermodynamically plausible displays, if it is so bright it's burning stuff into your retina, then turn the brightness down before you permanently have an xkcd burnt on to your retina!
Also, I'm reasonably certain such a monitor would fail safety certifications, so maybe don't buy black / gray market hardware, then ruin it for the rest of us?
>it is equally important that things aren't too bright
That's why your display has a brightness control.
At least as long as we're stuck with implicit sRGB, until the web gets proper HDR support, don't murder the contrast of text. You never know the actual viewing conditions (probably less ideal than a well-lit office), and it's foolish to limit it at the source.
>but it is equally important that things aren't too bright.
That's controllable at the screen end.
Even if people use off-white background on webpages, you'd still get white screen real estate in UIs and other places (default Word and Excel background, for one. textarea boxes for another).
I've got this exact problem when trying to meet accessibility criteria.
I would have no issue with sticking #000 on #FFF, except for the fact not everyone has e-ink displays and it's like shining an LED torch in everyone's faces. If it's inverted to #FFF on #000 this is pretty much solved - but this is a hard sell for most product teams.
To add to that, article also brings the point of spacing and font weight, which are equally important. Dark backgrounds with light text require heavier font weights (esp with subpixel rendering) for proper contrast.
I don't think things are nearly as clear-cut. Personally, I like things to be near the extremes, I use OLED screens, and then I deal with it by changing my brightness. I prefer having contrast which I can easily control with brightness settings than not having contrast and then there's nothing I can do.
The ideal situation is where people can change stuff to what works for them, which is why I use the Dark Reader extension. It's the best extension in that it not only lets you easily change brightness and contrast, light/dark, but, most of all, has a crowdsourced file that carries special settings for each website over which elements should be inverted, which elements shouldn't, or whether there's an element that shouldn't be touched at all, for instance.
I have used such extensions in the past (and even welcomed stuff like Chrome's automatic dark mode) but unless they come with perfect AI—which they don't—they're not gonna match Dark Reader's crowdsourcing.
Also, anyone who thinks printed text is actually black hasn't worked with print. And how on earth does someone make this argument while using text and background that are two different shades of purple?
I guess that's why the OP complains as well. I do wonder if none of the other Medium themes have a better contrast, but the OP obviously felt that they needed to explain their (lack of) choice of non-contrasty colours.
> anyone who thinks printed text is actually black ... worked with print
Not clear. We always normally printed in K - insaturated black. Or, "typographic black", or "sufficiently black black", or "just black". «[A]ctually black» requires a definition.
> Users are fully capable of adjusting the brightness and contrast of their monitors.
It'd be a hack. The buttons are not sturdy enough for it, they're even not designed for it and the colour representation will be very incorrect.
Instead of asking every website to blast every user with the highest amount of contrast, modify your own display to do so if your eyes need it. That way the need and the solution is localized to where it should be.
> What worked for printed text has no bearing for what works on an illuminated screen.
I find this hard to believe because in both cases what we actually perceive patterns in the light that enters our eyes. It would seem to follow that only aspects of the reading surface that cause difference in the light patterns (color, intensity, phase, coherence) and the time evolution of those patterns can affect matter when it comes to how well something works for reading.
If we determine, whether from printed text on paper, inked text in tattoos, skywriting in smoke, or anything else that certain relationships that some kinds or combinations of the aforementioned aspects of light matter or don't matter, that should remain true when we are reading from screens or from any other existing or yet to be developed form of reading device.
I really dislike that kind of argument. It's not because it's wrong, but because it's not right either.
A monitor can easily be adjusted so that the contrast between #000 and #fff isn't too much. In fact, most displays have a setting named "contrast" just for that, but what actually makes things too bright is the "brightness" one, that is usually more prominent. People will have opinions all over the place about it, because they do get results all over the place.
Instead, yes, you should avoid using the extrema. But that's because if you use them in a normal situation, you won't have any more extreme values when you need them in a special situation. People should be able to change the color schema anyway, so you are better with a functional choice.
> What worked for printed text has no bearing for what works on an illuminated screen.
This alone almost made me stop reading the answer.
This people is talking about accessibility. So, the more contrast, the better. You want to "highlight" something? Bold uses thicker fonts, underline adds also more pixels. You can add a carefully selected background, like a medium gray or other light color.
But black on white it not to highlight. Is to make it readable. To anyone.
NOWHERE, absolutely nowhere in the article did I suggest using #fff/#000
On the contrary, I highly recommend that for light backgrounds the, background directly under body text be something like #e6e2dd. I explain this in the article.
> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
Sorry, but you don't get to excuse yourself with that. The text/background in your own post is awful, as others have already mentioned. Medium is a notoriously bloated platform, with their ad heavy and JS heavy pages producing a generally poor user experience.
No one is forcing you to use Medium, you could easily use GitHub pages, SubStack, or any number of other, better options. Options that allow you to control your own CSS. By continuing to use Medium, you are saying (basically yelling) that you really don't believe in what you're writing, at least not enough to do anything about it.
I also use GitHub pages, and other sites, and my own independent sites. But, none get the level of readers — this one article on Medium received tens of thousands of reads. For some of the other materials in teh current research, see the catalog at git.myndex.com
Also...always check the readability of type on Windows.
I can instantly tell when a designer is using a Mac and never bothered to check how text renders on Windows. In particular with thin fonts a Mac may render it somewhat legible whilst it completely falls apart on Windows.
Jan Tschichold, a famous typographer and book designer speaks against black on white. He says that the book paper should not be artificially whitened since too much contrast hurts readability just as too little.
The article was published April 1st... I am thinking this was intended to be a joke, as this is the first thing I noticed, breaking it's own rules for "clarity of text".
It's Medium's CMS. Author has no control over the text color, and I've been experimenting with combinations trying to find something useful. An effort in futility. I'm planning on moving my articles to my own site... then... then this went viral. OMG. The true irony.
Yea, it's annoying. Medium does not allow the author to pick the text color. Believe it or not, this combo was the best contrast. Medium's fischer price CMS is really weak in this area.
Also, why don't we let users decide which contrast works best for them?
My https://wordsandbuttons.online/ uses default browser colors for anything other than interactive illustrations. For those, I just don't know how to make user choice work with the graphics they show since the graphics is always different from picture to picture, so I impose slightly tinted background as part of the palette.
Unfortunately the default browser colours for the web are always black text on white background and do not respect the user's desktop theme, be it dark or something else.
My job for the last decade has been to facilitate accessibility.
Not only have I never heard of this control existing in native Chrome, I can't figure out how to do it. I'm doubtful, then, that we can consider this a remedy of any kind for accessibility issues.
My hunch is that you mean that there are extensions that provide this – which I definitely have issues classing as "browsers providing" much in the way of anything.
Your hunch is incorrect. Perhaps they have removed this functionality, I haven't checked, but this historically is functionality that was used to change the default background/text colors of all pages, built in to the browser.
Hm... Perhaps you're misremembering? I'll be fairly surprised if this was ever in Chrome, for a few reasons. When do you know that this last existed?
Closest thing I can find are custom user stylesheets – which were removed in 2014 (also not sure if "write some CSS" is an a11y solution, heh): https://codereview.chromium.org/66383005/
I know at least firefox at one point used the system default background and text colors. This of course worked horribly as many websites (including Google at some point) would override the background or text color with a custom value and not the other assuming that the user would be using the default theme on Windows (or just not caring), which left you with dark grey text on dark background on many websites if you used a dark system theme.
I do agree the the actual point that the default colors have nothing to do with user preference though.
One should say very clearly that black on white—#000000 on #ffffff—is a poor choice except on poor displays or in poor viewing conditions. Much better is a lightly greyish or ever-so-slightly yellowish/brownish background with a less than fully saturated black for the text. Printers have known this all along.
Edit—author says so in his article. FWIW I might add that while my terminal emulator and my text editor both use light on dark color schemes, the way to make that work is to reduce contrasts. The most horribly eye straining web sites use incredibly harsh contrasts. I can work for many hours in both apps before getting anywhere near the condition that many 'dark mode' web sites can cause in a minute or so.
It's worth noting that Dark Reader can force light high-contrast modes.
I use it for this on my e-ink device. The results aren't always optimal (site graphics and navigation are often mangled), but the main body text is at least readable.
Oh, and this is an Android app (available via F-Droid to boot).
I've already got ... three web browsers installed (not including w3m and others under Termux). The thought that there's a need for yet more browsers just to read the fucking text seems ... sad?
Would you happen to know of screenshots / videos demoing features?
Well, if you are using browsers on EPD, one of the first points in the wishlist (or, "requirements unless desperate") is to have a high-contrast option.
The author goes out of the way to mention multiple times, the first at the top of the post, that Medium offers very little control in this regard. I think the post is intended as a criticism of the very platform it's hosted on, among others.
I see. Seems like a factual disagreement, in that case:
> When viewed through the TangledWeb publication, we have set it to a dark mode, which is probably the best contrast possible per how Medium is configured.
I have never used Medium, so I can't comment in this regard.
"True" black on white contrast ratio: 21
Medium's default very-dark-grey on white contrast ratio: 14.54
This bizarre theme-that-makes-it-hard-to-focus-for-non-contrast-reasons contrast ratio: 14.52
If legibility was important to this author, they could have done the bare minimum to improve the legibility on their own site. The bare minimum was to not change the default theme. A bit above that but more honest to their claim: host somewhere else and use a darker grey.
The author goes out of the way to mention multiple times, the first at the top of the post, that Medium offers very little control in this regard.
Maybe true, but this is the first Medium page I've seen with this bizarre color scheme and I hit perhaps 50-60 Medium articles a week in my work. So it's certainly something to do with the theming of his site.
> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
It is his website in medium, he could have chosen any other color for the background and make it not as horrible as it is for reading. Or he could have chosen another platform to publish his content.
I've seen speculation that grey may be selected as may mock-up tools default to a greyed "Greeked" text, or just grey lines, as placeholders for actual textual content.
When it comes time to install the actual payload, it's presumed / assumed that grey is the text colour, or everyone (designers, reviewers, project owners / managers) are so used to the (non-semantic, incidental) placeholder representation that an unreadable text is simply accepted or presumed as the intent.
There are less charitable interpretations as well.
One fix would be to insist on high-constrast text in all phases of the design process. Yes, it will be visually distracting, but text should be your principle asset and intention.
Why would you use a different color for the placeholder text in the first place - the whole point of having you design filled with lorem ipsum instead of empty space is to see how it would look with real content.
Anyone interested in readability and accessibility should look at the ‘modus-themes’ (emacs) by Protesilaos Stavrou [1]. They’re highly accessible and highly readable themes, with complete and thorough documentation and commentary on the design choices. His website should also serve as a benchmark for readability.
Simply because they’re inerested. If they’re not interested they won’t… want to read it, you pedant. It’s very obviously in the domain of accessibility and design, so may interest people who care about that.
397 comments
[ 7.0 ms ] story [ 323 ms ] thread> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
When viewed through the TangledWeb publication,we have set it to a dark mode, which is probably the best contrast possible per how Medium is configured.
By hosting the article at Medium.com, despite their objections to how Medium.com constrains the article's appearance, the author is demonstrating that they don't consider their own argument particularly persuasive.
The authors do have control, but apparently their own point isn't important enough to change their medium (no pun intended).
If I chuck your vase at a wall, I don't get to blame the inevitability of inertia for the resulting mess.
Further, Medium prevents their users from selecting black text as a choice. While Medium’s “Fischer-Price-simple” content creation is easy to use, it is also extremely limited, and fails in accessibility in areas beyond color. Perhaps this article can serve as a wake up call regarding this issue.
I'm actually kind of annoyed at prefers-color-scheme, and the inability to control it as a user in my browser.
I have my Windows set to dark mode because I prefer how Explorer and the rest of the Windows UI looks in dark mode, and I want my OS chrome to be less distracting and to just "fade away". However, all web browsers see this as a signal to tell every website I would prefer them to be in dark mode also, which is not correct! I wish I could set chrome itself to prefers-color-scheme: light (without having to use the dev tools on every website).
The trouble is that `prefers-color-scheme` is set at browser or system level. In order for a website to use a different colour-scheme, then they need to add functionality with Javascript in order to be able to load different styling at user request.
I wish there were some URL-based rules you could set in the browser settings (I expect there are addons to do this, haven't looked though!).
I don't really care that I'm probably in the minority of users who think or care about this. It doesn't make how I feel any less valid.
are there better extensions for providing styles that apply to every website than stylus?
- match the Firefox theme
- match the system theme
- force light
- force dark
Though, maybe that only does the reverse of what you're looking for.
Perhaps it's because it's more readable, not less, and you realize that the site is not worth your time faster :)
That being said I think most if not all browsers will always answer true to one of those.
Unfortunately firefox with enhanced tracking protection claims that the user WANTS a light theme instead of indicating no preference - yes, the spec has no no-preference but a) this means the spec is broken because there is no equivalent setting to not implementing the spec and b) web specs are defined by browser vendors and Firefox used to have a no-preference value for this. In general, desktop browsers will also often indicate prefer-color-scheme: light if the user has not actually made an active choice - either as a default in the browser or based on the default system theme. This unfortunately makes prefer-color-scheme: light not actually carry any useful information so there is currently no way to have a dark theme by default but provide a light thome for those users that actually want it (you can only do the reverse).
[1] https://motherfuckingwebsite.com/
[2] https://www.stallman.org/archives/2022-mar-jun.html
We should have a HN guideline to add (Medium) to the title when the URL itself obfuscates that fact.
Anyway, I agree with the article. I find myself resorting to reader mode more and more these days partly due to crummy web fonts, partly due to janky JS and bloat, and partly due to unreadable color combinations.
Are there any effective browser extensions to intelligently prevent things like a "Subscribe to our newsletter" popover?
I'm trying to think how i could tell uBlock origin to intercept any element with a high z-index which has it's ".display" attribute changed only in response to a timer or a scroll event.
In firefox i have the "I don't care about cookies" plugin and i genuinely forget that noise exists on the web until i use another browser and it all comes flooding back. I'm hoping there's something similar for this endemic cruft the web has been filled with.
Reader mode can be useful. NoScript can be useful but can also be painful.
https://www.no-thanks-extension.com/
I haven't personally tried it yet, but I'm tempted.
There's also a gap of websites that are big enough to have this corporativist behavior of putting annoying... objects in their webpages, but not big enough that enough people visit to the point where it's likely that one of them will write the script.
Especially because, like, I do write some stuff for userstyles and userscripts sometimes, but I won't publish them unless I think they'll be useful for at least a small group of people, which I never seem to think will happen for websites in my mother tongue for some reason.
- Globally blacklist malicious JS (and other features) within uMatrix.
- uBlock Origin's "Annoyances" filter is highly effective.
- UBO's element remover tool is also quite good, and permanently removes misfeatures.
For added leverage, on desktop, I use Stylish to write custom CSS rules that assign annoyances the CSS property "display: none !important". This is typically on a site-by-site basis, though there may be some common targets that can be addressed either globally or with a standard stylesheet applied to multiple sites.
All of which is a pain, agreed, but less of one than not doing so.
I used to dive into the console and start removing stuff and even went so far as to write a bookmarklet that tries to identify and nuke anything with fixed position and reset the height to auto on body/html but ... if someone's going to be that user hostile it's not worth my time.
When this happens I'll copy the url, close the tab and paste it into archive.is.
It's a one click removal. It's nice because I dont have to search for the nearly transparent x or tiny no thanks, I can just muscle memory to the same button in the toolbar of my browser every time.
Note that it does not include custom domains or image uploading on the free plan, but you can upgrade for $29 (lifetime), which gets you:
The editing interface is just a textbox where you paste markdown; doesn't seem there's a github integration or anything like that, which is too bad.I stopped when I posted an article, and Medium decided it was so good, that it deserved a paywall.
100% agree !
https://scribe.rip/please-stop-using-grey-text-3d3e71acfca8?...
It's similar in spirit to Invidious, Nitter, Teddit, and Bibliogram.
It doesn't just save people the technical effort of making a blog, but people think that it saves them the marketing effort -- which is a lot more effort.
> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
Why do they do that? They even have their own domain, they can get a domain but they can't host text themselves and choose their own colors?
Medium unfortunately simply doesn't work on my phone. It shows the first paragraph of text, then just nothing, no button to expand text or anything either. Some bug, they can't even render a textual article even though browsers could do that in 1993.
Sure, fine, whatever, The Web Is Worse Than It Used To Be. I wish every text-driven website (news, blogs, etc) rendered with zero jank and zero JS required. But Medium really isn't much worse here than everyone else. Their pages are more cluttered than they used to be, which sucks, but they're clearly just victims of the same forces driving all other commercial websites to do the same things.
This alone almost made me stop reading the article. What worked for printed text has no bearing for what works on an illuminated screen.
But honestly, it's not grey text that's the problem. I agree with the author that maintaining high contrast is important, but it is equally important that things aren't too bright. You should avoid using extremes like #000000 and #ffffff unless you're really trying to make something highlight.
#0f0f0f or even #202020 doesn't make an appreciable difference, at least to my eyes. Believe me, as a 50+ year old, I notice when it's hard to read things.
> On a light or white background, body text should be black. In many cases it is more appropriate to reduce contrast by darkening the background. As an example a white #FFF background is really too bright for comfortable reading, a background such as #e8e2dd provides a less fatiguing background.
Sorry if I come across blunt but if you're going to be critical about an article then at least read more than the sub-heading first.
Second, accusing posters of not reading articles is against the Hacker News guidelines.
Third, I bring all this up because the vitriol of your comment is no fun to read and brings down the site.
At no point were they making any of the suggestions the GP are criticising them for.
(Whether they rage quit or "merely said they almost did" is same difference).
Paper can be very white and bright if well lit. Much more than a typical LED/LCD screen. If your screen is brighter than a white sheet of paper, it's probably too bright and you are probably tiring your eyes.
The only moment when a sheet of paper is darker than my screen is when I'm in my bed, in a completely dark room watching or reading something, and that's not known as a very good thing to do for the eyes (and for the body posture neither by the way).
I'm not buying the fact we should darken the background of a text. I think we should let people reduce the brightness of their screen instead.
There is such a thing as too much contrast. Typical ergonomic workspace regulations (like the ASR in Germany for example) will tell you how much contrast any given type of workspace environment should have between the brightest and the darkest point for a reason.
Now someone with an old, washed out TFT might get a much different contrast when viewing a #000 #FFF page of text than someone with a modern HDR display if this is not accounted for in software. Now you could say they need to adjust their screen – but text is not the only thing people view on screens. Why would you throw away image and color fidelity, because some website doesn't fit that setup? We are on computers, why not just support different contrast levels like we do with dark mode?
--- ¹ except maybe black holes
I should have mentioned that I was thinking of a sheet of paper in the same room / with the same lightning, next to the screen we are speaking about. Otherwise, yes, indeed.
> why not just support different contrast levels
So what I understand from this is that we can't get this right (in HTML/CSS) for now because we don't have details about the environment of the user wrt lighting/contrast (preferences/perception).
It seems like something that should be fixed at the browser or the OS level. One should be able to say: "this is some black text on white background that needs to be displayed so as to be comfortable for the user given their environment" (or something). Maybe that needs to be the default by the way.
Until then, any forced value is going to suck for someone.
Advanced configuration could allow you to tune the curve continuously (or in a sufficient number of discreet steps that it seems to be continuous).
I think I noticed my Android phone at least doing a "I'll remember a relative brightness you want for this much light outside", though I haven't checked if it's really that.
Adapting to the ambient light and reading on paper which is never more than 90% DIFFUSE reflectance (typically 80% for paperbacks, and 70% for newspaper) is not at all like having polarized light beamed straight into your ocular medium to collide with your retina at well over 100% of the ambient adaptation level. Or words to that effect.
> _There is such a thing as too much contrast._
Yes, there is absolutely such a thing as too much contrast, however, I hesitate to say this as it is so often misunderstood—spatial frequency is the key factor to determine first. The contrast needed for small thin body text is very different than that needed for a large bold headline.
The thing that some find confusing is thinking that too much contrast with a light background means making the small thin text lighter grey, when in fact the text should stay darker tha #303030, and lower the luminance of the background to #e6e2dd. I say as much in the article.
In general, nothing useful ever came after an "I've stopped reading at" disclaimer.
The # of articles that I personally haven't commented on because I found them impossible to read them to the end is probably in tens of thousands.
That's in fact how I come to the conclusion that nothing good ever comes after reading it :-)
So IMO, both of you are contributing constructively here.
If it's too much contrast for you, maybe your screen is not setup correctly (too bright), or you don't zoom enough. Or your room is not correctly lit. Black on white should be comfortable.
Don't force me to squint or to use way too much brightness sucking too much power to compensate for poor contrast.
People are fine with office suites despite (thanks to?) them defaulting to black on white. We would have known by the time it if was an issue.
I guess the real problem is that there's no real standard for what #fff means – it has to be interpreted through a colour space, which in turn does not talk about brightness, I think.
Done properly, moving away from #fff/#000 can be done in such a way that it looks excellent on better monitors and is usable, at very least not entirely unpleasant to read, on less capable ones.
> I will have a harder time reading your site
It not looking as nice for you is fine, as long as it is readable. If we held everything back to making sure it worked on all screens there would be a lot more plain-text-only sites/apps out there. A perfectly good option IMO, but try getting the general screen using public to agree with that!
Even with a bad screen there are usually adjustments you can make to help.
There are of course many pages out there that are too low contrast, or otherwise unpleasant, unless you are using a particularly good monitor setup a particular way for which…
> or just give up and go somewhere else.
… is a perfectly valid option. You don't owe them your attention, though likewise they generally don't owe you anything either.
You would wear out the brightness controls in no time unless you go out of your way to mandate dark mode on everything.
Another factor might be the dark adaptation of the iris, which could be helped by desk lights.
(Brightness is the adjustment that decreases the max white level without also making blacks brighter. So, a display that only has a contrast knob would count as missing a brightness adjustment.)
Even if the ratio stays the same, the darker shades suddenly are a lot more distinct as they just aren't consumed by artifacts and color shifts or even just glare anymore.
Just because your screen is configured badly doesn’t mean we should make content unreadable for users with correctly calibrated screens.
My screen is fine, probably as good as or better than what most people have. We can't optimize for the almost 0% of people who have calibrated screens to the detriment of the big majority of people.
Those norms also set a limit for the maximum amount of contrast allowed at a workspace, which #000000 on #ffffff violates if it’s shown on a color-calibrated screen with standard brightness.
> We can't optimize for the almost 0% of people who have calibrated screens to the detriment of the big majority of people.
We can’t just change the meaning of what definitions and terms mean just because it’s easier than making everyone follow the standard.
Create a color profile for your monitor, so your OS can compress contrast if your monitor isn’t powerful enough to reach the SDR sRGB specs.
https://www.iso.org/standard/57992.html
> that will ensure effective and comfortable viewing conditions for users with normal or adjusted-to-normal eyesight
Sounds like it did not do so for you, in the case of non-compliant websites with your compliant display.
I can't be bothered for my personal blog. $158 is my hosting cost for 3 years or so.
Still, any standard prescribing "standard brightness" for office environments is bound to be nothing but a decent average or default. Even if there was biologically optimal display luminance, it would still depend on the environment lightning (which changes during the day if there's a single window in the room), and on the state of the viewers eyes (age, any visual problems or even temporary issues like tiredness), type of display...
The purpose of a standard isn't to be most preferred by any given person or "biologically optimal", it's to be...standard. Without a standard, a designer has no ability to pick a particular color and expect anything like that color to be what the end user sees. Without a standard, there's almost no point in discussing what text colors websites are or aren't using.
The GP was talking about using whatever "DIN norms for workspaces" regarding screen brightness are, so I don't see how that relates to colour calibration.
You also sound as if any one end user really cares if they are looking at exactly the right hue of blue when looking at the "hp" logo. If anything, the company and their marketing department care (for subliminal messaging?), but users really don't. I don't think anyone could pick a McDonald's red or yellow out of a given table of similar red/yellow hues.
But even so, if we were looking at any non-light-emitting content displaying colour (eg. a printout), it will look differently to your eye whether you are looking at it in dim light or in a very light setting, so designer can't do anything about that.
Anyone who knows even the most basic stuff about colour perception understands that it can't be decoupled from your environment (enter a darkroom and every colour is suddenly... black).
Colour calibration and standards are done so that you can guarantee that some things will look identical when displayed in exactly the same environment (so your two screens sitting next to each other show the same hues) or to reproducibly transfer between different mediums (eg. screen and paper), but there is no way you can guarantee that it will look identical for another user in a different environment.
Colour calibration is of limited use in general (eg. even different types of paper [think glossy vs matte] will produce different visual results), and while there's more stability with light-emitting mediums (like LCD screens) — because you, essentially, control some of the lightning as well — that breaks down for the average user because they do need to adjust the brightness according to their environment. Those who absolutely require reproducibility, control both their environment and their equipment.
I'm sure people with calibrated screens can find a setting where black on white is comfortable, even temporarily, while most people just can't fix contrast lowered at the source. Including not visually impaired people in not ideal environments.
But the same issues apply in reverse if you try to reduce contrast because some idiot thought a 200:1 contrast for text was healthy.
My personal solution is relatively simple: I replace every monitor that’s too shitty to do sRGB at good contrast at 400 nits. For a T470/T480 I can recommend this panel: https://www.xelent-store.de/Innolux-N140HCG-GQ2-400cd-Low-Po...
This seems highly unlikely if your brightness isn't completely off. What cd/m2 are you at? I'm on a Eizo CG277 with built-in hardware self calibration. It's set to 120 cd/m2 and I have hard time thinking it could be painful to anyone. I much prefer #000 on #fff over lower contrast alternatives.
At the same time, #000000 may not be above 2 cd/m² at the absolute most if a pure black and a pure white pixel are shown right next to each other.
[0] https://www.iso.org/standard/43234.html
"Screen configuration" means more things. You can optimize for readability, or you can optimize for faithfulness (and more). You should switch according to use.
Just like I've got to have filters that force websites not to use too contrasty colors.
I might add that office-type programs were developed at a time where 14 to 18 inch color CRTs were the latest and greatest. The image that modern flat screens deliver is much more dynamic and has way sharper edges, to the degree that maybe we should consider to artificially blur the entire display ever so slightly just so the higher Fourier frequencies get a bit less dominant.
Until we get HDR on the web, one sRGB size must fit all. At this point, accessibility and readability are top priority. You can always tone down your backlight, while someone else might have it at full blast and still not be able to read without squinting in the sunlight on a cheap display. I know who I'm more sympathetic to.
As I’ve said countless times before, we’ve got OS support for tonemapping HDR content onto SDR displays, now we need OS support for tonemapping SDR content onto shitty displays.
I don't need accurate colors when reading text, but I need it to be comfortable. It seems having color calibration would actually suck for me if I can't adjust brightness depending on the weather, on the hour of the day, on the season, on whether I'm tired or not, or on the location I currently am, or on what I'm doing (reading, programming, or watching a video). I need to be able to adjust brightness without fuss.
I guess I would buy dedicated hardware and put it in a well lit-controlled room if I needed accurate colors.
I want accurate colors because setting it up is a pain, and switching between accurate and inaccurate colors takes your eyes quite a while to readjust.
It’s much easier to just have everything in an accurate color mode and have content designed for that than to switch it around.
Proper color profiles are actually even more of a benefit for cheap displays than good displays as cheap displays profit from proper colors even more.
The issue with color on screens is a bit like the loudness wars in audio mixing: everybody tries to use the available bitspace to the max, because this made some sense in the days of 16 bit (or lower) audio. Nowadays much more dynamic delivery would be possible (with dynamic reduction as a user preference), yet there is no real, well designed system for such things in place.
Maybe that's to compensate for low contrast content?
In addition, the paper it’s on is almost never pure white. And, as a reflective medium, the perceived colors of paper and ink vary with ambient lighting.
So in digital: should one create sufficient contrast to read? Yes, definitely do that. Stay well inside accessibility guidelines.
But a site absolutely does not need pure black text on white background to do that. And in fact at high screen brightness, that level of contrast risks creating little bits of ghost text in some people’s vision.
Similarly, it cannot boil water or charge my house's solar batteries if I display an all #fff screen.
(If it could do these things, then I'd argue for clamping contrast in the display driver, not in untrusted CSS code!)
Even in the realm of thermodynamically plausible displays, if it is so bright it's burning stuff into your retina, then turn the brightness down before you permanently have an xkcd burnt on to your retina!
Also, I'm reasonably certain such a monitor would fail safety certifications, so maybe don't buy black / gray market hardware, then ruin it for the rest of us?
That's why your display has a brightness control.
At least as long as we're stuck with implicit sRGB, until the web gets proper HDR support, don't murder the contrast of text. You never know the actual viewing conditions (probably less ideal than a well-lit office), and it's foolish to limit it at the source.
https://www.sunvisiondisplay.com/reflective-lcd-monitor https://news.ycombinator.com/item?id=31203809 https://www.youtube.com/watch?v=Ehqj0W3koP0
That's controllable at the screen end.
Even if people use off-white background on webpages, you'd still get white screen real estate in UIs and other places (default Word and Excel background, for one. textarea boxes for another).
I would have no issue with sticking #000 on #FFF, except for the fact not everyone has e-ink displays and it's like shining an LED torch in everyone's faces. If it's inverted to #FFF on #000 this is pretty much solved - but this is a hard sell for most product teams.
The ideal situation is where people can change stuff to what works for them, which is why I use the Dark Reader extension. It's the best extension in that it not only lets you easily change brightness and contrast, light/dark, but, most of all, has a crowdsourced file that carries special settings for each website over which elements should be inverted, which elements shouldn't, or whether there's an element that shouldn't be touched at all, for instance.
I have used such extensions in the past (and even welcomed stuff like Chrome's automatic dark mode) but unless they come with perfect AI—which they don't—they're not gonna match Dark Reader's crowdsourcing.
Not clear. We always normally printed in K - insaturated black. Or, "typographic black", or "sufficiently black black", or "just black". «[A]ctually black» requires a definition.
Yes it does.
> ... but it is equally important that things aren't too bright. You should avoid using extremes like #000000 and #ffffff ...
No, you shouldn't avoid them. Users are fully capable of adjusting the brightness and contrast of their monitors.
> Believe me, as a 50+ year old, I notice when it's hard to read things.
I believe you. I just don't think your personal experience is relevant.
It'd be a hack. The buttons are not sturdy enough for it, they're even not designed for it and the colour representation will be very incorrect.
Instead of asking every website to blast every user with the highest amount of contrast, modify your own display to do so if your eyes need it. That way the need and the solution is localized to where it should be.
I find this hard to believe because in both cases what we actually perceive patterns in the light that enters our eyes. It would seem to follow that only aspects of the reading surface that cause difference in the light patterns (color, intensity, phase, coherence) and the time evolution of those patterns can affect matter when it comes to how well something works for reading.
If we determine, whether from printed text on paper, inked text in tattoos, skywriting in smoke, or anything else that certain relationships that some kinds or combinations of the aforementioned aspects of light matter or don't matter, that should remain true when we are reading from screens or from any other existing or yet to be developed form of reading device.
A monitor can easily be adjusted so that the contrast between #000 and #fff isn't too much. In fact, most displays have a setting named "contrast" just for that, but what actually makes things too bright is the "brightness" one, that is usually more prominent. People will have opinions all over the place about it, because they do get results all over the place.
Instead, yes, you should avoid using the extrema. But that's because if you use them in a normal situation, you won't have any more extreme values when you need them in a special situation. People should be able to change the color schema anyway, so you are better with a functional choice.
This alone almost made me stop reading the answer.
This people is talking about accessibility. So, the more contrast, the better. You want to "highlight" something? Bold uses thicker fonts, underline adds also more pixels. You can add a carefully selected background, like a medium gray or other light color.
But black on white it not to highlight. Is to make it readable. To anyone.
On the contrary, I highly recommend that for light backgrounds the, background directly under body text be something like #e6e2dd. I explain this in the article.
Sorry, but you don't get to excuse yourself with that. The text/background in your own post is awful, as others have already mentioned. Medium is a notoriously bloated platform, with their ad heavy and JS heavy pages producing a generally poor user experience.
No one is forcing you to use Medium, you could easily use GitHub pages, SubStack, or any number of other, better options. Options that allow you to control your own CSS. By continuing to use Medium, you are saying (basically yelling) that you really don't believe in what you're writing, at least not enough to do anything about it.
Thank you for reading.
I can instantly tell when a designer is using a Mac and never bothered to check how text renders on Windows. In particular with thin fonts a Mac may render it somewhat legible whilst it completely falls apart on Windows.
Fortunately, they changed it to some sane color.
https://userstyles.org/style_screenshots/199552_after.png?r=...
I used to make user style just to make it readable. The top right is the original color of GitHub dark theme, and left bottom is the one I modified.
Someone set the color must forget how srgb works. #808080 is not half of the light level. It's about 1/3.
My https://wordsandbuttons.online/ uses default browser colors for anything other than interactive illustrations. For those, I just don't know how to make user choice work with the graphics they show since the graphics is always different from picture to picture, so I impose slightly tinted background as part of the palette.
I don't see your point.
My job for the last decade has been to facilitate accessibility.
Not only have I never heard of this control existing in native Chrome, I can't figure out how to do it. I'm doubtful, then, that we can consider this a remedy of any kind for accessibility issues.
My hunch is that you mean that there are extensions that provide this – which I definitely have issues classing as "browsers providing" much in the way of anything.
Closest thing I can find are custom user stylesheets – which were removed in 2014 (also not sure if "write some CSS" is an a11y solution, heh): https://codereview.chromium.org/66383005/
I do agree the the actual point that the default colors have nothing to do with user preference though.
Edit—author says so in his article. FWIW I might add that while my terminal emulator and my text editor both use light on dark color schemes, the way to make that work is to reduce contrasts. The most horribly eye straining web sites use incredibly harsh contrasts. I can work for many hours in both apps before getting anywhere near the condition that many 'dark mode' web sites can cause in a minute or so.
https://darkreader.org/
I use it for this on my e-ink device. The results aren't always optimal (site graphics and navigation are often mangled), but the main body text is at least readable.
> Rendering mode[s]: Inverted ; Grayscale ; Inverted grayscale ; Increase contrast
https://github.com/anthonycr/Lightning-Browser
Oh, and this is an Android app (available via F-Droid to boot).
I've already got ... three web browsers installed (not including w3m and others under Termux). The thought that there's a need for yet more browsers just to read the fucking text seems ... sad?
Would you happen to know of screenshots / videos demoing features?
That said, thanks. It is another option.
Well, if you are using browsers on EPD, one of the first points in the wishlist (or, "requirements unless desperate") is to have a high-contrast option.
https://github.com/plateaukao/browser
High-contrast, paginated nav, minimum animation, save-to-ePub (see my recent comments here), font scaling, adblocking, and more.
Edit: typo
I've used Medium to post, and it sure allows one no to use white on purple.
In fact, Medium's default, even if not 100% black, is more legible than his choice.
> When viewed through the TangledWeb publication, we have set it to a dark mode, which is probably the best contrast possible per how Medium is configured.
I have never used Medium, so I can't comment in this regard.
If legibility was important to this author, they could have done the bare minimum to improve the legibility on their own site. The bare minimum was to not change the default theme. A bit above that but more honest to their claim: host somewhere else and use a darker grey.
Maybe true, but this is the first Medium page I've seen with this bizarre color scheme and I hit perhaps 50-60 Medium articles a week in my work. So it's certainly something to do with the theming of his site.
https://archive.ph/OFOdi
Open the website and the first thing I see is dark background and grey-light text. Close the website. The website doesn't stand for the claims.
> And before we continue, let’s make it absolutely clear that we have no control of the color of the text in this very article, as it is hosted through Medium.com, which features poor visual accessibility of their site design.
Grey text = weak design department with damn expensive monitors
Grey background = management dabbles in design questions
Grey text & other-grey background = decision by committee
Any color discussed long enough becomes grey.
When it comes time to install the actual payload, it's presumed / assumed that grey is the text colour, or everyone (designers, reviewers, project owners / managers) are so used to the (non-semantic, incidental) placeholder representation that an unreadable text is simply accepted or presumed as the intent.
There are less charitable interpretations as well.
One fix would be to insist on high-constrast text in all phases of the design process. Yes, it will be visually distracting, but text should be your principle asset and intention.
Though ultimately it would seem that this is in fact starting point to failure itself.
[1]: https://protesilaos.com/emacs/modus-themes