Colorblind Web Page Filter

What are color blind anomalies?

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

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 we work on it.

If you only use one filter, use the greyscale 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.

Improvements

We have made the following improvements to the colorblind web page filter. These will be applied automatically to your page.

Improved Image Filtering

Image filtering takes more time than HTML or CSS filtering. If you use images to convey information or to present navigational elements, then previously you filtered images the first time you checked your web page. After that first check, you may have saved time by disabling image filtering unless you made a change to the images (or their background/foreground). We made significant performance improvements to give you an amazing speed increase.

Improved Non-GIF Image Filtering

Previously, we only filtered GIF images. This means that non-GIF images had to first be translated into GIF format before they could be processed. This resulted in a loss of image quality in some cases, and a performance hit in most cases. You probably wanted to compromise on performance by disabling the filtering of non-GIF images. After our optimization you will see noticeable speed and quality increases.

Improved Stylesheets

Our CSS filtering was not perfect, but it was much better than our filtering of client-side scripts. If your page is still one of the problematic exceptions, create a version which does not use CSS (or which uses simpler CSS) to demonstrate equivalent web page coloration. Run that page through our filter.

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:

Before using the logo, you'll want to verify the following:

the page renders legibly under the greyscale coverage test

for each of the other filtering 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.