The world wide web in black and white | Hacker News Reader

The world wide web in black and white

unclrd.com

47 pointsjacquesknie44 comments

As part of the LinkedIn design process, mock ups are made of new layouts in black and white.

This forces people to test and comment on the functionality rather than simple aesthetics.

This seems actually a nice idea. Thanks for sharing.

It actually forces something even more fundamental. In the HSV colorspace, a black and white image has no hue or saturation, only value. Since value is the main contributor to contrast it is the color dimension that contributes most to usability, comprehension and attention.

Who needs plugins.

MacOS X > System Preferences > Universal Access

- Seeing -

Display: [x] Use grayscale

Thanks - this strangely makes using the computer a more soothing experience. Tried it for a few minutes, when I turned the color back on, it seemed suddenly very loud.

I don't know. I have trouble reading text on these white backgrounds. More now than ever before.

This might be the dumbest question but is there a system performance benefit in using grayscale?

It is not a dumb question, but the answer is almost certainly not.

It wouldn't be that difficult to design a computer to process graphics a lot faster in greyscale (you need to use one byte for the color and one for the alpha) since each pixel requires less computation.

In practice if your graphic card only worked in greyscale, it wouldn't be worth the cost of development and so nobody would do it.

Thanks, that's an interesting incentive to return to the real world for colours more often ;)

It's even better with "white on black" option.

Who needs a computer?

Cheapo Samsung TFT > Menu > Color > Color Effect > Grayscale

What he said. Been doing this for a while.

I did this experiment 1 year ago. This was my result back then http://tudormunteanu.com/post/1341815876/a-day-without-color...

Oddly, this is how your link looks in Firefox with the (un)clrd plugin applied: http://i.imm.io/H8V6.png

I'll be reading it with the plugin deactivated ;)

That is very strange.

I think that's a hardware acceleration issue, since these filters tend to be applied with GL shaders.

It's amazing how something so seemingly minor can make such a huge difference. I feel like I'm traversing the web of yesteryear (true yesteryear, not the animated gif'd web of 1997). Thanks for the link OP! One critique: The desaturation occurs a noticeable ~300ms after the page starts displaying, which means I always get a brief flash of colour.

apart from that flash of color, I am really enjoying it also. It is almost calming, and allows me to focus on content much more easily - very similarly to the way readability or instapaper do without the need to switch contexts.

You can avoid the flash by adding this into the Custom.css:

    html {
      -webkit-filter: grayscale(100%); 
    }

On Mac it's in ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css.

On windows it's located in: %LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

I had to go look at http://www.colourlovers.com/ ...

... and suddenly many beautiful landscapes started looking like Ansel Adams

You still have some lorem ipsum text on the bottom of your front page.

It's incredibly simple: document.documentElement.style.webkitFilter='grayscale(1)'

Really useful: That also works in a bookmarklet!

On Windows, the Visual Impairment Simulator ( http://vis.cita.uiuc.edu/) is even better.

It allows not just grayscale viewing, but colourblindness of different forms, and other visual impairement. Really fascinating. Runs for your whole computer, so you can test apps and other stuff too.

The equivalent under Linux is available in Compiz Configuration Settings Manager (ccsm), listed as "Color filter". It includes grayscale, several forms of color blindness as well as some novelty effects.

Thanks! I'm actually on Ubuntu just now (I haven't used Windows in quite a while), so I'll have to try this.

I have been using http://code.google.com/p/blacktree-nocturne/downloads/detail... (Nocturne) which essentially turns the entire desktop darker. It is very soothing to turn everything monochrome.

Combine this with F.lux, which adapts your display according to the time of day (at night you'll find your monitor quite pleasant to look at). http://stereopsis.com/flux/

F.lux changes the "color temperature" only, so I imagine there would be no perceptible difference when dealing in greyscale.

>I imagine there would be no perceptible difference when dealing in greyscale.

Not so: changing the color temperature changes how white looks.

It's night, so F.lux has lowered the temperature of my Mac, and if I hold my iPad up in front of my Mac's display white on the Mac look distinctly red-tinged compared to white on the iPad.

Damn, you're right. I also just tested it (a better test is to hit the "24 hour preview", though I must warn you it is overwhelming).

I was figuring it would only change the hue, but in retrospect that doesn't make any sense. It wouldn't do a lot of good since a great deal of websites/apps use white heavily.

Thanks for pointing that out.

A great addon but I don't like the flicker from color to BW on page load.

https://chrome.google.com/webstore/detail/high-contrast/djcf...

Google's official high contrast accessibility plugin has a greyscale option, and no flicker on page load.

Hitting the (un)clrd button in the nav bar, then hitting the "Open a new tab" button (i.e., the "mini-tab") reliably crashes Firefox ESR.

(Firefox ESR is Firefox's analog to Ubuntu LTS.)

Is this a conspiracy of the color blind to level the playing field?

As far as conspiracies go, it's not very good: a browser extension that you are perfectly free to not install.

On a related note, an extension that modifies colors to be colorblind friendly may actually be useful.

I wonder if the Daltonize! extension for Chrome would be something like that?

https://chrome.google.com/webstore/detail/chrome-daltonize/e...

Not exactly what you were asking, but you can check your software/webpage/publications with a tool like Color Oracle. It simulates different types of color blindness on your computer screen.

http://colororacle.org/

Adding to the list of suggestions by other commenters, Sim Daltonism: http://michelf.ca/projects/sim-daltonism/

I remember using it for a university project in 2007, in which we had to build a movie lookup website from scratch. I used Sim Daltonism to design 3 alternative CSS that would cater to the needs of people with different types of colorblindness (there's not just one type, although deuteranomaly (red/green colorblindness) is the most widespread).

The teacher thought it was superfluous and took points off. sigh :)

It seems to blur all my fonts a decent bit on os x with a hidpi display in a way that doesn't happen with accessibility. sub-pixel rendering issue?

It would be better if it grayscaled the favicons too. They look like out of place splashes of color in the browser now.

i kind of like it! but i dont really know what to use it for?

Reply on news.ycombinator.com