Color Tools
[Author: Text & Illustration: Bill Fischer]
Overview
Art and design that is meant to to be colorful, should be colorful and understandable for all persons regardless of their color-ability. The image or layout should be color-responsive. On this page, you can find a number of tools that can help ensure that your images meet that criteria. The tools that I use regularly are indicated with an asterisk.
I-See-U Tools
*Universal Color Palette
The I-See-U universal color palette (external link) adjusts the saturation of colors to reflect the attention they will have across the red-green and blue-yellow color-blind spectrums. (free)
*Universal Color Themes
These I-See-U universal color themes (external link) will respond to any sight-ability or production method. There are no other color themes available that meet all of these criteria. (free)
Simulators
*Chromatic Vision Simulator
This color-blind simulation mobile app (external link) runs on both the Android and iOS mobile operating systems. with the app running, designers can simply aim their phone camera at any digital display, physical print, object, or environment and it will simulate three types of color-blindness (with side by side options). (free)
The CVSimulator works well for assessing color in software that does not have built-in color-blind simulation.
The CVSimulator works well for assessing color for objects, environments, and paper prints.
*Color Oracle Simulator
*Skilltide Chrome Extension Simulator
A color-blind simulation Chrome Extension (external link) that includes other vision simulations such as dyslexia, cataracts, etc. (free)
Toptal Simulator
A web-based tool that will simulate colorblindness for any website (external link) by simply pasting the URL into a form field. (free)
Simulation Variability
I performed a quick comparison between three simulators and found some variation. The key to success when using them, is to not rely heavily for signal to come from colors that have uncertainty regarding our ability to simulate them accurately. Here is a simulation accuracy rating that we could use:
Yellow: high accuracy
Blue: high accuracy
Cyan: medium accuracy
Red: medium accuracy
Green: low accuracy
Magenta: low accuracy
Assessment
*WebAIM Color Contrast Checker web page
This online text color tool (external link) allows designers to check compliance of text, graphical object and background colors to the WCAG AA and AAA standards that have been adopted by the ADA. (free)
Colour Contrast Analyzer by NC State University
This online color mapping Chrome extension (external link) allows designers to see a visual map of any website laid over all of the text and images. Various WCAG AA and AAA standards can be mapped. It's the best tool for analyzing complex images. (free)
Wave Accessibility Evaluation Tool
This Chrome and Firefox Accessibility Extension (external link) has a built-in tool that allows real time color adjustment and assessment for most websites in its 'Contrast' section. (free)
Enchroma Color-Blind Test
This on-line color-blindness test (external link) can determine if and what type of color-blindness a person may have. They also produce corrective eyewear. (free)
*Shifting Display Colors
Colors can render dramatically different depending on the display. It is important to test colors on as many as possible.
Low cost desktop displays and laptops can be low contrast while premium products can display higher contrast.
Android devices and un-adjusted flat TVs are typically very saturated. Some colors can shift dramatically or turn almost fluorescent on these devices.
*Poor Environmental Conditions
It's a good idea to test images in a brightly lit room on a dimly lit display (such as an overhead projector aimed at a white board). Also, take your test device into outdoor light.
Production Tools
*Adobe Photoshop and Illustrator
Colors can be tested in this software as grayscale (using a hue and saturation adjustment layer), and two types of red-green color-blindness: protanopia and deuteranopia, as well as CMYK color using the proof set-up preview feature. Unfortunately, there is not color contrast checker built-in.
Stark Accessibility Tools
A mulifaceted accessibility tool that works in most web browsers, Sketch, XD, Figma, and MAC (external link. The free version can check contrast, and simulate color-blindness, blurring, ghosting, low contrast, etc. Some design tools, like alt text and code snippit generation are built-into the Pro version.
*ColorPick Eye Dropper
This is a zoomed eyedropper & color chooser tool (external link) that allows you to select color values from webpages. It is a Google Chrome extension. (free)
Adobe Color Web App
The Adobe color theme creator (external link) has accessibility tools built into it. It does not, however, measure the contrast values between colors nor does it confine colors to CMYK values to ensure printing fidelity.
Paletton Color Palette Simulator
A Color Theme builder that provides color-blind previews (external link) (the vision simulation button is small and in the lower right corner). It does not measure the contrast values between colors nor does it confine colors to CMYK values to ensure printing fidelity.