Stop using grey text (2025) (opens in new tab)

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

* 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.

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.

> There's pretty much nothing in the natural world that has the contrast ratio a modern screen can produce.

The natural world has much better contrast than the majority of screens. Not everyone has or affords a Mac Retina display. The main issue is, that, since some 10 years, UX experts appeared who pushed away configurability in favor of gray on gray ( remember when you were able to select the background and foreground color ?). The majority of screens have crappy contrasts (100:1).

The idea that "nothing in the natural world has the contrast of a modern display" is backwards and keeps being repeated. The real world has far more contrast than any screen that can be manufactured.

Think about standing outside on a sunny day. The sunlit pavement might be tens of thousands of times brighter than the shadow under a tree. Look up at a bright cloud and then glance into a shaded doorway. Your eyes can still make out detail in both. The dynamic range of the real world the ratio between the darkest and brightest things present at the same time is enormous.

Cameras struggle with this. When you take a photo, the camera can't always capture both the bright sky and the dark ground correctly at the same time. Either the sky blows out to white or the shadows become black. That limitation is why HDR photography and exposure bracketing exists.

Even modern digital cameras still capture a far wider range of brightness than most displays can show. That's why we use tone mappers in photography and video. Tone mapping compresses the huge brightness range captured by the camera so it can fit onto a display that only has a tiny slice of that range.

So screens are not "more contrasty" than reality. They're the opposite. Displays are a bottleneck that force a very wide real world brightness range into something much smaller.

Your eyes are also incredibly good at adapting. If you look at a white page of paper in sunlight and then look at black ink on it, the contrast between the two is extremely strong. Snow in sunlight next to a dark rock is another example. Nature is full of intense light and dark differences.

When web developers avoid strong contrast because it feels "unnatural", they're misunderstanding the physics and the biology. High contrast between text and background isn't artificial at all. It's actually closer to how humans evolved to see clearly: dark shapes against bright surfaces or bright shapes against dark ones.

The real ergonomic problem with screens usually isn't contrast between text and background. It's screen brightness relative to the environment. Many people run their monitors far brighter than the room around them. If a screen is glowing like a light source in a dim room, the whole display becomes visually harsh and fatiguing. In ergonomics, the usual advice is to match the screen's brightness to the surrounding lighting so the display feels like part of the environment rather than a flashlight in your face.

When display brightness is set appropriately, strong text contrast simply improves legibility. The discomfort people blame on "too much contrast" is often just a monitor that's set far brighter than it should be. Reality itself contains vastly wider brightness differences than any display, so high contrast text isn't unnatural at all. It's a practical way to make information clear within the limited dynamic range that screens can actually show.

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.

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.

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.

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

16161d text on a background of fafafc is an 18:1 ratio, sufficient to meet WCAG AA criteria

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!

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.

It's not, that's a myth. The blackest black your monitor is capable of is best for text.

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.

so wrong

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.

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.

What? No it wasn't. First browser

https://www.w3.org/MarkUp/tims_editor

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.

Have you ever seen a book?

They have huge gutters and margins, and not-quite-black text on creme/off-white/never-actually-white backgrounds... why? Because it's easier of the eyes for long blocks of text.

Depends on the width of the browser window. Wide margins that are welcome in a full-page browser on a large or ultrawide display are cancer when I'm tiling windows 2 or 3 up on a smaller or narrower display.

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.

Or the other way round—if you feel the contrast is too high, your screen may well be too bright and you should reduce its brightness.

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.

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.

Found secretary of education Linda McMahons account

This Al fellow seems to have gotten up to all sorts of trouble! Probably because he keeps hallucinating.

When I saw yet another crooked google font I configured my browser to display all text in Verdana ignoring fonts chosen by page styles. It's much easier to read when everything is in one font to rule them all.