2008 Jul 14

writing accessibility CSS code for the color blind

Not being able to see the differences between colors is a bit trouble some. Imagine yourself looking at the traffic light and not seeing and red color. These people will see yellowish brown color instead of the red color. Red-green color blind is also called Protanopia, people that are less sensitive to red light and Deuteranopia for people who are less sensitive to the green light.  Some study determined that about 10% of the male population are color blind. I am happy I do not belong to those 10%.

That is why link urls should stay underlined to help people with color blindness see it immediately. since we are not able to adjust CSS being used on the website we browse, we will just instead use our own CSS page by specifying it on our browser. if you are color blind, this page will help you a lot. If you are not color blind, i don't recommend you using it because it would be weird.

First lets create our own CSS file and specify it via our browser settings later.


* {
  color: #000 !important;
  background: #fff !important;
}

a {
  text-decoration: underline !important;
  color: #fff !important;
  background: #000 !important;
}


the !important specifier must be present on your CSS codes to tell the browser its important and must override the other CSS codes.

Using Internet Explorer navigate to 
  • Tools -> Internet Options
  • Click on the Accessibility button
  • Place a check on the 'Format documents using my style sheet' option
  • Browse to the location where you saved your CSS file above.
  • then click OK
If you are using Firefox go to your profile folder and edit your userCrome.css file of your userContent.css file. just copy-paste the CSS code above to the bottom portion of the file.

0 TrackBacks

Listed below are links to blogs that reference this entry: writing accessibility CSS code for the color blind.

TrackBack URL for this entry: http://www.tildemark.com/cgi-bin/mt4/mt-tb.cgi/111

Leave a comment

About this Entry

This page contains a single entry by tildemark published on July 14, 2008 10:58 AM.

Keyword competition tool called Stomper Ranker was the previous entry in this blog.

prevent email spam be using an image email address is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Recent Activity

Friday

  • tildemark tweeted, "im so sleepy. Zzzzzzzz"

Sunday

  • tildemark tweeted, "some of my scipts are not working with godaddy. but works fine on the others. not mention their poorly coded admin page"

Today

  • tildemark tweeted, "so many pending tasks i need to finish. need more coffee !!!"
  • tildemark tweeted, "@gmtristan i dont think that is true."

Today

  • tildemark tweeted, "how does godaddy subdomain behaves? i have some problems with it on my scripts. it does not seem to accept query strings.."

Monday

  • tildemark tweeted, "i had a hard time removing the error messages generated by surf side kick. i ended up uninstalling most of my applications."

Sunday

  • tildemark tweeted, "i got hit by surf side kick and im getting numerous error messages on my screen. tskkkkk"

Saturday

  • tildemark tweeted, "check boxes, i didn't know they can also be complex"
  • tildemark tweeted, "this smart bro internet speed is depressing, i thinking of filling a complaint to the DTI next week."

Friday

  • tildemark tweeted, "the seminar turned out to be leadership training. it was fun, learned alot. i have already attended numerous seminars but this is different."