User blog:CzechOut/Helping Those Who See Differently

When I first started designing websites, I thought it was cool to use gradients on backgrounds, muted colours for text, and color-coding ... on everything. I wanted red to mean "cancel", green to mean "go". I wanted infoboxes about Krypton to be red, yellow and blue, just like Supergirl's suit.

But as I was patting myself on the back for my colourful ingenuity, some people started telling me that they couldn't read stuff I was designing. I couldn't understand it, because other people loved it.

Slowly, I came to realise there were two things wrong with my approach. I wasn't providing enough contrast for people with eye maladies as simple as astigmatisms. And so they couldn't stay on my wikis for very long without getting a headache.

Worse, I was trying to make color have meaning in a world that includes the color-blind. As more people spoke with me, it occurred to me that I wasn't honoring the spirit of a law in my country that gives equal access to all, regardless of physical ability. And as a big fan of that law, I just got mad at myself for being ignorant of the differences in the ways people's eyes work.

So here are some things I've learned that might help you when you're designing your own wiki.

Everybody loves contrast
One hundred percent of your readers need comfortable contrast between the color of your wiki's text and the color of the background. You can take simple steps with your CSS to help them. Sure, there are some maladies which tend to trouble older people more than younger. That's probably why it's possible to convince yourself you don't need to carefully consider contrast ratios in your plans. Like me, you probably think that if you can see it, so can the majority of people who are reading about your fandom.

But here's the thing. All eye diseases that affect older people also occur amongst younger populations. Astigmatism — the thing that's the most common reason for wearing glasses — affects so many people, we all know someone who has it.

Even those of us who have statistically normal vision can still get eyestrain, at the very least, from being on a wiki with poor contrast ratios

So I encourage you to take a look at our help page about contrast. Click out to all the resources linked there, so you can get a better idea of how important contrast is to your wiki.

Including the color-blind
Generally, improving contrast ratios on your wiki will help the color-blind as well as those with low-contrast vision. But color-blindness is a more complex situation. Why? Because it's not a single issue. There are multiple ways in which a person can be color-blind. Unfortunately, that means it's effectively impossible to create one color palette that works for every person, in every regard. But you can choose to concentrate on the various types of Red-Green color blindness — by far the most common forms — and thereby maximise your efficacy.

Simply avoiding dark greens and dark reds on black backgrounds will go a long way to improving your wiki's accessibility. Did you know, for instance, that FANDOM-standard red links can't be seen on black backgrounds by many color-blind people? The easiest solution is just not to use a black background. But if you really have to have it, consider changing the color of your red links to a lighter pink.

There are plenty more suggestions about how to design for the color-blind over on our help page.

But, like I said, there may be the occasional color-blind user who still has problems with your CSS. They may need to install personal CSS and tweak the colors to their own liking. We've recently published a skeletal color-blind stylesheet at Dev Wiki that can be a useful jumping-off point.

Your experiences
That's a quick summary of my experiences with web accessibility. I'm curious to know about yours. Do you have any tips or tricks that you know have helped people who see the world a bit differently? If so, leave them below!

Blog ends