> Yes I know the art theory stuff about never using black because it doesn't appear naturally.
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.
On a good monitor, the color contrast between #ffffff and #000000 is far beyond the contrast possible in nature. No reflective material can reach those colors or that contrast.
That color contrast is perfect for a game, a movie or an image. But you don't want the feeling of something as bright as looking into the fucking sun mixed with the darkness of the deepest starless night. That's just painful, both in light mode and dark mode.
Just calibrate your monitor correctly, increase your contrast if your monitor can't even display Rec.709 sRGB, instead of compensating for your shitty monitor by making your website painful for anyone with a good monitor.
Over 99% of users don't, most phones are not high end and as such don't have such a screen.
> feeling of something as bright as looking into the fucking sun
Again, not a experience around 99% of internet users can follow, their devices don't get that bright, especially not on a per-pixel basis.
Also most people use devices in rooms with varying degrees of natural sunlight showing in.
And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
> And if whites are to bright then it's because my screen is wrongly setup for my eyes/usage. A perfect color calibrated screen is ironically often not a perfectly setup screen for normal usage.
There are very specific definitions for colors, and what they mean.
#000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
The screen can't be wrong if it correctly matches the standard. If real-world content doesn't obey the standard, the content is wrong, not the standard.
> #000000 means 0.1 nits, #ffffff means 100 nits. That's standardized and specified.
Uhm, scree brightness control is a thing. Adaptive brightness is standard even on non high end phones.
Same for desktops etc.
So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
> So a part of a standard which maps color to specific brightness levels is pretty much irrelevant outside of the unrealistic case of a perfect calibrated monitor in a perfect environment. Which does exist. But again is for most internet users unrealistic.
If you modify the brightness in software, you can also tonemap it properly and retain the contrast easily.
Yeah definitely. And also be sure to switch all your keys on your keyboard to a hardwood. I prefer mahogany for its bright clicks and depth of response versus the equivalent plastic keycaps.
If you use these high contrast colors, you will break it for users on good displays. That means potential investors, people on iPhones, people on expensive samsung phones.
Those are the people you usually want as customers. And you're making your website painful for them. That's a decision you can make, but don't be surprised if you'll fail with that attitude.
Even in that case you should consider that your readers might have a diverse range of devices, and configuring a 1000:1 contrast ratio isn't exactly the greatest solution.
Keep colors and contrast restricted to the range possible by reflective materials (i.e. what can be printed on paper or ever be encountered in nature) and all the issues are immediately gone. You don't have to use grey-on-grey (which is super annoying). Just keep to the range of colors a newspaper will have, or a zebra will have.
perfectmotherfuckingwebsite does it right: enough contrast that everyone can read it, not too much to be painful.
motherfuckingwebsite does it right, too: follow the preferences (which in my case is almost exactly the same as the perfectmotherfuckingwebsite)
The worst are websites with far too little or far too much contrast that don't even follow preferences. At work I've had to repeatedly go against designers wishes refusing to implement their design and saying: I'll implement you anything within of 4.5:1 to 10:1 contrast ratio. But I won't go below that (no, I can't make the text 10px tall in #c0c0c0 on #f0f0f0) nor above that.
Making sRGB 1000 nits is extremely bad colorimetry. sRGB is supposed to go with 80 nits in its original definition, and being an order of magnitude off indicates something very wrong with your system's concept of what "standard dynamic range" entails.
My own monitor calibrates sRGB to 100 nits (thank god), but a lot of consumer displays (especially smartphones) are so badly color managed that they display sRGB at 600nits and more, with no option to properly change that.
Generally, media and text need very different contrast ratios and colorspaces, and text should never use the full contrast available.
But the big issue is that most content is using entirely unmanaged colors, not even correctly setting them to sRGB (or actually the color profile of whatever shitty 6-bit 100:1 contrast panel from 2004 they managed to find on the dump).
If that was actually used, we wouldn't have any of these issues and everything would be correctly tonemapped. But they don't, they set no profile, which in some software means "whatever the display supports" (although recently enough software enforces "probably sRGB at 1000:1 contrast 100nits max brightness" luckily).
"Just calibrate your monitor". If only making every monitor calibrate perfectly was so simple. Sometimes you don't have permission or access to even calibrate said monitor. Your talking about nits like every monitor is able to control its nits output, which is certainly not true.
Sometimes, you just have a shitty monitor. There are entire communities dedicated to calibrating monitors as I'm sure you are aware, it's time consuming and can be expensive, it's not a solution, we have manufacturer ICC profiles for a reason.
I'm not even talking about using a spyder and calibrating it properly, even just manually changing the settings with a printed reference card can be worth a lot (or even by color matching by eye against an iPhone, as those have great default colors). Or even just manually setting the dials until it looks right.
But the reality is that I can't use some websites because they chose to make my experience worse so users with badly produced and badly designed devices have a better experience. We're yet again at a situation where obeying the standard is punished.
> Even if that was true, nature includes light sources as well as reflective materials.
Emissive light sources in nature (except for rare occurrences like lightning, certain jellyfish and cherenkov radiation) are all black body radiation.
That's very different from the colors and contrast ratios possible by modern OLED monitors. The best example would be the blue LEDs used in modern OLED panels, which when they were introduced had a strange unnerving blue glow because that color just doesn't exist in nature.
Additionally, the contrast ratios possible by modern OLED panels are also far beyond anything in nature, as in nature anything that is bright, be it reflective or emmissive, will as result also light up its surroundings and reduce contrast naturally.
I think the underlying reasons for that are underappreciated.
When you pick #000000 for your text color, people won't see it as pure black anyway. Imperfections in your screen's backlighting aside, your screen reflects the ambient lighting, or, if you're outdoors and pointed the wrong direction on a sunny day, your screen reflects sunlight that is orders of magnitude brighter than the screen itself (measured in cd/m^2). #000000 never shows up as actual black either.
So if you're going to put black text on white background, just use #000000 on #ffffff. Nature doesn't need any more help to make text on screens hard to read.