Color

Estimated reading: 3 minutes 120 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.

DocuWare Design

Color

Contrast

Color independence

Color combinations

Color inversion

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input