Design DocuWare

Guidelines to empower the DocuWare products' inclusivity and accessibility

leafleafDocy banner shape 01Docy banner shape 02Man illustrationFlower illustration

Color

Estimated reading: 3 minutes 21 views

Contrast

Adequate contrast between the color of every single information-bearing element and its background should be assured.

Which UI elements need which levels of color contrast can be determined by categorizing them into two groups: information-bearing elements, and decorative or disabled elements.

Color independence

The User Interface should not rely solely on color to differentiate between objects or communicate important information.

If your app uses color to convey information, be sure to provide text labels or glyph shapes so color-blind users can also understand it.

Non-color indicators such as shape, line, text treatment, size, etc., should be used instead of changing only the component’s color.

Color independence should be checked during the design by using, for instance, the grayscale test. In addition, designers can turn a design into shades of gray to check if there is something that cannot be identified or if the difference between shades is sufficiently visible.

Color combinations

Designers should be aware of color blindness.

Many colorblind people find it difficult to distinguish blue from orange, for example, or red from green (and either red or green from grey). The usage of these color combinations as the only way to distinguish between two states or values should be avoided. Designers must rely on differentiation with shapes, patterns, additional titles, etc.

Problematic color combinations should be avoided:

  • Red & Green (the biggest ones to avoid)

  • Green & Brown

  • Green & Blue

  • Green & Gray 

  • Green & Black  

  • Blue & Gray

  • Blue & Purple

If the design truly calls for using problematic colors next to each other, Designers need to make sure there is a high contrast ratio between the two by, for instance, darkening one color and lightening the other to make the contrast more pronounced or playing with the saturation, or sliding the hues a little one way or another.

Color inversion

The correct response to Inverting Colors should be planned. 

Users can turn on Invert Colors when they prefer to view items on a dark background. Designers also need to own this experience and provide planned and controlled behavior.

Leave a Comment

CONTENTS