Imaging & Illustration

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.

Testing

Paletton Color Palette Simulators

a screenshot of the paletton color mixer