
Is your website colorblind friendly? - hwdesign
http://helloworlddesignco.com/web-design-news-portland-oregon.php?pid=51
======
PhantomGremlin
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.

------
entropy_
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...](http://en.wikipedia.org/wiki/Ender%27s_Game_\(series\)#Chronological_order)

~~~
panzi
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;
        		}
        	});
        })();

~~~
ydant
Significantly better.

Before the change I can see the two colors on "Ender's Game", since that's the
only place they are side by side. All of the blocks which only have one of
"Novels" or "Short Stories / Enderverse" I struggle to tell which it is.
"Short Stories" is quite distinct from the other two colors.

------
analog31
When I first learned about HTML, one of its touted features was the ability
for people with different disabilities to use custom browsers that interpret
the tags differently. For instance, text to speech.

Today, it's my perception that web design has gone graphical, to the point
where it would seem vastly more difficult to make sense of typical web pages
using adaptive technologies.

And as I approach old age, I find myself struggling with web pages, for
instance having to use the "find" feature to find simple things on pages such
as the login button.

~~~
userbinator
I think the "appification of the web", where information is increasingly
presented in a custom UI that is supposed to resemble a desktop application,
is largely to blame for that, along with the tendency to emphasise form over
function (although this is not restricted to the web, it seems to happen
whenever people whose only job is to design, and not also create content as
well, is present) since there's a general perception that the more "designed"
(with graphical elements that are not necessarily useful, distracting
animations, multicoloured things whose only purpose is to be attention-
getting, etc.) a webpage the better it is. The effect is to emphasise
presentation over content, which doesn't please those who are more interested
in the latter and certainly isn't any better for accessibility. The overuse of
and reliance on Javascript doesn't help matters either. In fact I'd say the
web has become _less_ accessible now as compared to e.g. 20 years ago.

~~~
a3n
In Firefox, when I find a page that is beautifully inaccessible:

View/Page Style/No Style

which gives me beautiful, high contrast black on white, and text that flows
fully within the borders of the browser without having to scroll sideways.

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

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

[1]
[https://chrome.google.com/webstore/detail/spectrum/ofclemegk...](https://chrome.google.com/webstore/detail/spectrum/ofclemegkcmilinpcimpjkfhjfgmhieb?hl=en)

------
cyphunk
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](https://github.com/cyphunk/grey))

------
freerobby
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](http://wistia.com/blog/heatmaps-for-colorblindness)

------
roberthahn
You should read this article if you're a (mobile) application developer. It's
not just webpages that have colour.

------
antidaily
No. On purpose. Screw those freakin weirdos.

