Universal Design Guide

Imaging

[Author: Bill Fischer]


If you are creating an image for any purpose, this guide should drive your design and illustration decisions, Including all of these use-cases:

    • Interactive
    • Animation
    • Video
    • Game
    • Print
  • Images should be high contrast for the sight impaired.
  • Images should remain easy to understand and read when tested.They can be tested in Photoshop as gray scale, and 2 types of red-green color- blindness: Protaniopa and Deuteraniopa. They can also be tested on-line using the Toptal Colorblind Filter. It is also a good idea to test images in a brightly lit room on a dimly lit display (such as an overhead projector).
  • Employ a visual hierarchy that guides the viewer through the layout in order of informational relevance. Reference this DLC guide for examples.
  • Images with text integrated should also include one or both of these:
    • Text in adjacent media that a screen reader can read
    • Audio description



Examples

High contrast image of a character and a text box

Moose Finder App by Fredy Santiago

Readability is excellent thanks to the high contrast coloring of both the image and text.

A low contrast image of a character with hard to read text laid over a background image.

Snow Daughter Alva by Mikayla Taylor

Accessibility is hindered by the low contrast between the text and image as well as the figure's skirt and the background. The image pattern behind the text makes it difficult to read.

Color schemes should work for all types of color deficiencies.

The NoCoffee Chrome plugin, Photoshop, and other software can simulate many of these during the design process.

Designing for an attractive and readable version in grayscale is job one. That is the lowest common denominator.




Testing

Paletton Color Palette Simulators

a screenshot of the paletton color mixer


Additional Resources

One Way to Level Up Your Color Skills ( a Medium article by Sarah Healy)