Your Website Needs Color and Contrast

NOTE – I found this old blog post in my drafts, so I did some time editing it, link checking, etc., and hit publish of an old draft.

To Read Your Content

To allow people to read your content, you need to make sure to have the color contrast as high as possible. So people can read what you have written. It shouldn’t be so high that it bothers people with low vision. Were too much contrast makes it difficult for them to read.

Putting light text on pastel or light backgrounds is not good for some people. You also have to think about the different types of color deficiencies (colorblindness). Meaning you don’t want to have red text on a green background, etc.

A Useful Tool

Below are a few different tools I use to check color contrast. The color contrast tool I use the most is Jonathan Snook’s web-based “Colour Contrast Tool”.  It’s the tool I use to check color contrast for the development team at work or if I have chosen will work.

W3C Recommendation for Color Contrast

Here’s the W3C recommended values from the WCAG 2.0 – 1.4.3 Contrast (Minimum) Level AA.

Following these guidelines ensures that foreground and background color combinations provide enough contrast. This pertains to those with color deficiencies. To pass your text and background need to have a color contrast ratio of at least 4.5:1 or higher to pass.

How High Should Your Color Contrast Be

You also have to think about how the web page or application is going to be used. Now, if it a heat index application that is likely going to be used outdoors. You have to consider most high heat index days will probably be in bright sunlight. So blaring sunny will not work well with a contrast ratio that passes b a little bit.

Color Deficiency or Colorblindness

Another tool is the “Color Oracle.” It’s used to simulate different types of colorblindness. They have Windows, Mac, and Linux versions created by Bernhard Jenny, Oregon State University (programming), Nathaniel Vaughn Kelso, and Stamen Design, San Francisco (ideas, testing, and icon).  The application places a color overlay for your entire main screen. You can set up different PF or function keys to turn on and off different types of colorblindness masks easily.

Doing this allows you to check against the three main types of color blindness. About 10% of the population is colorblind. Most of them are males. The three main types of color blindness are:

  • Deuteranopia or deuteranomaly (a form of red/green color deficit) – 7.5% of all males.
  • Protanopia or protanomaly (another form of red/green color deficit) – 2.5% of all males.
  • Tritanopia (a blue/yellow deficit- very rare) – Less than 0.3% of women and men.

More Tools

Next is the full list of tools I would you for building websites. Your choice will depend on how you work and what’s best for you.

I hope these tools are helpful to you in checking for color contrast issues.

Additional Reading

For a more detailed look at color contrast, you need to read Todd Libby’s color contrast article called “Contrasting Accessibility with Color Contrast“. You should also follow him on Twitter at @ToddLibby.

Any Recommendations

If you have any other tools that you use and think I should checkout, please leave a comment, and I will give them a look.

How to Improve Your Search Usability

Doing searches on websites is a pain when you are using assistive technology. There are ways to improve how you get to the results.

Why not add an HREF anchor like #maincontent, which we used for the “Skip Navigation” article to your “Search Results URL” so those using screen readers, other assistive technologies, keyboards only, or other non desktop web browsers to skip right to the results section of the page skipping all the header, primary navigation links, and secondary navigation, etc.

You also need to make sure you have a LABEL connected to your search box for screen reader and other assistive technology users to know what they are looking at. Below is some sample code you can use as a starting point, along with some CSS to hide the search LABEL visually off screen if your design calls for that kind of things.

Search Form Code

<div class=”SEARCH“>
<form name=”Skills_Search” action=”searchResults.html#MAINCONTENT“>
<label for=”search2“>Search</label>
<input type=”text” name=”search2″ id=”search2” />
<input type=”submit” value=”Search” />
</form>
</div>

Results of Search Code



To hide the word “Search“ just add to the hide class used for the skip navigation blog post this can be done easily by adding “.search label” to the CSS.

Here’s a live example of the search box and search results example page.

Hope this little change to your website was helpful to you and it will make accessing the internet for those using assistive technologies better.

If you have any questions or ways to improve this, please leave a comment or get in touch with me.

Why I’m Building Hold An Event

I created Hold An Event because all the other event registration web applications are not accessible to those using assistive technologies, like screen readers (JAWS, NVDA, Window Eyes, etc.), along with voice recognition software (Dragon Naturally Speaking). They are also difficult to use even on smartphones let alone an lesser phones. I found this out while running my first Accessibility Camp DC back in October of 2009 and then with our follow-up monthly event, Accessibility DC. People would show up without registering because they deemed the service I had chosen not to be accessible, even though these people would be considered by most to be power assistive technology users.

After the first Accessibility Camp DC and a few monthly meetings, I started looking into event registration systems and everything I found was inaccessible in one form or other. I mostly looked at all the larger ones is all. So over the last two and a half plus years, when I have had five minutes here or a half hour there, at coffee shops, on the train, or wherever, I put notes into my iPhone about creating a web-based event registration application. At first, I used the iPhone’s built-in notes application, until a few people suggested I use Simple Note. This was because it had an iPhone application, along with a web application. By gathering all the different pieces of information you would need to create and run events over time, I had the time to really think about the roles/personas needed for an event.

The type of people I came up with could be people putting on the event, the attendees, paid attendees if that applies, sponsors, speakers, and even event staff. These roles work if you are holding a simple birthday party, the monthly book club, a tech event, or even a large conference. So we are talking a great amount of information, and I really had to think this through.

At times, I was like this is way too much work for just one person or I had other things to do and would do nothing about it for weeks or even months. No matter how hard I tried, the problem never seemed to go away and kept coming back to me. So after reading a lot of books, articles, etc. about start-ups, web applications, usability, and the like, as most would say I just needed to start and see where it would go.

When I Started

So over the summer of 2011, I finally started building the prototype to make sure I had the correct process, flow, and usability of the web application down before really starting the difficult work of making this a true working application. I even started with the mind-set of Mobile First (great book), which some are great ideas from Luke W. and others. My guess was that if I started coding the web application using web standards and accessibility in mind from the start, and if a person could do everything they needed to on their phone, then it should work wonderfully in a browser or on a tablet.

I started out simple and built a few of the needed input forms, which got me playing with responsive design and media queries. I made a concerted effort to get those few main screens right before building out a ton of pages. Once I got most of that complete, I moved on to the next set of forms.

My goal was to have the ability to make Hold An Event’s web application to seem like it was processing real information such as a search for events, to registering for an event, etc. This was done by passing parameters in the URL to tell each page what static content to place on the page. This idea seems to be working fairly well, since when showing friends lately what Hold An Event looked and acted like, they asked what kind of database, etc. I’m using. I would then explained what I had done to make it a look like a fully-functional application.

By the middle of October 2001, I had a bunch of pages that worked well enough to start showing people at that month’s Accessibility DC event and then more people at my annual Accessibility Camp DC event. Once those events were over, I didn’t do any more coding until New Year’s Eve 2011, sitting at my parents kitchen table coding from like 11 PM to 1:30 AM, because everyone else in the house more or less had gone to bed by 10:30 PM. Since then, I have been doing something to improve the Hold An Event web application just about every night and on the weekends too. Sometimes it was a little tweak here or there; other times it’s been to add a new page.

At one point, I added a few different smaller non geek/tech events to be able to show people different types of events types and how the process worked. I also had to add in some code to display the different navigation paths people used, depending on what type of user they were. For example, is the person running the event or attending the event, which are the two types I’m worrying about now.

How You Can Help

The next step is to let people play with Hold An Event themselves instead of me demoing it on my iPhone, which means making it look and act better on a tablet or in a computer browser. Currently it’s not the prettiest thing in a web browser, but it will do as a prototype.

Other big tickets items I’m going to have to think about are the security of peoples’ information like name and e-mail address to start, along with taking money, once I get to that point, which is far off in the future. I’m only working on this a few hours some nights after work and then 6 hours max on the weekends, for a total of 10 to 15 hours a week.

So here’s to making more progress over the next few months.

Where to find the Hold An Event Prototype

For those wanting to look at the current prototype, start by using the “tab” key on the Hold An Event’s home page, doing so will let you find the link to the demo/prototype web application. Remember this “prototype will not save” anything you place in it at all. So please don’t try and create an event to invite people to it and think it will work because it won’t. Once you’re there, use the search box to find events in “DC”, which will currently give you a list of nine events to view.

If you want to sign in to see the process of creating and viewing current events you’re running, your past events, or ones you’re attending, all you need to do is make sure you place at least one character in the user name and password fields. It doesn’t matter what they are, just as long as there is something there.

Feedback Welcome

P.S. Have fun and please send me feedback about what needs to be done, improved, etc. I’m a big guy and can take the the bad with the good. I’m mostly looking for ways to improve things.

Accessibility Camp DC – October 9, 2010

For those that were wondering when the next Accessibility Camp DC is, it will be on Saturday October 9 , 2010, at the Martin Luther King Jr. Memorial Library from 9:30 AM to 5:30 PM in Washington, DC. This year we plan on getting more people out if we possibly can and there is already a nice sized group of out of towners coming as well.

For those that have never attended a BarCamp style event, which this is, the speakers and subjects for the event are decided the day of the event by everyone in attendance. Also in true BarCamp fashion the attendees can register for the event for FREE.

Some of the subjects we are hoping people can and will talk about are the following:

  • Section 508 Compliance or WCAG 2.0
  • Practical Ways to Make Your Website Accessible
  • Accessible PDF’s
  • Making Flash Accessible
  • What is WAI-ARIA – (Web Accessibility Initiative – Accessible Rich Internet Applications)
  • Accessible Video and Transcription
  • Panel Discussion on “Issues Effecting Individuals with Disabilities on the Web”
  • Captioning
  • Screen Reader Demos – JAWS and NVDA
  • Mobile software accessibility

Please pass this information on to others so we can have as many people as possible to learn and make needed connections about accessibility.

Hope to see you all there.

Missed Two Weeks of Project 52 Blog Posts

In case you have been keeping track, yes, I did miss two of the last three weeks of Project 52 blog posts. Between working from home because of the back to back snow storms here in Washington, DC and the 11+ hours of shoveling a few weeks ago and just busy with a bunch of after work activities. Like planning the next Accessibility DC event and this falls Accessibility Camp DC event, I missed a few posts.

It was about 11:45 PM on Thursday night that I realized I had all of 15 minutes to get a quick blog post out, so made my preordained promise to write a blog post a week for a year. I figured it was not worth it to me to just throw together a quick few lines or paragraphs just to fill my quota.

As you might know this means,  I now owe $20 to one of two charities, because I had decided donate money to charities like Martha’s Table or Kiva if I missed a week. I figured this would give me an incentive to make sure to write each week and help out those in need if and when I failed to write in a given week.

I have heard that Project 52 is doing a bit of a reboot starting on March 17, 2010, since a lot of others seem to have miss post as well.

Good luck to you if you decide to take up the challenge of attempting to blog every week for a year. I plan on being more focused once I get back from SXSW.