6

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?

6

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:

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.