I love this idea, but sadly it's not for me. I tried this on my phone (going grayscale) and turned it off after 1/2 a day.
Too many apps rely on color to differentiate different parts of the app.
It definitely gave me a greater appreciation for the plight of the colorblind, and it's why for my own company's products, we always test in B&W, to make sure no functionality is lost.
Relatedly, does anyone have any links to some good research on why this works?
Edit: OP has pointed out that this tool lets you choose sites to have in color or grayscale, so that's a bit of a game changer, as on the phone it was all or nothing.
Why go grayscale? Is there any data to support the claims made by the extension? (see below)
The extension linked says:
> Can't stop surfing the web? You may not realize it, but all of that color is designed to hijack your brain and keep you browsing.
> You'll soon find that time wasting sites hold your attention less, and this will hopefully help you focus on whatever it is you really need to be doing.
I hadn't done any scientific studies, just had read about it and decided to give it a try on my phone. It made a difference for me, so I wanted to make something for chrome since as a dev I spend most of my day on there.
I'd say it's worth a try at least to see if you see a difference. It's strange browsing without color, and when you use grayscale and go back to color it almost feels overwhelming.
Here are some articles though that go into it more:
This makes me wonder: what if instead of converting everything to grayscale, you swap color channels. I'm sure that would make images less appealing (e.g. human skin color would become something completely different), but still you'd be able to distinguish colors, so functionality isn't lost. Also, black and white, and grayscale stays the same, so text remains readable.
This is easily done, you can create an index for each color or color range.
Additionally, you can mess with the typical B&W conversion weights for each channel.
However this got me thinking, what do we want when we convert an image to bw? It's a pretty hard problem, because we want both semantic segmentation and preserving lightness.
Also you clearly can't have a one-to-one mapping when you lose 2 dimensions. Of course in the case of a simple UI that's not a problem, but with photography it is.
I work for a university making some of their websites ADA compliant. Simulating several different colorblindnesses is part of doing so. It always surprises me how even universities can be up-to-date with accessibility but sites as popular as Facebook or google can fail many of the checks we do.
It must have to do with the university receiving federal funds..
There's very little irony in that. Zuckerberg made Facebook for others to use; not for himself (OK, for himself, but not for himself to use it). This just underlines that further.
Yup. Also, we maybe so dopamine sound-, color- & effects-addicted that we’ll subconsciously make any excuse to keep the glowing box neck hunched over. Even street signs to watch for oblivious pedestrians on smartphones, as well as signal-lit crosswalks so pedestrians never have to look up.
I feel you. I tried to make it easy to toggle on and off in case you needed to check something in color, but it's a bit of a double edged sword in that it can be too easy to turn it off and leave it off.
That's a big part of why I added the saved/excluded sites functionality, so you could add it for sites that are usually time wasters like reddit or facebook, or exclude sites from being gray that you need for work.
Newer Android phones allow you to set an accessibility menu shortcut. If you only have one menu item selected, the shortcut just toggles that menu item. I press vol-up & power to toggle greyscale.
Check out Nocturne (originally from Blacktree, of QuickSilver fame). It even has a full red monochrome option (in case you need to finish that paper at 2 am but don't want to keep your roommates awake).
I really wish Android and iOS had a full red monochrome night-vision mode.
Shortcut Win + Ctrl + C. I've known a couple people accidentally press it and think their display is broken! Use it quite often for quick visibility testing.
This is very cool. Last week I went full greyscale on my ipad and iphone, and over the weekend on my macbook pro.
It definitely forces me to think about each time I use each device - the stark contrast in colors to the real world requires a sense of intentionality that I really like.
I did the same earlier this morning and I agree with this sentiment so far. I find it difficult to be mindless on the screens, and it makes me appreciate the colors of the offscreen world so much more.
Thank you. I use the grayscale option on my Android Phone. I have to say, with the exception of reading on it, everything else is boring as fuck, which is great. Everything around seems so much more colorful than that device.
I'd like to see this pattern (intentionally making the experience worse, to prevent the facebook shithole effect)used in more devices.
Thanks! I'm glad you like it. I started using the grayscale option on my iPhone a while back and found the same thing. Sites were suddenly way less engaging. It almost felt like going through withdrawal after using it for a few days.
Text based browsers have had this option for ages, though some say they copied it from printers.
Notably this doesn't help with food, I've been only buying greyscale (Rice, Oreos, Guinness, etc.) for a while now and my mindless consumption hasn't dropped.
Would be great if it was not just On/Off switch, but one could set timer (per site) and it would gradually desaturate website the longer you stay (1%, 2%, ...).
When timer turns 0, then site becomes fully grayscale (100%).
When page is closed, then the timer is reset (after the same period of time?).
Originally I was going to implement a slider where you could adjust the amount of grayscale, but wasn't sure if anyone would use it. I really like the idea of having it gradually go gray, I might look into that when I get a chance to work on this again.
I’ll definitely try it, thanks! I’ve been “on” grayscale on my phone for a few months now and I’ve enjoyed it very much.
One “proof” that I have of grayscale’s benefits is that when I switch back to color (which happens at most once every 2 weeks), I find the colors to be extremely (visually) “loud”.
Is it reasonable to think that we get desensitized to color, and that using grayscale re-sensitizes us? i.e. can this be compared to avoiding sugar or salt as much as possible, and then noticing how much the “old”, “normal food” was actually sweetened / salty?
I know what you mean. If I'm good about using the grayscale, when I see a site with color it's almost overwhelming. You get desensitized to all that color.
Sounds like an interesting idea but would be awesome if rather than grayscale it just lessened the contrast and made colors a lot less vibrant. That would still help a lot
Here's perhaps a silly question. Even more so since I haven't read all the comments, only the top ones. How does grayscaling the web avoid mindless browsing?
>You may not realize it, but all of that color is designed to hijack your brain and keep you browsing.
>Grayscale the Web is a great solution to help with this. It removes all of the color, giving sites a plain, grayed out look. They will appear much more boring, and that's the whole point. You'll soon find that time wasting sites hold your attention less, and this will hopefully help you focus on whatever it is you really need to be doing.
Very cool, I will test it thought the week and see if I can notice any effects
I like this idea better than those extensions that just block websites altogether, those do not work for me cause I just disable them when I want to go "mindless browsing"
Seems very useful, thanks. Curious how it affects cpu usage. Would be cool if you can explain how it works. I can see even the gifs and videos(which I think makes this even more useful) are rendered black & white.
Potentially there's power savings on a mobile device by restricting the color palette to grayscale?
If so this could be incorporated into one's phone's battery saver mode.
Yep, you got it. For the most part I'm just adding filter: grayscale(100%) to the html element.
There some other stuff going on though. I noticed that for the html and body elements, if they had a background image/color, the grayscale trick wouldn't work for them.
So, on the options page I added a toggle to "Remove All Background Colors and Images No Matter What". This goes through the page and checks if there is a background image or color, then uses this library (https://github.com/bgrins/TinyColor) to check the perceived lightness of the color and changes the background to use a shade of gray instead.
Performance wise, I don't have any specific numbers, but I did a lot of dogfooding on my own before releasing and didn't notice any perceivable slowdown.
Do you mean three separate js files? Two of them are plugin specific files I separated out to make managing the different features easier.
The only library I'm loading is tinycolor.js, which I added for the togglable feature where it checks the site background colors and adds an appropriate gray for it. You'll find that making the background always be white doesn't actually work some of the time, especially for sites with darker backgrounds.
The extension is (god forbid) more than one line of code because I wanted to add features and controls I didn't see in other plugins, like:
* setting it for specific tabs
* setting it for all sites
* being able to save sites to always be gray
* being able to exclude sites from being gray when the "tab" or "all sites" settings are on
I too wish extensions had the built in functionality to add/remove saved sites, tabs, etc, but as that's not the case today, I had to do it myself with the chrome extension APIs.
It definitely gave me a greater appreciation for the plight of the colorblind, and it's why for my own company's products, we always test in B&W, to make sure no functionality is lost.
Relatedly, does anyone have any links to some good research on why this works?
Edit: OP has pointed out that this tool lets you choose sites to have in color or grayscale, so that's a bit of a game changer, as on the phone it was all or nothing.