Contrast Rebellion

by gjvc • 3 years ago

280 144 3 years ago

doodlesdev2• 3 years ago

It would be nice since they are advocating for readable text if the font sizes were appropriate on mobile. Even funnier is that lighthouse shows a multitude of accessibility problems in the page including.... low contrast.

https://pagespeed.web.dev/analysis/https-contrastrebellion-c...

Apparently the reason for the awful sizing on mobile is missing the responsive viewport meta tag... IDK, I agree with the content of the website but it's just mind-numbing that it has these issues.

jdthedisciple2• 3 years ago

Agreed, this site was a rather unpleasant experience to read and contrast was certainly among the issues for me as well.

How ironic.

ryanschneider• 3 years ago

It also doesn’t support reader mode, and the tan text is very hard for me to read.

mthoms2• 3 years ago

It was written in 2011. Was that tag in regular use at that time? I have no idea.

doodlesdev2• 3 years ago

For reference the iPhone 4 had already been released, so mobile design was already a thing. The viewport meta tag wasn't a thing though, or at least not widespread as HTML5 release spec was finalized by W3C in 2014.

I did not see that the website was this old when I first saw it. Still, I've used websites from the 90s that worked better on mobile lol (I also used websites in 2023 that were awful, to be fair).

usernew2• 3 years ago

Well, the reason it shows "low contrast" on the page, is because the purpose of the page is to illustrate the low contrast problem. There are many sections that show the contrasting example of good contrast. What you're doing is running two virus scanners, and the second one finds the quarantine folder of the first one. You then claim the first antivirus is a virus. Nope.

This was not a website designed for mobile - that's why it doesn't look appropriate on mobile. Not every website is designed for mobile - in fact there are usually two completely different websites for mobile and desktop. This one is only for desktop. This complaint is like renting a sports car and complaining it's not doing a good job at transporting your piano.

There is one actually valid issue with the website though, which you do not bring up. It singles out websites for some reason, when the issue has zero to do with websites. Windows itself - all over the place - has ridiculous light gray on white, or light gray on dark gray (in dark theme). It's literally not readable half the time. Android has the same - now with more empty space, and page scrolling through 2 lines of tiny text and a toggle that changes description on toggle, so you don't know what it's doing. Heck, the service tag printed on the bottom of my silver dell laptop, is gray.

then we have things like expensive custom license plates with nature pictures and a tiny font. that all the drug dealers buy. and lastly - faces. the only way to tell a nose from a cheek from afar, is light-tan vs dark-tan (in the shadow). And with some people, the only way you can find them at night at all, is if they smile at your joke.

blep-arsh• 3 years ago

To quote the website, "designers need to think of <...> reading on tiny screens"

MrJohz• 3 years ago

I do a lot of web development, and a lot of that is stuff designed for desktops. I do my best to make sure it works as well as can be expected on mobile devices as well, but I completely agree that it does make things more complicated, and that often you do need a different design, or at least a very flexible design.

But this is not a complicated web application, this is a web document. If they had just added the right meta tags, it would have probably been enough. I'd be surprised if you really even need media queries for a page like this, just judicious use of `rem` and `%`. It's also very easy to test - just make your browser window thinner. Or open devtools on the side, and drag it around a bit. Or there's even a button in most browsers' devtools where it'll show the page in different common mobile and desktop sizes. I think lighthouse usually defaults to mobile too. (Not that lighthouse is necessarily all that valuable of a metric, but it's there, it's a couple of clicks away.)

The point the website is making is that accessibility is important. Light text on a light background might be aesthetically pleasing, but it's difficult to read for many people, and as developers and designers, we have a duty to make our work accessible. I fully agree. But mobile users - and especially mobile-only users - are also an important demographic, and deserve accessibility considerations as well.

Especially when those accessibility considerations would take at most half an hour of work.

jrochkind12• 3 years ago

You believe some of these sections are _meant_ to be bad contrast, while others are meant to demo good contrast?

Which are which?

I can't understand exactly which sections the lighthouse report is flagging. I also thought I wasn't sure some of those sections were sufficient contrast, but all the ones I tested actually did pass WCAG contrast test.

If the web page has chosen to make some sections intentionally bad contrast but others good contrast, without telling you which are which... that is not the educational strategy I would have picked. But I'm not convinced it's doing that.

But you are?

meatjuice• 3 years ago

Well, I guess I should make mobile-web rebellion.

Slackwise• 3 years ago

This was not a website designed for mobile - that's why it doesn't look appropriate on mobile. Not every website is designed for mobile - in fact there are usually two completely different websites for mobile and desktop. This one is only for desktop. This complaint is like renting a sports car and complaining it's not doing a good job at transporting your piano.

This is a very problematic take, and is simply inaccurate when it comes to the web.

If you write zero CSS, a web page will render just fine on any display. Text will auto-wrap and be legible. The web is "responsive" by default. It's the designers who try to rigidly align things with specific widths, explicit sizes, and absolute values that make web pages harder to read and use.

Meaning, any given element shouldn't have a `width`, it should have a `max-width` instead. Text should have a relative font size to headings or other text. Alignment should take into consideration overflow, as it will by default with flexbox and grid. Everything by default will flow in some way and try to make it onto the page.

It's all the violence of designers that makes things both less device friendly and less accessible, just like these poor contrast decisions.

chrismorgan3• 3 years ago

Well, the reason it shows "low contrast" on the page, is because the purpose of the page is to illustrate the low contrast problem.

No, those parts are done as screenshots. The places it’s complaining of low contrast are in the actual document and supposed to be high enough contrast.

Not every website is designed for mobile - in fact there are usually two completely different websites for mobile and desktop.

This was never true. Websites that split desktop/mobile completely were always a tiny minority across the entire web, though a decade or so ago it was certainly absurdly common among big players. But fortunately those days are past, and the considerable majority of sites that ever had a hard split have unsplit.

No, in this case it’s just a badly-implemented website from an era where that didn’t matter quite so much, and they haven’t fixed it in the decade since.

account42• 3 years ago

in fact there are usually two completely different websites for mobile and desktop

Only if your designer is too clever for his own good.

Plain HTML works fine on mobile (with the meta tag added to tell mobile browsers no to be stupid) so if your website doesn't then it's because something YOU deliberately added.

masswerk2• 3 years ago

If you follow the site of the day (SOTD) link, it says, "Site of the Day - Aug 3, 2011". (Nearly 12 years ago.)

luketheobscure• 3 years ago

I'm not sure why those sections were flagged for low contrast. Manually checking the contrast for those colors at https://webaim.org/resources/contrastchecker/ shows that they are all WCAG AAA compliant.

over_bridge• 3 years ago

I feel like this website sold me on a problem then finished before reaching a solution. Was there advice on how to do better? Maybe I missed it.

cabalamat• 3 years ago

Er, surely the solution is obvious? Just use higher contrast colour choices. And while we're at it, get rid of stupidly thin fonts.

Y_Y• 3 years ago

They use the "desaturated" hn text as an infringing example. Shots fired!

I'm totally on board with their thesis and was about to come here and sing their praises, but then I found that they've annoyingly conflated page links and anchor links so the back button didn't do what I expected it to.

In any case playing whack-a-mole with modern web design flaws seems worthwhile to me so I'm in favour.

enlyth• 3 years ago

Yeah the desaturated text on HN is confusing. It is for example, applied to flagged posts, so I first associated the lower contrast with being flagged, but then I noticed it is also applied to self posts like Ask HN or Show HN, and I kept wondering why are all these people getting flagged? Turns out it is just the way it is.

Not to mention it's also hard to read. While this website works well and has a great community, it is kind of the embodiment of this meme: https://twitter.com/TheProgrammerMe/status/16528824903596810...

beardyw• 3 years ago

So my comments are not down voted, just desaturated!

fsh• 3 years ago

One of the worst offenders is Obsidian. Users on hn keep praising the UI, but by default the menu text is borderline unreadable under less than ideal lighting conditions.

mech422• 3 years ago

I don't complain too much about VS Code and Obsidian as there are so many themes that are just a click away... I even have matching themes for them, which is nice since I use them together a lot.

But in general, I have issues with site font sizes and contrast as well. I'm extremely near sighted, and getting older - I have no idea how people can actually read long form content on cell phones with the tiny screens...

detrites• 3 years ago

Scroll-behaviour hijack and unreadable text on mobile?

nahuel0x• 3 years ago

Not only text... take Whatsapp, used by all people with a cellphone in the world, whose sent and read check marks are distinguished only by a subtle change of color instead of having different icons.

7sidedmarble• 3 years ago

All people outside of the States

wildrhythms• 3 years ago

I work with graphic/UI designers and I have to be the one to advocate for using more than color to differentiate states, and to meet acceptable contrast ratios. And don't get me started on hiding things behind hard to discover hover states. The managers who are supposed to oversee the development of these products don't give a shit about accessibility. Sad state of affairs.

denton-scratch2• 3 years ago

The managers who are supposed to oversee the development

Yeah, I can understand kids wanting to play with whatever's new in HTML5 etc. But I don't get why the manager in charge of the project doesn't say "Yes, very cool; but it's unreadable if there's sun-glare. Fix it, please."

Well, I do sort of get it; the manager's a kid too, and he likes custom controls and "distinctive" typography as much as the developer, and doesn't know anything about accessbility. I'm not talking about real accessibility; I just mean ordinary people being able to access the content.

Yeah, you can say "fuck it, I'll go somewhere else". But a lot of sites that I rely on have unique content.

kps• 3 years ago

This site flips between dark-on-light and light-on-dark, at least one of which is a visual encumbrance to some people — see ‘astigmatic halation’ — and the other of which may well be to others. (In my experience, switching between the two, as too many sites do for code display, is the worst.)

If you're not using browser default colors, respect `@prefers-color-scheme`.

hartator• 3 years ago

Join the don’t-hijack-my-scrolling rebellion.

jdthedisciple2• 3 years ago

I annoyingly had to zoom in and out to read some of the texts on this site on mobile.

Not to mention the deplorable scroll-hijack.

I think we may need a whole series of rebellions.

gumby3• 3 years ago

I’m in. I’ll go fetch the tumbrils.

XorNot• 3 years ago

I was hoping for a browser extension which would automatically replace "shade of grey" text with black.

layer83• 3 years ago

For Firefox at least there is the Font Contrast extension: https://addons.mozilla.org/firefox/addon/font-contrast-fix/

xigoi• 3 years ago

Try out Dark Reader.

ZoomZoomZoom2• 3 years ago

For paper you'd like the maximum contrast, but screens emit light, and maximum contrast puts additional strain on the eyes. There's a big but, though. This is for people with normal eyesight. As far as I understand, some people require this hurtful (to me) level of contrast just to be able to read. Additionally, you can significantly lower contrast just adjusting your monitor's brightness, but there's a limit on how far can you go in the opposite direction and it doesn't help if there's not enough contrast to begin with.

If you can't solve it with CSS presets, I think it's better to stick with higher contrast for these reasons. For my blog I just use black-on-white, even though for me personally it's too much if it's more than just a couple of paragraphs. I tend to lower my display brightness while checking my own blog. :)

Another nuance I don't see discussed is at least not keeping the empty background around the content div at the maximum value level. It's just emitting pure light around the main content for no use.

chrismorgan3• 3 years ago

but screens emit light, and maximum contrast puts additional strain on the eyes

Depends on the screen. You don’t know if the viewer is using e-ink or something like that (or even printing to paper—though in that case especially, colours specified in your stylesheet are more likely to be just ignored). If they’re using an LCD or similar, you also have no idea about their brightness settings. They might be ridiculously overbright, as is stupidly common, or “maximum contrast” may actually be delightfully pleasant because they’ve got sensibly-set brightness. Certainly for me in my current lighting circumstances, simple black on white will look delightful, matching the ambient lighting neatly.

ZoomZoomZoom2• 3 years ago

Well it's just a problem of finding the baseline.

I tend to think the "sensible" setting for the hardware is to afford the maximum dynamic range. This way no loss occurs if the material requires it, but if not, it needs to be limited it in software. This, of course, would lead to "ridiculously overbright" text, and limited contrast solves this problem more or less completely (this is why I override the background colour for my PDF viewer). My opinion is influenced by working with graphics, though.

I also believe the most common display technology used for desktops should be this baseline, and currently it's LCD.

However, this creates problems for people with different hardware and different eyesight and light sensitivity. Perhaps it's the OS that should provide some tooling to display the colours differently for different displays and different modes (image/text/other). The changes must be informed by the software, so for example, you could mark you site's colourscheme as "for reading" and the dynamic range would adapt properly.

The way the OS adapts that I saw is atrocious, perhaps because optimized for a different metric. My laptop changing the display brightness and contrast when I use Windows on battery looks bad regardless of what's on display.

NathanielK• 3 years ago

but screens emit light, and maximum contrast puts additional strain on the eyes.

That's just a problem with manufacturers putting displays with high dynamic range into devices and not putting decent HDR software implementations in.

Some apple devices are smart about it though. When you open up an HDR video, it cranks the backlight to make those highlights pop, but dims the LCD by lowering the contrast in software. This means high contrast websites don't sear your retinas while your media can still take better advantage of your display.

https://prolost.com/blog/edr

kentonv• 3 years ago

Weirdly, this site uses `color: #1b1b1b` instead of black.

Why? The difference is barely noticeable, but black provides more contrast and IMO looks better than #1b1b1b.

I've seen many designers assert that being slightly off-black is "better" for some reason, but isn't this the same argument that eventually leads to low-contrast designs? Why is a little bit of contrast reduction good, but a lot is bad? Pure black always looks (slightly) better to me (I commonly open the inspector and toggle the color to test this). And anyway, the variation in people's monitor settings is probably much wider than the difference between #1b1b1b and black, so what is even the point? Why waste brainpower trying to decide exactly how much contrast reduction is good, and risk going too far for some people while creating an imperceptible difference for others?

(To be clear, if it's not obvious, I'm a big fan of this site's message... but apparently I'd go even further.)

kdazzle• 3 years ago

First time I read an argument against all black in design was this 2012 article. Something about it not being a color found in nature. Then, yeah, some people seemed to interpret it as “use gray on gray”.

https://ianstormtaylor.com/design-tip-never-use-black/

amelius3• 3 years ago

Funny, all these strange glyphs also don't seem to appear in nature ...

pmontra• 3 years ago

Backlit screens are not found in nature too. Maybe 100% black is appropriate in that unnatural environment. It's great on my screen.

layer83• 3 years ago

What this argument overlooks is that pure black also isn’t found on computer displays. Even for OLED, black is really dark gray if you have any amount of ambient lighting. Displays are a part of nature in that sense.

marcosdumay2• 3 years ago

That is a very old lesson, for painting.

A few things are truly black, because you don't get to see their color. But "nothing" has actually the color black.

Anyway, even for painting, the fact that they have a paint for it means it happens on nature. It's just very rare, so everybody has to learn the lesson that no, you don't use black paint for that black thing you are seeing.

For computer interfaces the entire thing is obviously bullshit since the beginning. But well, our area has a thing for accepting obvious bullshit.

masswerk2• 3 years ago

Mind that the site in question is from 2011 (compare the site-of-the-day link). So this is a reaction to trends even prior to this.

mcdonje2• 3 years ago

The central idea there is to tweak the darks to align with the color palette, not to just make them gray.

davemp• 3 years ago

I don’t get the “found in nature” arguments. We’ve likely been using black (carbon) markings for thousands of years.

epiccoleman• 3 years ago

It's funny, because I've never really thought hard about this, but I made a similar decision on my personal site.

My site has a "dark mode" style theme - dark background and "white" text.

When I was initially designing the theme, I opted for a slightly-less-white text color, and as I've spent more time on it, I ended up bumping that color to be closer to pure white. (I'm using Tailwind, so this change amounted to "text-neutral-400" -> "text-neutral-300".)

I think I did this because the "more white" color seemed... sharper (very insightful, I know)? Like it was "an assault on the eye" to have the color be so bright. As I continued working on the site, I decided, in short, that that was stupid, and that I should have more contrast.

This was a good reminder for me that some of my pages need that styling updated, but it works out well for demonstrating the difference:

This page has the old, less contrasting color for the body text (text-neutral-400): https://epiccoleman.com/posts/2023-03-07-how-i-built-this-si...

This page has the new, "whiter" color (text-neutral-300): https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...

After skimming through these again as I linked them in this post, I think I could even bump it up to be even closer to white.

I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast.

Anyway, not to ramble, but I guess my point is - design is hard! It's not easy to take into account all the myriad different factors that need to be considered to make designs that look aesthetically pleasing while maintaining readability at various brightnesses and screen sizes and so on and so forth.

Edit: One other consideration - I wanted some color contrast between elements like text, headings, and the post date - so that's another thing I was trying to take into account. For example, if you want your headings to be a bit brighter than your text, you're left using (for example) text-neutral-200 for headings and text-neutral-300 for text. Again, as I continued tweaking, I realized that the size difference between headings and text does enough work establishing contrast that this was unnecessary - but it's just one more factor in a long list of things a designer has to think about to make things look right.

DiabloD3• 3 years ago

I also have a pretty bright monitor (it's an Apple Thunderbolt Display that I got for a pittance from my old office when they switched to Dell monitors). So that may be influencing me towards slightly less contrast.

This part of your problem: if you're doing any design work, understand the specification you're designing for. This goes for any photographer, print designer, or web dev.

sRGB, bt709, rec2020, and SDR content in rec2100 contexts define the brightness of white as 100 nits, and is generally considered acceptable to be between 100 and 120 (as you often need to offset for ambient lighting to maintain perceptual white).

Your perception of both luma and chroma contrast, but also your perception of color itself, changes over the range of brightness your eye can perceive; the organic gamma curve of your eye also changes. Example: sRGB gamma and bt1886 EOTF are intended to be used with content that has a 2.4 gamma and a near-D65 whitepoint at around 100 nits; the same content at "theater darkness" (48 nits) will be encoded with a warmer/yellower white point, at 2.6 gamma, to maintain perceptual similarity.

And why is this? The rods (low light vision) and cones (bright light and colors vision) in your eye have different organic gamma curves (incl. each of the three cones have different curves in-of themselves), and the rods do not respond to all visible light equally and have a broad "color" of their own and rods continue to function and influence perception in bright light situations.

You can argue, "but Diablo, most people do not calibrate their displays", which is absolutely true; most displays, however, are manufactured with defaults that mimic the intended use of sRGB and bt709 content, and users, left to their own devices, generally will choose a brightness that approximates 100 nits plus an appropriate offset for ambient.

However, even for your own personal website, buy a colorimeter, whip out the DisplayCal software, set your profile to "Video (D65, BT1886)" (not "sRGB" due to modern content being mastered entirely for displays manufactured in the past 15 years; BT1886 handles perceptional similarity and better in dark values than sRGB's weirdly defined ramp), and then enjoy being able to author content for a wide range of displays.

layer83• 3 years ago

The irony is that “pure black” (#000) is already off-black on non-OLED displays. IPS displays in particular are relatively low contrast and have poor black levels, often further worsened by IPS glow.

chrismorgan3• 3 years ago

On TN panels, #000 looks horrible from bad angles (mostly below, from memory—it’s years since I’ve had to endure a TN panel), and #1b1b1b would actually look much better and even darker.

marcosdumay2• 3 years ago

I'm not a designer, but personally I like to reserve the extreme colors for the rare occasions you need something "blacker than black" or the equivalent with your color.

Tao3300• 3 years ago

It's a holdover from color printing processes. Rich Black (100% K over another color) and Registration Black (full everything) can look bad or even damage the paper.

It's like design's equivalent of not ending sentences with prepositions.

ilyt3• 3 years ago

The difference is probably more noticeable on OLED screens that have "true" black.

For personal themes I do use a bit of off black, althought usually it's something like very dark gray. It just makes screen not a complete black hole late at night

__MatrixMan__• 3 years ago

Where's the rebellion part of this rebellion? I was hoping to light something on fire.

amelius3• 3 years ago

With all the AI we have these days, why can't browsers have auto-contrast?

newhotelowner• 3 years ago

And thin font for the paragram. Why? It may look nice on mac but everywhere else it's not readable.

noisy_boy• 3 years ago

Dark reader[0] has been a godsend when it comes to readability. Sure the content isn't how the creator intended it but most of the pages don't have a dark mode option so Dark Reader's rendering suits my eyes and I find that to a certain extent, it also improves readability, especially for those low-contrast texts.

[0] https://darkreader.org/

mthoms2• 3 years ago

Just a heads up to everyone complaining about the (valid) issues on mobile and elsewhere with this site. It doesn't appear to have been updated in 12 years. In 2011, the newest iPhone was the 4s.

https://web.archive.org/web/20111006171723/https://contrastr...

Just adding some context.

wetpaws• 3 years ago

Ironically the web page is unreadable to me with all those yellow on black and black on yellow.

FiddlerClamp• 3 years ago

For the past 20 years, I've been using the 'zap' and 'zap images' bookmarklets from this web site:

https://www.squarefree.com/bookmarklets/zap.html

They don't work on every site, but they're a good start. 'Reader mode' bookmarklets like https://github.com/lordastley/readable can often be configured for simple white on black text too.

mkidd• 3 years ago

This is a huge pet peeve for me. Shouldn't this be a “solved” style problem in 2023! I'd gladly fire every tenth web designer responsible for this problem regardless of their other merits.

Small fonts are one thing. There are browser hot keys to change the font size. And I'm a huge fan of the "Zoom Text Only" option in Firefox where the rest of page doesn't go flying off the edge of my viewing area. But low contrast text is hugely annoying. What are my options? Open the developer tools and tweak the CSS every time? Try to find a good browser extension that solves the problem? Write my own? And some of these solutions are inconvenient or impossible on mobile.

I understand using low contrast text (and small fonts) for tedious but necessary legal disclaimers. But if you use it elsewhere, I'll move on—either you have nothing to say and don't really want people to read the text, have a poor designer, or are generally incompetent.

ComodoHacker• 3 years ago

Dark Reader extension tries to solve this problem. It's primary use case is adding dark mode support, but it can help with contrast too.

denton-scratch2• 3 years ago

Shouldn't this be a “solved” style problem in 2023!

Grey-on-grey text is idiotic. It's everywhere. So is scroll-jacking; so is weird animations on text articles (The Guardian does this from time to time). So is web-pages that come up as a sheet of whiteness, if you don't want to run javascript indiscriminately (REACT, I think). So is megabytes of script, just to display a page of text.

This kind of stuff is weenie web-developers, showing off. I used to do that - in 2001. It's fun. But I wasn't designing high-profile websites with important text content.

AtlasBarfed2• 3 years ago

Angry old man take: people that do HTML are young people that don't mind doing fairly complex technical work for peanuts, because they can get visual satisfaction more quickly.

"Design" is something that is after a one or two trick pony. It is intended to disrupt known patterns (often loaded with decades of collected wisdom, sometimes legitimately backward).

Since the UI footsoldiers are all underpaid interns being churned on a yearly basis, collected wisdom won't be transferred unless it was provided in education.

It's not just HTML. There's a reason the same IT mistakes occur over and over and over. IT ages out all the people that achieve "wisdom". They either move above the point where "progress and wise refinement" would occur into the world of enterprise visio diagram engineering, or out of the industry period.

Now get off my lawn.

carlosjobim• 3 years ago

What are my options?

Set your browser to open every website in reader mode by default. It takes one week to get used to and then you will never want to go back. You can without hassle add exceptions for those websites that are not good in reader mode. This solution works great on desktop and mobile.

arp2422• 3 years ago

What are my options? Open the developer tools and tweak the CSS every time? Try to find a good browser extension that solves the problem? Write my own? And some of these solutions are inconvenient or impossible on mobile.

I wrote a bookmarklet a few years ago that doesn't always work, but does work most of the time.

  javascript:(function() {
      document.querySelectorAll('p, li, div').forEach(function(n) {
          n.style.color = '#000';
          n.style.font = '500 16px/1.7em sans-serif';
      });
  })();

I find this a good compromise between "the original design" and "reader mode", which I find often changing too much.

Biggest downside is that it doesn't work well for "dark mode" websites, where low-contrast seems the most prevalent, but I find "dark mode" very hard to read even with good contrast so I typically tend to just not read those sites unless I really need to.

callesgg• 3 years ago

To hell with webpages that alter scrolling behavior.

But to be fair this page was better than most pages that dare to do it, it was almost not buggy on this page.

Culonavirus• 3 years ago

Buy an OLED monitor/tv and an OLED smartphone. The issue is still there, but to a much lower degree. Also, black is black (off). "Once you go black, you can't go back."

NikolaNovak• 3 years ago

I'm always amused by HackerNews being presented as this awful, unreadable, low-contrast atrocity, when it is the most user-friendly, easiest-to-read, most seamlessly customizable thing I access on literally any given day.

That being said, yes; awful low-contrast sites exist. But it's not, hah, black and white. There's certainly such a thing as too high of a contrast - depending on the person, monitor, and background light.

JJMcJ• 3 years ago

HN has the better choice. If you don't want stark look of black on white, change the background color, not the font color.

Not quite sure what the point of some comments being in lower contrast.

least• 3 years ago

The comments in lower contrast are ones that have been downvoted. The more it is downvoted the less and less visible it becomes. It's clever but it makes the site less accessible.

But other elements, including submission text like in an Ask HN thread are also too low contrast.

Kwpolska3• 3 years ago

The default font size on HN is unreadable, and has issues with contrast, especially with downvoted or text posts.

ben_w• 3 years ago

especially with downvoted or text posts.

I think making them unreadable is the point?

arp2422• 3 years ago

The default font size on HN is unreadable

Arguably the best feature of the web is that any content can be zoomed in and out as much as one pleases without problems. It does break on some websites, but as someone who zooms in most content I find it's relatively rare.

If you make text large you will have people complaining the text is too large. If you make text small you will have people complaining the text is too small. You you make text somewhere in-between you will have people complaining from both ends. So as long as you ensure it can be zoomed it doesn't really matter.

lmm3• 3 years ago

It's 9pt text, if that's unreadable the issue is with your user agent. I know a lot of browsers behave poorly on larger displays, but having each website guess how big a typical monitor is and use a treadmill of increasing font sizes is not an answer; you should demand better behaviour from your browser.

marssaxman• 3 years ago

The default font size on HN is unreadable

There's something ironic about the fact that I am reading your statement, then.

cratermoon• 3 years ago

The fonts on HN are a bit small. I have my browser set for HN to get a 125% magnification.

The comment text is a nice #000000, but the rest of the text is #828282, which is insufficiently contrasty. Lighthouse flags this, as well as some other accessibility issues.

I notice that on mobile the front page will sometimes have tiny text and if I reload then it will be larger. I'm not sure why the non-deterministic behavior there.

The line length of about 144 is uncomfortably long. It should be about half that. Line height of 1.5 would improve readability as well.

FpUser2• 3 years ago

I do not think people in general need maximum contrast. What they need is near optimal contrast and there are objective recommendations on how to achieved it.

What we often have instead is barely readable light gray text in the name of "clean" design. Well it is not clean, it is moronic. If creators disrespects potential readers that much they might as well present blank screen and be done with it.

crazygringo2• 3 years ago

Normal comment text on HN is fine, but the title and description text on a post page is absolutely awful low-contrast.

It's medium gray on light gray. It's #828282 against #F6F6EF, a contrast ratio of 3.54:1 which is a fail. WCAG 2.0 level AA requires at least 4.5:1 for normal text. This isn't subjective or aesthetics, it's an objective measurement.

It's genuinely uncomfortable to read when it's a long "Tell HN" or similar.

There's certainly such a thing as too high of a contrast

Not really, as long as you can adjust your screen brightness. That's what screen brightness is for. You can always decrease contrast that's too high, but you can't increase it much if it starts too low.

542458• 3 years ago

This isn't subjective or aesthetics, it's an objective measurement.

I’m going to push back against this slightly (I’m not disagreeing that the HN contrast is bad, but I am challenging the WCAG ratios). It’s objective, but it’s not a good measurement. WCAG computes contrast in sRGB, which is not perceptually uniform. As such there are cases where WCAG will give better scores to worse contrast. For example, the WCAG math prefers black text on a medium blue background to white text on a medium blue background, which is the exact inverse to what most people feel is most legible.

https://github.com/w3c/wcag/issues/695

It’s the biggest thing I wish would be changed in the WCAG.

dragonwriter• 3 years ago

This isn't subjective or aesthetics, it's an objective measurement.

Its an objective measurement, but whether the standard is correct or not is a subjective question of aesthetics. Or it could be empirical question if there qas a performance goal tied to it, and it was a testable proposition whether the objective measure corresponded to the performance goal optimally (sibling comment addressing perceptual uniformity suggests that for any given performance goal, that probably is not the case.)

UncleMeat• 3 years ago

Hackernews has tiny up and down arrows and minimal contrast on downvoted comments. A pain to use on mobile.

hiccuphippo• 3 years ago

The size and spacing of the links and buttons could be bigger on mobile though.

zagrebian• 3 years ago

Try reading HN on an entry-level laptop with a crappy LCD display outdoors on a sunny day.

rodgerd• 3 years ago

And that's before considering the fixed width.

Swizec• 3 years ago

outdoors on a sunny day

Outdoors on a sunny day is no time to read HackerNews! Get offline and enjoy your day.

Fear not downvoters, I speak as a fellow addict.

ilyt3• 3 years ago

That's more statement due to how terrible other sites are; for example's HN utterly fucking idiotic idea of making any "Show HN" posts text body light gray

jamiek882• 3 years ago

Ha! Until reading this I thought those were downvoted or flagged posts that were grey on grey!

vasco2• 3 years ago

HN's page styling is simple and stable enough that if someone comes here often and has any sort of visual or readibility complaints they can just fix their own issues by modifying the CSS in my opinion.

Paul-Craft3• 3 years ago

"The user can fix it themselves" is not an excuse for making something broken on purpose.

jonplackett• 3 years ago

I agree with the contrast rebellion

But it’s a bit ironic that this website is impossible to read on mobile because the font is TINY - my other massive pet peeve as a person without particularly good vision.

gnicholas• 3 years ago

sometimes we only think about aesthetics. Clearly, aesthetics are important but aren't the ultimate goal of design.

Exactly — we get caught up in form over function. The goal of text is to be readable, not to look pretty.

Text display formats like BeeLine are aesthetically nontraditional (to put it kindly), but from a readability perspective they are a godsend for many readers. [1] BeeLine is typically offered as a user-configurable option, and most sites with BeeLine have it off by default. But some sites have found it to be so helpful at increasing engagement that they actually turn it on by default. As one user put it: "it's ugly, but it works!".

1: http://www.beelinereader.com [disclosure: I am the founder]

syngrog66• 3 years ago

best practices:

1. user resizable text fonts

2. user zoomable regions

3. on screen: white on black, default. users can tweak

4. on paper: black on white, default.

5. (related to 3 and 4) when looking at a PDF on screen let user see it as white on black, if wishes

these are all in my own personal rulebook of software engineering best practices anyway

"Kids, get off my lawn."

throwanem• 3 years ago

They're no longer hijacking scroll - progress! Now if they could just figure out how responsive design actually works, and make this readable on any screen size smaller than the ones it was built on...

FpUser2• 3 years ago

I am all for removing this light grey text on white background abomination.

Also I understand that "Beauty is in the eye of the beholder,". In my personal opinion barely visibly text is not "beautiful" but rather ugly.

detourdog• 3 years ago

I'm dumb struck that any design focused company can ship white text on a grey background.

AtlasBarfed2• 3 years ago

Ok, this is much better than pointless fashion font BS.

Notice how the washed out look mirrors interior wall grey-on-white that dominates everywhere.

It is funny that the #1 enlightening story of 2023 so far for me is the study that "color is disappearing from the world".

I can kind of see it in this site. Color is an opinion. White/grey is a lack of opinion. Black fonts are YELLING AT PEOPLE. Grey-on-grey is surreptitious quiet propaganda.

There it is: the draining of color from the world is about making compliant people more compliant. Forget color studies to make people happier. We've moved past such things, and the new dominant color scheme is designed to avoid making people thing and keep them compliant and susceptible to the flood of propaganda in the world.

I am now amazed that this semi-pointless site has awoken a new conspiracy theory in my aging brain. Kudos!

Jabbles• 3 years ago

I think adding (2011) to the title would help explain many of the shortcomings of this webpage.

avodonosov• 3 years ago

This site was a response to a very annoying practice in fashion during these years - people were writing full articles and websites in light grey font color.

My complains back then: http://avodonosov.blogspot.com/2014/12/web-design-advice.htm...

https://news.ycombinator.com/item?id=8776744

Today I don't see this practiced. Strange to see the contrastrebellion on top of HN.

zsz2• 3 years ago

It's a bit ironic, that most of the text on that site is too small to read on a smartphone, for my aging eyes.

nathias• 3 years ago

why are people so obsessed with enforcing accesibility on every website, when its obvious that anyone who has a disability and prefers for example more contrast can implement system wide solutions.

einpoklum• 3 years ago

Sometimes a literal rebellion against company or project officers, with a formal mandate to axe an application or website's nicely legible interface - by "modernizing" it or making it more attractive/fashionable/whatever.

ilyt3• 3 years ago

Stares at HN

can we please fucking stop with the light gray text bullshit here ?

panzi• 3 years ago

Semi-related: Several pharmacies sent brochures or similar material to my mom who doesn't see well anymore. All had extremely bad contrast and small writing using a narrow font with very thin stroke width. My mom couldn't read any of it. Do they not know their own target audience? Who is the main demographic of pharmacies!? WTF

On the computer she can use high contrast mode and zoom in. Not possible on printed medium.

aetherspawn• 3 years ago

I recently tried to switch Windows 11 to high contrast mode at work to back-date the flat design and make it easier to use, but it broke around 50% of the apps including Gmail on Chrome (got solid black letterboxes).

A few things worked out of the box like Office 365.

Anyway, high contrast mode looks OK on Windows 11 but the apps integration is a sad state of affairs right now.

mavu• 3 years ago

can we extend this to hostile UIs? Please?

gooseyman• 3 years ago

And yet hitting back takes a user up one frame vs. the expected back to HN

mcdonje2• 3 years ago

Clearly, aesthetics are important but aren't the ultimate goal of design. And often poor readability doesn't get noticed during the design process, as we are not like our users. We don't read the texts as a visitor does.

Ironic, since I had to flip my phone sideways in order to read that.

gatane• 3 years ago

Mandatory mention of: https://motherfuckingwebsite.com

satisfice• 3 years ago

The problem is easily solved by using Vantablack as the color of every font. Guaranteed contrast.

denkmoon• 3 years ago

Site layout is broken in firefox, the irony.

kazinator• 3 years ago

Ironically, that "NO CONTRAST" floating bubble label they put on the image is almost unreadable in Dark Reader (browser extension for dark mode everywhere). If I turn dark reader off, it looks like white letters on a nearly black background. If I turn dark reader on, it looks like very faint gray on a nearly white background.

I say, use bad contrast if you like; just don't make things hostile to extensions that fix it.

Contrast Rebellion

Related Stories