Safari 5 came out with the most helpful tool I’ve ever seen: Safari Reader.

Press a button and the main content of the page pop out, leaving behind the sidebars, ads, and other minutiae.

Continue Reading

The color contrast between text (foreground) and background colors is one of the most abused mistakes for web accessibility and usability. It is also one of the easiest to prevent.

A web design style that has continued its popularity is that of using light gray text on a white background. It’s a classy look, yes, but it can be hard or impossible to read for many with serious vision disabilities, and those whose eyes are just getting older and more tired (not unlike mine). Alone, this style is difficult to read, but combined with the overused small font (commonly 11-12px), it can frustrate visitors to the point of leaving your site and going to your competition.

As web designers, we can see how our text and background contrast choice looks on our computer screen, but all monitors and their settings are not alike. What looks well-defined on your screen, may look subtle on another. Graphic cards and personal settings make this completely out of your control.

Jonathan Snook created an amazing online tool: Colour Contrast Check that gives you a quick “yes” or “no” to the question of accessibility. You simply enter the hex codes for your text and background colors, and this tool instantly tells you whether or not you are in compliance with WCAG (Web Content Accessibility Guidelines). He takes care of the algorithms needed to be classified as accessible, and all you have to do is adjust your style sheet.

An important piece to remember is to always define both foreground and background colors in your stylesheet for your entire site. Many people, especially those who know they have to adjust things to see a website well, will change their background and text settings, depending on their needs. If you do not specify these, combinations may ensue that render your website unreadable.