
Show HN: Grayscale the Web – A Chrome extension to help avoid mindless browsing - devastora
https://chrome.google.com/webstore/detail/grayscale-the-web-save-si/mblmpdpfppogibmoobibfannckeeleag
======
jedberg
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.

~~~
willio58
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..

~~~
voxadam
The irony about Facebook is that Marl Zuckerberg is red-green colorblind.

~~~
Fnoord
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.

------
anotheryou
If you are on windows you can use this awesome tool to have it globally:
[https://zerowidthjoiner.net/negativescreen](https://zerowidthjoiner.net/negativescreen)

nice plus: inverted mode with correct colors (only brightness inverted)

You could even write your own translation matrix. It's a bit tricky at first,
but fun. e.g. true black and white without greys.

For your own matrix this might help (but definitely another format :/ ):

[https://kazzkiq.github.io/svg-color-filter/](https://kazzkiq.github.io/svg-
color-filter/)

[http://alistapart.com/article/finessing-
fecolormatrix](http://alistapart.com/article/finessing-fecolormatrix)

~~~
y04nn
If you are on macos you can do it globally and natively by going in the
accessibility settings.

~~~
killjoywashere
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.

Short of that, for Android, you can switch to monochrome directly in Developer
mode: [https://www.trishtech.com/2016/02/how-to-turn-android-
lollip...](https://www.trishtech.com/2016/02/how-to-turn-android-lollipop-
screen-monochrome/)

~~~
geoffpado
iOS does have a red monochrome option! Settings > General > Accessibility >
Display Accommodations > Color Filters > Color Tint

Not the easiest to find, but it's there for people who need/want it.

~~~
Fnoord
> (in case you need to finish that paper at 2 am but don't want to keep your
> roommates awake).

Like iOS, macOS has native Night Shift mode as well. Or you can use F.lux

------
malloreon
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.

~~~
notduncansmith
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.

------
pietroglyph
For Firefox you can use the Stylish addon and "filter: grayscale(100%)" for
similar effect.

~~~
rashkov
Thanks, exactly what I was looking for. I went to "Create New Style" and added
the following and now I'm all set:

    
    
      html {
        filter: grayscale(100%) !important;
      }

~~~
seltzered_
Thanks. pairing this with 'dark night mode' is pretty nice.

~~~
rashkov
oh wow, that is nice. I've been looking for something like dark night mode for
a while now, glad you pointed it out

------
ponderatul
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.

~~~
devastora
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.

Have you heard about the upcoming Android P? It's got a lot of tools to help
you control your browsing, looks pretty helpful -
[https://www.theverge.com/2018/5/8/17327302/android-p-
update-...](https://www.theverge.com/2018/5/8/17327302/android-p-update-new-
features-changes-video-google-io-2018)

~~~
ponderatul
Yes, I'm enrolled in the beta and the advertised features for wellbeing are
not there. But it's ok anyways cus I have grayscale full time on my phone.

------
AndrewOMartin
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.

~~~
Harvey-Specter
> Oreos

You need to take them out of the original packaging and put them in a
greyscale container as well.

------
kovrik
Nice idea!

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?).

~~~
devastora
Thanks!

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.

------
gregsadetsky
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?

~~~
devastora
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.

------
znpy
FYI: you can go black&white on Windows 10 by pressing Win+Ctrl+c

Edit: does anybody know if there's a way to do the same on GNU/Linux ?

------
NVRM
Too monochrome? Try ponyFilters!
[https://github.com/webdev23/ponyFilters](https://github.com/webdev23/ponyFilters)

------
augbog
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

------
mettamage
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?

~~~
drusepth
From the extension description:

>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.

~~~
gowld
That's the claim, but not an explanation. HN isn't multi-color.

~~~
devastora
You have a point. But even though HN doesn't have a ton of color, it still
feels different on grayscale I think.

Most of the evidence is anecdotal, but it seems to work for a lot of people
(myself included). I went into it more here -
[https://news.ycombinator.com/item?id=17133984](https://news.ycombinator.com/item?id=17133984)

------
atomic77
This is an excellent idea, and makes me realize just how much I'd love to be
able to have an Android phone with an e-Ink only display.

------
ktosobcy
Anything similar for Firefox?

~~~
BadSambar
Yeah, I think this should work:
[https://userstyles.org/styles/160346/greyscale-4206969](https://userstyles.org/styles/160346/greyscale-4206969)

Just try it out and let me know if it doesn't.

~~~
ktosobcy
This is just perfect - thank you!

------
himom
It’s well-intentioned but why not just use the OS to solve this? Seems like
too narrow of a solution to a much bigger problem.

~~~
williamxd3
Because I want my IDE, github and the app I am working on to be colorful and
everything else blunt

------
williamxd3
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"

------
goodroot
Awesome! Thanks for building this. I have been using grayscale on my phone and
I love it.

------
daft300punk
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.

~~~
sakuronto
My guess is that it just applies a CSS filter on the entire page.

~~~
devastora
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](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.

------
rapnie
does anyone have a link to the people who made this? I see 'Dev Astora' but
can't find them on the web.

am always hesitant to install browser plugins that have no website link,
about, and privacy policy..

------
John_KZ
Is there a way to do this in Linux/Ubuntu/Debian?

I've looked as hard as I could but I couldn't find any solutions, at least not
one that didn't require writing your own drivers.

------
bradam
Super useful, thank you! Is there anything like that for Safari?

~~~
devastora
Thanks! I took a quick look and it doesn't seem like there's any plugins out
there for grayscaling in Safari right now.

If you're talking about mobile safari though, you can do it on an OS level and
toggle it by pressing the home button three times in a row -
[https://www.ped30.com/2018/01/13/apple-iphone-
gray/](https://www.ped30.com/2018/01/13/apple-iphone-gray/)

~~~
beat
I just set my iPhone up for that. I am hoping it makes a positive difference.

------
warent
This is actually pretty cool, I installed it and it already feels a bit easier
to maintain control over what my attention is on.

------
s_clemens
Pretty cool, I like it!

------
drake01
This made my day! Thanks Dev Astora for working on it :)

~~~
devastora
Thank you! I'm glad to hear that : )

------
0xdeadbeefbabe
This will be awesome for my e-ink monitor.

~~~
John_KZ
You have an e-ink monitor? When did they hit the market?!

~~~
0xdeadbeefbabe
I'm expressing a hope to the point of lying.

------
bfred_it
This extension should be one CSS line, why does it load 3 libraries as content
scripts?

    
    
        :root {filter: grayscale(1) !important; background: #fff}
    

I wish extensions had a native way to whitelist/blacklist websites. Until
then, you're better off adding that line to Stylish.

~~~
devastora
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.

