5 ms·

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

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 3y 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 3y ago
It also doesn’t support reader mode, and the tan text is very hard for me to read.
mthoms 3y 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 3y 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 3y ago
  To quote the website, "designers need to think of <...> reading on tiny screens"
- MrJohz 3y 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 3y 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 3y 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.

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

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

mthoms 3y 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 3y 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 3y ago
To quote the website, "designers need to think of <...> reading on tiny screens"
MrJohz 3y 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 3y 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 3y 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.