Back To Color Design Guide Menu

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 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)

Viewing a colorful laptop screen through a smart phone using the simulator

The CVSimulator works well for assessing color in software that does not have built-in color-blind simulation.

Viewing a colorful paper print through a smart phone using the simulator

The CVSimulator works well for assessing color for objects, environments, and paper prints.

Dalton Lens Simulator Instructions

Choose "Grab Screen Region" and draw a box on the area of your display you want to analyze.

Choose from "Highlight Similar Colors" pull down menu: "Daltonize"

Check √ "Only simulate color vision deficiency"

Choose from "Deficiency Type" pull down menu ... the three types of color blindness simulations

Set the "Severity" to .70 to simulate a typical mild-colorblindness condition (which is very common).

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

TPGI Contrast Analyzer

TPGI contrast analyzer - native app for MAC and PC that measures color-typical and color-blindness for anything currently showing on a display (external link). (free)

To display color-blind contrast: Choose View (from the top menu): Colourblindness simulation.

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)

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.

Google Sites

Report abuse