Create a Color Palette Accessibility Evaluator

Create a tool that allows you to analyze any combination of colors from a palette to see which combinations meet WCAG 2 accessibility specifications.

Start by entering the colors in your palette.

List each color in the palette you would like to analyze, either one per line or in a comma-seperated list. Use the formula¬†RRGGBB, or the abbreviated RGB. For example, for green you would enter “00ff00” without the quotes. You must enter more than one color. It is also helpful to include black (000000 or 000) and white (ffffff or fff).

Choose the conformance level to use.

Conformance Level:

Please select which WCAG 2 conformance level you would like to use. Level AA is most likely going to become the new standard for Federal Web accessibility.

Click Submit then choose a color to analyze on the next page.

View a sample color palette already created

About This Tool

When designing a Web site it can be difficult to know when two colors have enough contrast between them to be readable. When just looking at two colors together it might seem that they are easily readable, but that is a very subjective measure and it will never guarantee that it is easily readable by others. WCAG 2 defines testable levels of color contrast to ensure that it is accessible to as many people as possible.

This tool will help designers determine which color combinations from a color palette work well together to ensure accessibility. With this tool, color choices can be made during the planning phase instead of patching an almost completed project.

For more information please read the blog post about the tool.