Ask HN: How did low contrast text become so pervasive?

[mr-pink]

It seems like black on white text is now truly verboten for whatever reason on at least 70-80% of websites.

can anyone explain the benefits? to me, everything looks faded out, and rather than my eyes being able to pick up the letterforms I just perceive a field of gray and have to rely on plug-ins to get easily discernible text back.

[leakycap]

It's funny to me that as I read this post the text is #828282 and the background color is #F6F6EF, a contrast ratio of 2.23:1 failing the 4.5:1 ratio minimum in the Web Content Accessibility Guidelines (WCAG).

[throwawaysleep]

First you will need to convince people that WCAG is relevant. I have worked at over a dozen employers at this point and none of them have thought it worth mention. The anecdotes on Hacker News about it are that the individual devs had to do the legwork to get it considered.

[seanwilson]

It's just people following trends I think, designers not knowing about WCAG, and designers with decent eyesight not knowing to consider people with poor eyesight. Someone sees some elegant looking site that has grey text and/or thin text, they copy it, someone else copies that etc. without really thinking about what it's going to be like to read a long article with that design.

- From my experience working with designers, many have minimal understanding of WCAG and will only adjust the contrast near the end of the design phase (as in, after the client has signed-off on it) to get it within passing limits if they're told to, and only if it's easy to do without spoiling their design.

- The rules for body text are pretty simple and I'm not excusing it, but WCAG is intimidating and confusing for most I think (ask designers why they don't follow it or understand it). There's loads of rules, the documentation is verbose, and it tells you what needs to pass, but lacks guidelines on how to do this in a way that doesn't change the look of your branded designs.

- I've been in this situation as a developer a few times where I'll tell the designer what specific WCAG rules aren't being followed, and they'll not change anything because they don't know what to do without compromising their design e.g. I'll mention "your main brand color can be used for large heading text, but it doesn't contrast enough for buttons", where the options might include picking a darker brand color (a big ask), a darker color just for buttons (might look weird), or maybe black for buttons (will change the look a lot).

- It's really common for designers to pick bright/vibrant colors for the main brand color too that won't be accessible for body/button/link text, so being told they have to pick a darker color can feel like a big unfair restriction, especially when they see large brands or the designers they follow breaking the WCAG contrast rules all the time. Also, when most brand guidelines don't include contrast metrics for recommended color pairings, you can tell this hasn't been thought about much.

To help with the above, I started working on a tool to create branded color palettes, with the idea that you pick the colors for your headings, buttons, body text etc. that have accessible contrast upfront, rather than tweaking the contrast of these as an afterthought later:

https://www.inclusivecolors.com/

[aurizon]

I think some bad web design instructions just get propagated among script kiddy web designers = fat fee for minimal work. I like black on white = I hate beige/fawn text on ochre/puce? screens. I have complained to about a dozen sites = zero response = I endure and visit less.

[throwaway843]

On the one hand, there are lots of articles explaining that #000000 is not true black, and #ffffff is not true white.

On the other, there are lots of articles explaining that black on white will cause readers discomfort so recommend camouflaged light grey on dark grey, or vice versa, as better.

[muzani]

It's designers flexing their knowledge of the 3:1 limit. It's like how architects don't make rectangular buildings, there has to be some curve somewhere.

Some say that black on white is harsh on the eyes, but something like 10:1 should be fine.

[carlosjobim]

There is no reason. Configure your browser to always open sites in reader mode, and you have solved all problems with the modern internet. Both for desktop and mobile.

[sloaken]

Great answer, but rather than throw out all CSS, I would rather keep formatting, but change color. Anything in text that is in the grey spectrum to black. Background to either white or black, maybe other primary colors are acceptable.

Knowing my luck there is a setting already I just do not ...

OMG Firefox has contract control, playing with it now.

[sloaken]

OMG it looks sooooo much better, thanks for leading me to the water, it tastes great!

[al_borland]

Designers have been trained to never use white or black. I believe the justification is less eye strain, but many take it too far.

[tim333]

I think designers, who are mostly young, think it looks hip and don't think about people with iffy eyesight.

[throwawaysleep]

It is meant to look soft and minimal and it looks fine on a brightly lit, expensive monitor.

[brudgers]

Everyone copies Hacker News now.

[everfrustrated]

My theory is it's due to the prevalence of Apple Macbooks which have horrible glossy screens so users have to crank up the brightness to full to see anything at all.

[java-man]

apple. tiny light gray text on white background, barely visible.