Colorblind Web Page Filter

I'd like to express my appreciation to pair.com for donating a dedicated server to host this utility.

Use the colorblind colorlab to select safe colors earlier in the design process.

Learn more about colorblindness in this Wikipedia entry.

This tool is still in development, but feedback is welcome while I work on it. If you only use one filter, use the grayscale filter which will not only point out potential problem areas, but will also let you see more clearly which areas the filter is unable to process.

Please indicate a resource to be viewed, and a color filter to be applied to that resource:

Type a URL:
and then
pick a color filter: (What are coverage filters?)
Disable image filtering below for a dramatic speed increase.

Other Options...

Disable Image Filtering (recomendation: do not check this box initially): Image filtering takes more time than HTML or CSS filtering. If you use images to convey information or to present navigational elements, then you should filter images the first time you check your web page. After that first check, you may wish to save time by disabling image filtering unless you have made a change to the images (or their background/foreground). Checking this box will give an amazing speed increase.
Disable Non-GIF Image Filtering (recomendation: do not check this box initially): (Not relevant if all image filtering has beeen disabled above.) At this time, we only filter GIF images. This means that non-GIF images must first be transated into GIF format before they can be processed. This results in a loss of image quality in some cases, and a performance hit in most cases. You may want to compromise on performance by only disabling the filtering of non-GIF images. Checking this box will give a noticable speed increase.
Disable Stylesheets (recomendation: do not check this box): Our CSS filtering is not perfect, but it is much better than our filtering of client-side scripts. If your page is one of the problematic exceptions, create a version which does not use CSS (or which uses simpler CSS) to demonstrate equivilant web page coloration. Run that page through our filter.
Supress Filtering of Broken CSS Colors (recomendation: do not check this box initially): Some CSS authors incorrectly leave the '#' off of their #RRGGBB color values. To see how color blind users probably see the page, allow the utility to attempt to filter these constructs. To hilight these errors, use one of the 'coverage' modes and check the box to supress filtering of this incorrect syntax.

Our Logo

If your page meets the following criteria, please feel free to use this logo on your web site (available in gif and png formats). You may use the logo from this server or a local copy, but should include the following HREF and ALT text in your markup:
<a href="http://colorfilter.wickline.org/colorblind/filter/button"><img alt="See your web site through colorblind eyes with the colorblind web page filter." src="http://colorfilter.wickline.org/colorfilter_button.gif" width="88" height="31"></a>

Before using the logo, you'll want to read more about coverage filters and then verify the following:

the page renders legibly under the grayscale coverage test
pick two of the other (black/white/gray) coverage tests
for each of those two tests
- either all text foreground/background color pairs remain unchanged (because your markup allows the user's browser preferences to dictate colors)
- or all text foreground/background colors are transformed to the coverage color (because your markup sets both foreground and background colors to ensure adequate contrast)

The logo is based on an image from the Color Vision Testing Made Easy screening test developed by Terrace L. Waggoner, O.D. and is now used with his permission. I confess that the colorfilter logo was originally developed without his permission before I knew of the boat's origin. Fortunately, Dr. Waggoner was very understanding.

Thanks pair.com! :) -matt