5 ms·

It's getting better. I remember just a couple of years ago, many websites had super small fonts with grayed text. SUPER hard to read. Now a lot of sites are u

It's getting better. I remember just a couple of years ago, many websites had super small fonts with grayed text. SUPER hard to read. Now a lot of sites are using minimum 1 rem fonts and even 1.1 and 1.2 (16 points and up). HN is pretty bad in this respect. I can't read it unless its zoomed in 2x.

thejosh 5y ago
What was with the gray text on websites? It was absurd, I chalked it up to designers using Mac screens at the time?
- bombcar 5y ago
  Some study said black on white wasn’t as readable as off black on off white. Of course everyone took it to mean make gray on gray.
- muzani 5y ago
  I think there was a time where people thought #FFFFFF backgrounds and #000000 text was boring. Probably influenced by http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ which was being used as CSS minimalist best practice for some reason. And there were tools like https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ where you can check whether your gray on gray meets accessibility guidelines. So designers would hug as close to accessibility guidelines as possible, as a show of skill. Then there were memes like this going around: https://www.boredpanda.com/designer-price-list-client-helps-digital-synopsis https://www.boredpanda.com/designer-price-list-client-helps-... So people decided to trust the designers to do their jobs and nobody brought up the obvious downsides of gray on gray. And if they did, the designer would point out that it meets WCAG AA requirements, which is safe for disabled people. Who is the PM to argue with the expert who knows their data?
- Turing_Machine 5y ago
  Bad designers trying to imitate what they thought was the "Apple look". However, if you actually go to any Apple site and look, you'll find that the "gray" thing is largely only for headings and short text snippets (usually at a larger font size to boot). Long-form text (e.g., developer docs) is, and always has been, in a good high-contrast color scheme. Example: https://developer.apple.com/documentation/webkit/wkwebview https://developer.apple.com/documentation/webkit/wkwebview

thejosh 5y ago

What was with the gray text on websites? It was absurd, I chalked it up to designers using Mac screens at the time?

bombcar 5y ago
Some study said black on white wasn’t as readable as off black on off white. Of course everyone took it to mean make gray on gray.
muzani 5y ago
I think there was a time where people thought #FFFFFF backgrounds and #000000 text was boring. Probably influenced by http://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/ which was being used as CSS minimalist best practice for some reason. And there were tools like https://webaim.org/resources/contrastchecker/ https://webaim.org/resources/contrastchecker/ where you can check whether your gray on gray meets accessibility guidelines. So designers would hug as close to accessibility guidelines as possible, as a show of skill. Then there were memes like this going around: https://www.boredpanda.com/designer-price-list-client-helps-digital-synopsis https://www.boredpanda.com/designer-price-list-client-helps-... So people decided to trust the designers to do their jobs and nobody brought up the obvious downsides of gray on gray. And if they did, the designer would point out that it meets WCAG AA requirements, which is safe for disabled people. Who is the PM to argue with the expert who knows their data?
Turing_Machine 5y ago
Bad designers trying to imitate what they thought was the "Apple look". However, if you actually go to any Apple site and look, you'll find that the "gray" thing is largely only for headings and short text snippets (usually at a larger font size to boot). Long-form text (e.g., developer docs) is, and always has been, in a good high-contrast color scheme. Example: https://developer.apple.com/documentation/webkit/wkwebview https://developer.apple.com/documentation/webkit/wkwebview