Isn't most of the text on the page grey? It's not white, it's rgb(215,215,216). And the background is not black. Some worse examples are shown, but then the message comes across as "don't use grey unless you know what you're doing, like I do, because I'm using grey while I tell you not to use grey, but mine is okay."<p>Maybe aside from the unset option, something more specific about a minimum contrast threshold would be useful. Ideally the author wouldn't be breaking below that threshold themselves while explaining it.
The background is indeed not black, but if it isn't actually white then it's close enough that the text, which i'm sure is indeed mostly actually grey rather than black, shows up well. I've seen worse.
That, plus the line "Or, you could just not do it [change your colors with CSS] in the first place which would look like this:" — followed by a super-duper-CSS-styled box thingie full of gray text.
Indeed the WCAG guidelines provide the following criteria<p>* The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following
* Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1<p>Grey is not the problem. Low contrast is the problem.
Black text on a gray background is how the web was intended to be experienced.
The number of PowerPoint and slide presentations I sat through with sans serif white and yellow text on a dark purple background still gives me nightmares. For my presentation I went black over medium-light grey. The audience sighed with relief.
Blue hyperlinks. Purple hyperlinks after you had clicked them. Images with the blue hyperlink border. Tables with Extra Chonky borders. Row and Col span. Guestbooks.
For an opposing view, <a href="https://ianstormtaylor.com/design-tip-never-use-black/" rel="nofollow">https://ianstormtaylor.com/design-tip-never-use-black/</a>
But the author of that page is not concerned with readability or accessibility. He just wants things to look cool and design-y. One piece of supporting evidence he cites is some random photo he took that doesn't contain #000000 black. That doesn't mean anything, it could be that it's over-exposed, or has poor contrast, or had some silly filter applied. This leads me to think that the author of that page doesn't know what he's talking about.
16161d text on a background of fafafc is an 18:1 ratio, sufficient to meet WCAG AA criteria
Dark/charcoal grey is better than pure black for text. But it's still dark enough that most people would call it black.
The problem is <i>contrast</i>, really. Some color combos are terrible, and you also have issues with color-blindness (which is why gray is used a lot).<p>Gray text, against a gray background, can suck.<p>I’m getting on in years, and low-contrast text affects me a lot more, these days, than it used to.
It's not, that's a myth. The blackest black your monitor is capable of is best for text.
so wrong
Well, as long as you're not going to decide to make the dark background lighter to accommodate the brighter text...<p>But I would be in favor of sites using variables more so that personal customization is easier. But often this goes against their desire for "branding".
More generally use a contrast checker on any pair of colours that are likely to be in juxtaposition and need to be legible.<p>Helpful of the website to demonstrate the problem in situ in its tag links and code comments! (Maybe just in dark mode?)
WCAG color contrast checkers in particular have never steered me wrong. It's interesting (but makes sense) that contrast needs to be higher for small text than for large text!
Yes, you want enough contrast, but not too much. Either extreme is hard to look at for long periods.
Screen brightness is a pretty important contributing factor. If you have this problem a lot, verify your screen is bright enough. ( Regardless of his point )
I’m looking at gray text on an off-white background right now :P
A related piece from 2022 that gets a bit more into the <i>why</i>, readability and Accessibility Guidelines evolution etc.<p><i>Please Stop Using Grey Text (2022)</i><p><a href="https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acfca8" rel="nofollow">https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acf...</a> (<a href="https://archive.is/QictZ" rel="nofollow">https://archive.is/QictZ</a>) [<a href="https://news.ycombinator.com/item?id=31420938">https://news.ycombinator.com/item?id=31420938</a>]
Yes, I wish sites that use grey text should be investigated as part of the US disability act.<p>People with even minor sight issues can have a hard time with sites designed that way. When I run across a site like that I usually try it in lynx, if the site does not work in lynx, I block it on my system so I would not waste my time with it.
While we're wishing, let's bring back serifs. I, for one, would like to be able to tell the difference between AI and Al without context clues, and using an inherently lossy font is the opposite of "readability".