Design for color blind users

8% of your users are color blind. You really should design the colors and tones of your artwork keeping that in mind. People easily localize their products for different languages, however, particular languages affects less percent of users than color blindness.

CIE (1931)

You can see how different types of color blindness impact how people percieve the color spectrum (using CIE color diagrams).

TL;DR

Take this archive below containing Color Lookup Table (LUT) files (in CUBE, HALD, Unity LUT format), for every type of color blindness. It comes with an approximate percentage of how many of your users is affected by the given color vision deficiency (in the CUBE file names).

Color Lookup Table (LUT) files for every type of color blindness.

Color Lookup Table (LUT) files for every type of color blindness.

To use, in Photoshop create a Color Lookup Adjustment Layer, and simply use the given CUBE file. In Unity, use Color Correction (3D Lookup Texture) Image Effect.

Source: http://www.color-blindness.com/coblis-color-blindness-simulator/ The Color Blind Simulation function is copyright Ā© 2000-2001 by Matthew Wickline and the Human-Computer Interaction Resource Network (http://hcirn.com).

Design colors for color blind vision deficiencies

I was surprised that the tools out there are pretty limited. You can find tools easily that simulate color blind vision (even Photoshop has a Proof Setup for the two most common type), but every one is giving you only a full screen preview.

When I designed the color schemes for tangram!, I really wanted to immediately provision the color blind visions as well (for all types) of the particular color swatch I was working on (something like gaumut warning). I already had a document, where I had different screenshots from the game, but had no option to have any live mode.

Color lookup tables (LUT) for color blindness types

Using Color lookup tables (LUT) is a good fit, as the format itself is designed to remap colors of the spectrum. Can be easily integrated to Photoshop using Color Lookup Adjustment Layers, or to Unity using Color Correction (3D Lookup Texture) (or any color grading plugin of your choice).

To have Color Correction (3D Lookup Texture) in your Unity Components Menu, you’ll need to import the following assets using Import Package… from Standard Assets/Effects package:
StandardAssets/Editor/ImageEffects/ColorCorrectionLookupEditor.cs
StandardAssets/Effects/ImageEffects/Scripts/PostEffectBase.cs
StandardAssets/Effects/ImageEffects/Scripts/ColorCorrectionLookupEditor.cs
StandardAssets/Effects/ImageEffects/Shaders/ColorCorrection3DLut.cs

DISCLAIMER. THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.) IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE INFORMATION ON THIS BLOG (INCLUDING BUT NOT LIMITED TO ARTICLES, IMAGES, CODE SNIPPETS, SOURCE CODES, EXAMPLE PROJECTS, ETC.).

  • Rui Pereira

    Hi… cant download Luts… can you make file available again please?

    • Sure, the link was broken, just fixed it. Thanks! šŸ™Œ

      • Rui Pereira

        Thanks!!!!