tejohnso4 hours ago
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."
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.
quuxplusone4 hours ago
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.
tom_3 hours ago
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.
cratermoon2 hours ago
Indeed the WCAG guidelines provide the following criteria
* 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
Grey is not the problem. Low contrast is the problem.
akrakeshan hour ago
The article could have been more useful if its point was just 'use sufficient contrast'. As it is, the article is overly prescriptive, and feels like trying too hard to be sensational or cute.
designerarvid19 minutes ago
Maybe the author is not that informed?
Maximum readability for humans is black text on light grey. Contrast is not the only thing that matters.
ccleve3 hours ago
For an opposing view, https://ianstormtaylor.com/design-tip-never-use-black/
chihuahua2 hours ago
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.
11223312 minutes ago
So you routinely encounter photographs that have noticable areas where sensor did not receive any light during exposure? To the point where you feel not having completely unlit parts of a photo is a sign of over-exposure or filters? Are you an astrophotographer?
russelldjimmy2 hours ago
Additions without any evidence:
> He just wants things to look cool and design-y
> some random photo
> That doesn't mean anything
This leads me to believe the author of this post doesn’t know what they’re talking about
kristopolous2 hours ago
Right but the medium of a canvas isn't the same as an electronic screen.
What if you empower the user to control their device and use reasonable baselines that maximize legibility
neya28 minutes ago
Wow, I was searching for this exact link for more than a decade (!). I remember seeing it on HN when I was new here and couldn't find the article ever again. Thanks for sharing!
cratermoon2 hours ago
16161d text on a background of fafafc is an 18:1 ratio, sufficient to meet WCAG AA criteria
manbash2 hours ago
I was reviewing a confluence page which was reviewed my many stakeholders. Something bugged me to an excruciating extent about the content of the page: something was off at some parts of the text. I inspected the page and it turns out the font color somehow changed to a mildly grayer color than black. This was likely due to a copy-and-paste that has gone wrong.
carcabob31 minutes ago
This problem has been haunting me for years, except in Google Docs. At some point, some template my team used had slightly gray text, and I STILL find it cropping up in our most recent documents.
designerarvid25 minutes ago
Stupid rule. In that case, why ever change a color?
Just stick to ensuring WCAG 2 AA rating. If your awesome design isn’t AA there better be a good reason. If it is, everything’s fine.
bee_rider31 minutes ago
Everyone should just use something like DarkReader to make these problems go away. Web devs who fiddle with the colors are annoying, but at least they are easy to ignore.
SoftTalker4 hours ago
Dark/charcoal grey is better than pure black for text. But it's still dark enough that most people would call it black.
ChrisMarshallNY3 hours ago
The problem is contrast, really. Some color combos are terrible, and you also have issues with color-blindness (which is why gray is used a lot).
Gray text, against a gray background, can suck.
I’m getting on in years, and low-contrast text affects me a lot more, these days, than it used to.
1122338 minutes ago
Yeah, nothing like neon green on magenta. So much contrast, my eyes each read their own line... ZX Spectrum had some excellent color combinations
carlosjobim3 hours ago
It's not, that's a myth. The blackest black your monitor is capable of is best for text.
mr-pink3 hours ago
so wrong
Twey5 hours ago
More generally use a contrast checker on any pair of colours that are likely to be in juxtaposition and need to be legible.
Helpful of the website to demonstrate the problem in situ in its tag links and code comments! (Maybe just in dark mode?)
SoftTalker4 hours ago
Yes, you want enough contrast, but not too much. Either extreme is hard to look at for long periods.
cryzinger3 hours ago
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!
xnx3 hours ago
Black text on a gray background is how the web was intended to be experienced.
wombatpm2 hours ago
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.
moron4hire2 hours ago
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.
kristopolous2 hours ago
What? No it wasn't. First browser
washbasin2 hours ago
I created a ycombinator account after years of resisting, just to respond to this post. Stop creating web pages with huge-ass gutters/margins.
If you are concerned about design you would realize your page looks ridiculous and borderline illegible on modern screens (that are not phones). Text color is an issue, but layout is worse.
npilkan hour ago
This doesn't seem too far off from ~80 characters per line, which I believe is best practice for readability. Though you could make the column wider and bump up the font size and it would be even more readable.
cyberaxan hour ago
Ah, thank you. The next version of the page will include a YUUUGE sitemap on the left and the table of contents on the right.
We'll also add a wonderful floating text input box to let you chat with our helpful AI assistant.
duskdozer3 hours ago
Well, as long as you're not going to decide to make the dark background lighter to accommodate the brighter text...
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".
dolebirchwoodan hour ago
I appreciate the grey "LIKE?" text above the likes counter. Really drives the point home.
[deleted]2 hours agocollapsed
themafiaan hour ago
> I actually believe increasing contrast for everyone improves the information density of our content.
You used css to change the pointer. So instead of the I-Beam I had to use a regular pointer to select that text. Information density is nice but information access shouldn't be compromised either.
Aside from that, while this is true, I'd think you'd then want something better for your users than "font-family: system-ui".
wobblywobbegong4 hours ago
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 )
ChrisArchitect3 hours ago
A related piece from 2022 that gets a bit more into the why, readability and Accessibility Guidelines evolution etc.
Please Stop Using Grey Text (2022)
https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acf... (https://archive.is/QictZ) [https://news.ycombinator.com/item?id=31420938]
spiderfarmer2 hours ago
Increase Your Font Size First (2026)
signorovitch3 hours ago
I’m looking at gray text on an off-white background right now :P
lelandbatey2 hours ago
This takes me back to "contrast rebellion" back in 2011:
jmclnx4 hours ago
Yes, I wish sites that use grey text should be investigated as part of the US disability act.
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.
msla2 hours ago
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".
AndrewStephens31 minutes ago
You are not alone.
I got criticism on my blog for using a serif font but those people are just … wrong. Serif fonts are just better for reading at all font sizes.
carcabob27 minutes ago
Agreed. I'm very glad Hacker News uses a typeface with serifs on 'I's, 'l's, and '1's. "Sans serif" can be descriptive, rather than prescriptive.
bee_rider28 minutes ago
This Al fellow seems to have gotten up to all sorts of trouble! Probably because he keeps hallucinating.
carcabob25 minutes ago
For a while I'd see "Weird Al" in random headlines or something and my brain would read it as "Weird A.I." and I kept getting very confused.
nikau42 minutes ago
Found secretary of education Linda McMahons account