Live data from Hacker News

Is your website colorblind friendly?

helloworlddesignco.com

1–10 of 16 posts

Re: Is your website colorblind friendly?

#2
Honestly, the only thing that has ever been a problem to me in terms of usability as a person with strong protanopia is sites that mess with link highlight colors.

Just leave it up to the browser defaults what color links show up in(visited or not) and all should be fine, I've never had any usability problems aside from this. Actually, no, that's not entirely true, this chart [1] that I saw today is a really bad culprit. I have to focus a lot to distinguish between the "Novels" color and the "Short Stories that appear in First Meetings in the Enderverse" color and even then I'm not 100% sure I can tell.

Honestly though, what I've found is by far worse than websites in terms of color-blind friendliness is games. Lots of games, especially casual ones, where you match things based on color are really hard and sometimes impossible for me to play. Though in this area FOSS games almost always include a color-blind mode of some sort, for which I'm glad.

[1] http://en.wikipedia.org/wiki/Ender%27s_Game_(series)#Chronol...

Re: Is your website colorblind friendly?

#5
post #3

It says 'You can test your site with a color-blindness simulator, such as Colbindor' But there is no such way to test a site persay, only upload individual images.

There are browser plugins such as Spectrum [1] that might be more useful.

[1] https://chrome.google.com/webstore/detail/spectrum/ofclemegk...

Re: Is your website colorblind friendly?

#6
In addition to color, designers should check to see if their sites break when minimum font size is set in browsers. I like to browse at 18 pt min, and many sites are awful. Mostly because they insist on fixed widths for many sub-elements on the screen.

HN is one site that works quite well at 18 pt min. I don't know about color issues, but HN seems simple enough that it's probably not a problem.

HN also works great w/o JavaScript.

Re: Is your website colorblind friendly?

#7
We struggled with this and our designer wrote up a bit about how we solved it. One great example:

> In Illustrator, just go to View > Proof Setup > Color Blindness - Deuteranopia-type, and immediately see how your design looks in a limited spectrum.

http://wistia.com/blog/heatmaps-for-colorblindness

Re: Is your website colorblind friendly?

#8
post #2

Honestly, the only thing that has ever been a problem to me in terms of usability as a person with strong protanopia is sites that mess with link highlight colors. Just leave it up to the browser defaults what color links show up in(visited or not) and all should be fine, I've never had any usability problems aside from this. Actually, no, that's not entirely true, this chart [1] that I saw today is a really bad culp…

Using this bookmarklet, is the graph better or worse?

    javascript:(function()%7B%7Bfunction%20%24(el%2Csel%2Ccb)%7BArray.prototype.forEach.call(el.querySelectorAll(sel)%2Ccb)%3B%7Dfunction%20fix(el%2Cbgcol%2Ctxtcol)%7Bel.style.backgroundColor%3Dbgcol%3Bel.style.color%3Dtxtcol%3B%24(el%2C%22*%22%2Cfunction(el)%7Bel.style.color%3Dtxtcol%3Bif(el.tagName%3D%3D%3D%22A%22)%7Bel.style.textDecoration%3D%22underline%22%3B%7D%7D)%3B%7D%24(document%2C%22.legend-color%2C%20td%22%2Cfunction(el)%7Bswitch(el.style.backgroundColor)%7Bcase%20%22rgb(170%2C%20170%2C%20255)%22%3Afix(el%2C%22black%22%2C%22white%22)%3Bbreak%3Bcase%20%22rgb(255%2C%20204%2C%20187)%22%3Afix(el%2C%22%230055aa%22%2C%22white%22)%3Bbreak%3Bcase%20%22rgb(255%2C%20153%2C%20238)%22%3Afix(el%2C%22%23ff9900%22%2C%22black%22)%3Bbreak%3B%7D%7D)%7D)()
Source:

    javascript:(function(){
    	function $(el,sel,cb) { Array.prototype.forEach.call(el.querySelectorAll(sel),cb); }
    	function fix(el,bgcol,txtcol) {
    		el.style.backgroundColor = bgcol;
    		el.style.color = txtcol;
    		$(el,"*",function (el) {
    			el.style.color = txtcol;
    			if (el.tagName === "A") {
    				el.style.textDecoration = "underline";
    			}
    		});
    	}
    	$(document,".legend-color, td",function (el) {
    		switch(el.style.backgroundColor) {
    		case "rgb(170, 170, 255)":
    			fix(el,"black","white");
    			break;
    
    		case "rgb(255, 204, 187)":
    			fix(el,"#0055aa","white");
    			break;
    
    		case "rgb(255, 153, 238)":
    			fix(el,"#ff9900","black");
    			break;
    		}
    	});
    })();

Re: Is your website colorblind friendly?

#9
post #3

It says 'You can test your site with a color-blindness simulator, such as Colbindor' But there is no such way to test a site persay, only upload individual images.

Last year I wrote a small bookmarklet for doing live, on-site color blindness simulation:

https://github.com/jaz303/ColorScope.js

It's by no means foolproof but I've found it useful for testing sites in development.

Re: Is your website colorblind friendly?

#10
Design without color isn't just useful for the color blind it helps a designer get a better handle over visual noise. For this reason I operate under grey scale by default on my machine, and only have the option to turn it off for 5 minutes at a time (see https://github.com/cyphunk/grey)
Post reply on HN