10 ms·

Contrast Rebellion

280 points by gjvc 4y ago

doodlesdev 4y 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-com/whjjar9h5m?form_factor=mobile 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.
- jdthedisciple 4y 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 4y ago
  It also doesn’t support reader mode, and the tan text is very hard for me to read.
- mthoms 4y ago
  It was written in 2011. Was that tag in regular use at that time? I have no idea.
  - doodlesdev 3y 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).
    - TylerE 3y ago
      In a lot of ways 2010ish was about the worst for mobile web. Pages were huge and had tons of JavaScript, etc, but responsive design wasn’t a thing yet.
    - ttepasse 3y ago
      The viewport value for the meta element was never a part of HTML 5. Apple first invented it for the iPhone 1, published it in 2007, and other manufacturers of mobile browser then copied it. https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.apple.com/library/archive/documentation/Ap... At the time for iPhone 4 the viewport meta thingy was an old thing, but of course a lot of websites hadn’t updated in the previous four years. The CSS Working Group has for some years specs in preparation which would make the viewport thingy official: https://drafts.csswg.org/css-viewport/#viewport-meta https://drafts.csswg.org/css-viewport/#viewport-meta
- usernew 4y 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.
  - meatjuice 3y ago
    Well, I guess I should make mobile-web rebellion.
  - blep-arsh 4y ago
    To quote the website, "designers need to think of <...> reading on tiny screens"
  - MrJohz 4y 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.
- masswerk 4y 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 4y 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/ https://webaim.org/resources/contrastchecker/ shows that they are all WCAG AAA compliant.
over_bridge 4y 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 4y 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 4y 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 4y 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/1652882490359681024 https://twitter.com/TheProgrammerMe/status/16528824903596810...
  - beardyw 4y ago
    So my comments are not down voted, just desaturated!
fsh 4y 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 4y 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 4y ago
> Scroll-behaviour hijack and unreadable text on mobile?
- deleted 4y ago
  [deleted]
nahuel0x 4y 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 4y ago
  All people outside of the States
- wildrhythms 4y 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-scratch 4y 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 4y 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`.
deleted 4y ago
[deleted]
hartator 4y ago
Join the don’t-hijack-my-scrolling rebellion.
jdthedisciple 4y 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.
- gumby 4y ago
  I’m in. I’ll go fetch the tumbrils.
- coldfoundry 4y ago
  [flagged]
XorNot 4y ago
I was hoping for a browser extension which would automatically replace "shade of grey" text with black.
- layer8 4y ago
  For Firefox at least there is the Font Contrast extension: https://addons.mozilla.org/firefox/addon/font-contrast-fix/ https://addons.mozilla.org/firefox/addon/font-contrast-fix/
- xigoi 4y ago
  Try out Dark Reader.
ZoomZoomZoom 4y 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.
- chrismorgan 4y 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.
  - ZoomZoomZoom 4y 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.
kentonv 4y 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 4y 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/ https://ianstormtaylor.com/design-tip-never-use-black/
  - amelius 4y ago
    Funny, all these strange glyphs also don't seem to appear in nature ...
    - gumby 4y ago
      There is a theory that the reason those glyphs (in most languages, whether characters or ideograms) tend to have a similar, conservative aspect ratio is that they use a part of the early visual system that was useful in finding/tracking footprints (evidence of prey or threats) In the case of characters, especially hanzi/kanji, ones that are hard to recognize/distinguish either evolve (simplify and/or develop disambiguating features) or fall into disuse. Clearly “hard to recognize” is driven by physiological structures that are by definition “natural”
__MatrixMan__ 4y ago
Where's the rebellion part of this rebellion? I was hoping to light something on fire.
amelius 4y ago
With all the AI we have these days, why can't browsers have auto-contrast?
newhotelowner 4y ago
And thin font for the paragram. Why? It may look nice on mac but everywhere else it's not readable.
noisy_boy 4y 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/ https://darkreader.org/
mthoms 4y 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://contrastrebellion.com/ https://web.archive.org/web/20111006171723/https://contrastr... Just adding some context.
wetpaws 4y ago
Ironically the web page is unreadable to me with all those yellow on black and black on yellow.
FiddlerClamp 4y 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 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 https://github.com/lordastley/readable can often be configured for simple white on black text too.
mkidd 4y 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 4y 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-scratch 4y 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.
- AtlasBarfed 4y 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.
callesgg 4y 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 4y 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 4y 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 4y 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 4y 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.
- Kwpolska 4y ago
  The default font size on HN is unreadable, and has issues with contrast, especially with downvoted or text posts.
  - ben_w 4y ago
    > especially with downvoted or text posts. I think making them unreadable is the point?
    - rcme 4y ago
      I agree for downvoted posts, but why do text submissions need to be unreadable?
      - 4y ago
jonplackett 4y 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 4y 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 http://www.beelinereader.com [disclosure: I am the founder]
syngrog66 4y 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 4y 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...
FpUser 4y 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 4y ago
  I'm dumb struck that any design focused company can ship white text on a grey background.
AtlasBarfed 4y 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 4y ago
I think adding (2011) to the title would help explain many of the shortcomings of this webpage.
avodonosov 4y 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.html http://avodonosov.blogspot.com/2014/12/web-design-advice.htm... https://news.ycombinator.com/item?id=8776744 https://news.ycombinator.com/item?id=8776744 Today I don't see this practiced. Strange to see the contrastrebellion on top of HN.
zsz 4y 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 4y 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 3y 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.
ilyt 3y ago
Stares at HN can we please fucking stop with the light gray text bullshit here ?
panzi 3y 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 3y 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 3y ago
can we extend this to hostile UIs? Please?
gooseyman 3y ago
And yet hitting back takes a user up one frame vs. the expected back to HN
mcdonje 3y 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 3y ago
Mandatory mention of: https://motherfuckingwebsite.com https://motherfuckingwebsite.com
satisfice 3y ago
The problem is easily solved by using Vantablack as the color of every font. Guaranteed contrast.
denkmoon 3y ago
Site layout is broken in firefox, the irony.
kazinator 3y 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.

280 points by gjvc 4y 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-com/whjjar9h5m?form_factor=mobile 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.

jdthedisciple 4y 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 4y ago
It also doesn’t support reader mode, and the tan text is very hard for me to read.
mthoms 4y ago
It was written in 2011. Was that tag in regular use at that time? I have no idea.
- doodlesdev 3y 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).
  - TylerE 3y ago
    In a lot of ways 2010ish was about the worst for mobile web. Pages were huge and had tons of JavaScript, etc, but responsive design wasn’t a thing yet.
  - ttepasse 3y ago
    The viewport value for the meta element was never a part of HTML 5. Apple first invented it for the iPhone 1, published it in 2007, and other manufacturers of mobile browser then copied it. https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html https://developer.apple.com/library/archive/documentation/Ap... At the time for iPhone 4 the viewport meta thingy was an old thing, but of course a lot of websites hadn’t updated in the previous four years. The CSS Working Group has for some years specs in preparation which would make the viewport thingy official: https://drafts.csswg.org/css-viewport/#viewport-meta https://drafts.csswg.org/css-viewport/#viewport-meta
usernew 4y 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.
- meatjuice 3y ago
  Well, I guess I should make mobile-web rebellion.
- blep-arsh 4y ago
  To quote the website, "designers need to think of <...> reading on tiny screens"
- MrJohz 4y 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.
masswerk 4y 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 4y 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/ https://webaim.org/resources/contrastchecker/ shows that they are all WCAG AAA compliant.

over_bridge 4y 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 4y 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 4y 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 4y 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/1652882490359681024 https://twitter.com/TheProgrammerMe/status/16528824903596810...
- beardyw 4y ago
  So my comments are not down voted, just desaturated!

fsh 4y 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 4y 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 4y ago

> Scroll-behaviour hijack and unreadable text on mobile?

deleted 4y ago
[deleted]

nahuel0x 4y 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 4y ago
All people outside of the States
wildrhythms 4y 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-scratch 4y 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 4y 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`.

deleted 4y ago

[deleted]

hartator 4y ago

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

jdthedisciple 4y 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.

gumby 4y ago
I’m in. I’ll go fetch the tumbrils.
coldfoundry 4y ago
[flagged]

XorNot 4y ago

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

layer8 4y ago
For Firefox at least there is the Font Contrast extension: https://addons.mozilla.org/firefox/addon/font-contrast-fix/ https://addons.mozilla.org/firefox/addon/font-contrast-fix/
xigoi 4y ago
Try out Dark Reader.

ZoomZoomZoom 4y 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.

chrismorgan 4y 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.
- ZoomZoomZoom 4y 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.

kentonv 4y 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 4y 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/ https://ianstormtaylor.com/design-tip-never-use-black/
- amelius 4y ago
  Funny, all these strange glyphs also don't seem to appear in nature ...
  - gumby 4y ago
    There is a theory that the reason those glyphs (in most languages, whether characters or ideograms) tend to have a similar, conservative aspect ratio is that they use a part of the early visual system that was useful in finding/tracking footprints (evidence of prey or threats) In the case of characters, especially hanzi/kanji, ones that are hard to recognize/distinguish either evolve (simplify and/or develop disambiguating features) or fall into disuse. Clearly “hard to recognize” is driven by physiological structures that are by definition “natural”

__MatrixMan__ 4y ago

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

amelius 4y ago

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

newhotelowner 4y ago

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

noisy_boy 4y 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/ https://darkreader.org/

mthoms 4y 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://contrastrebellion.com/ https://web.archive.org/web/20111006171723/https://contrastr... Just adding some context.

wetpaws 4y ago

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

FiddlerClamp 4y 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 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 https://github.com/lordastley/readable can often be configured for simple white on black text too.

mkidd 4y 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 4y 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-scratch 4y 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.
AtlasBarfed 4y 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.

callesgg 4y 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 4y 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 4y 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 4y 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 4y 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.
Kwpolska 4y ago
The default font size on HN is unreadable, and has issues with contrast, especially with downvoted or text posts.
- ben_w 4y ago
  > especially with downvoted or text posts. I think making them unreadable is the point?
  - rcme 4y ago
    I agree for downvoted posts, but why do text submissions need to be unreadable?
    - 4y ago

jonplackett 4y 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 4y 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 http://www.beelinereader.com [disclosure: I am the founder]

syngrog66 4y 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 4y 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...

FpUser 4y 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 4y ago
I'm dumb struck that any design focused company can ship white text on a grey background.

AtlasBarfed 4y 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 4y ago

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

avodonosov 4y 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.html http://avodonosov.blogspot.com/2014/12/web-design-advice.htm... https://news.ycombinator.com/item?id=8776744 https://news.ycombinator.com/item?id=8776744 Today I don't see this practiced. Strange to see the contrastrebellion on top of HN.

zsz 4y 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 4y 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 3y 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.

ilyt 3y ago

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

panzi 3y 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 3y 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 3y ago

can we extend this to hostile UIs? Please?

gooseyman 3y ago

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

mcdonje 3y 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 3y ago

Mandatory mention of: https://motherfuckingwebsite.com https://motherfuckingwebsite.com

satisfice 3y ago

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

denkmoon 3y ago

Site layout is broken in firefox, the irony.

kazinator 3y 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.