Back to previous page

Help

What is this tool?

When designing a web site it can be difficult to know which color combinations work best, especially when trying to ensure the difference in contrast between two colors is high enough to ensure people can easily read your page. This tool lets you create a color palette and then take all of the possible color combinations from that palette to see what combinations will satisfy the WCAG 2.0 standards for accessibility.

How do I create my own color palette?

You can use this form to create it, or you simply append the colors (RRGGBB) you want to add to the URL using the following format.

http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?colors=FFFFFF,000000,FF0000,00FF00,0000FF

This would create a color palette consisting of

Note, you can also use lowercase letters (e.g. 00ff00) and abbreviated colors (e.g. 0f0).

How do I create a primary, secondary, and tertiary color palette?

You append the URL with primary=, secondary=, and tertiary= and indicate which color goes in each palette. For example,

http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette.php?primary=cc0000,000000,ffffff&secondary=383838,666666,CCCCCC&tertiary=A79574,C5BD9D,E5E1D0

View an example of NC State University's color palette.

Can I save my color palette or share it with others?

To save or share your color palette simply view your palette in your web browser and bookmark the page or copy the entire URL to send to others. The color palette is generated from the parameters in the URL, so there is no account to create or entry to save.

What criteria are you using?

This tool uses the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA and AAA conformance criteria to evaluate the accessibility of the color contrast. Level AA of these guidelines is most likely going to be the new standard for accessible Web pages adopted by the U.S. Federal Government. These new Federal requirements have not been formalized yet but the indications are that they will be enacted soon.

What are Level AA and Level AAA?

The WCAG guidelines contain testable criteria that can be evaluated to one of three conformance levels: A (lowest), AA, and AAA (highest). For color contrast the different conformance levels describe the level of contrast difference two colors must have. In short, Level AA, which will most likely be the new U.S. Federal standard, is more lenient while Level AAA is more restrictive. While AAA conformance is ideal, it can be very difficult to achieve this level of conformance in a single universal color scheme for all users. As a note, WCAG 2 does not specify a Level A conformance level for color contrast.

Is there a difference between the "Sample Text" and "Sample Text (Inverted)" in determining contrast?

No. It does not matter if the foreground color is swapped with the background color in determining the color contrast ratio. Both combinations are displayed so you can see what each will look like.

What do the sizes 14pt (1.2em) and 18pt (1.5em) mean?

WCAG defines different levels of necessary color contrast for different sizes of text - the larger the font, the less contrast difference there needs to be. The actual font size breakpoints in the specification are 14pt and 18pt. Many times Web font sizes are defined relatively using % or em. 14pt is roughly equivalent to 1.2em while 18pt is roughly equivalent to 1.5em. The issue to keep in mind is that nested font sizes defined in em will be rendered with the cumulative value, so an element defined with a font size 1.2em inside an element defined with a font size of 0.8em will be rendered with a size of 1.0em. Defining a font-size of 1.5 em does not guarantee that the rendered font will be roughly the equivalent size of an 18pt font. It is up to the developer to ensure that the rendered font size is the equivalent of 14pt and 18pt.

Is there an API?

Yes. You can compare any two colors and receive the results in either an XML or JSON format.

JSON - http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette-compare.php?&color1=CC0000&color2=000000&format=json

XML - http://accessibility.oit.ncsu.edu/tools/color-contrast/accessible-color-palette-compare.php?&color1=CC0000&color2=000000&format=xml

Is the code available?

The PHP code for the function to compare two colors is available. The syntax is

array evaluateColorContrast(string $color1,string $color2)

Example:

$results = evaluateColorContrast("ff0000","ffffff");

Back to previous page