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.
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.
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.
Websites, for the most part, aren't composed and administered by government agencies, to provide beneficial information or services paid for by taxes (and it is instructive that federal agencies have been section 508 (of the Rehabilitation Act) compliant for decades, precisely because they are taxpayer funded and therefore have an obligation to make information and services accessible).
So why shoot themselves in the foot, from the get-go? It's not my right that you make your site readable to me. But if you want me to be a repeat visitor, then why make it a difficult and frustrating experience for me? Any person who produces such a site has misplaced priorities.
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.
"violence"? seriously? You should maybe dial back the hyperbole a bit.
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.
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.
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?
but yours do not?
yes, i'm convinced that an article that talks about good and bad contrast, gives examples of varying contrast. because, again - eyes.
Although to be sure, there are a few sections that looked low contrast to me. When I checked them with a WCAG altorithm contrast checker, they all easily exceeded AAA limits.
I concluded that the page might have been intending to show that you still had a lot of flexibility in color choices, while meeting WCAG standards. (The WCAG standards are mentioned on the page).
Of course, it's possible the WCAG algorithm/standard is at fault -- it is hard to totally capture human perception in a measurement (not to mention different humans are different), and there are other times I have had color combinations that I find hard to read but which pass the WCAG measurement.
But the WCAG standard is, again, mentioned on the page, with no disclaimers.
I think there may be something worth talking about going on, but I'm definitely not convinced it's what you think.
There are sections of the page that _say_ they are showing you screenshots of _other_ people's pages that are too low-contrast, that part is clear. But you are convinced sections of the page itself with the authors words are supposed to be obviously hard to read due to contrast?
Maybe. I guess we'd have to ask the authors. Seems a weird choice to me, to do that without mentioning you are doing it.
But either way I still am curious if you wanted to identify which sections of the page you are identifying as deliberately too-low-contrast. I'm curious if they are the same ones that looked hard to read due to contrast to me, and I'm curious how they do on the WCAG metric (I didn't look for every single section myself).
How ironic.
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).
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/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: