How to determine color palettes visible for the colorblind?

Question

How can I create a color palette that can still be visible by those who are colorblind? Is there a resource that can help determine if color palettes meet WCAG standards?

If not, could someone explain their process for ensuring maximum accessibility when choosing color palettes?

Answer 1

Smashing Magazine did a huge article in October 2014 on best practices in color accessibility design. It covers the forms of color blindness and a number of tools to validate your designs. Here's a copy of the best practices outlined there:

Test for color-contrast ratio, and document the styles and color codes used for all design elements. Create a visual design specification that includes the following:

• typography for all textual elements, including headings, text links, body text and formatted text;
• icons and glyphs and text equivalents;
• form elements, buttons, validation and system error messaging;
• background color and container styles (making sure text on these backgrounds all pass);
• the visual treatments for disabled links, form elements and buttons (which do not need to pass a minimum color-contrast ratio).

And here're a couple of tools for testing contrast I have found that aren't mentioned in the article:

• WCAG Contrast checker for Firefox
• Colour Contrast Analyser for Mac & Windows (free app that compares contrast of colors and simulates color blindness for a portion of the screen)
• Color blindness simulator for Mac only

Answer 2

I've found that it's pretty hard to find concrete examples or How-To's.

Adobe products like Illustrator have very helpful simulators (open a new Window and choose View > Proof Setup > Color Blindness...) that can instantly show you a live side-by-side rendition as you tweak your colors. And there are free standalone tools as well, like Colour Contrast Analyzer.

I've posted an example at graphicdesign.stackexchange