Minnesota Department of Transportation

511 Travel Info

Design System

Color use

Always use brand colors. See color for the full palette and color guidance.

Be accessible

Minnesota state law requires all government agencies meet WCAG 2.1 at the AA level for digital content. A minimum contrast ratio of 4.5:1 (7:1 for the WCAG 2.1 AAA standard) between the foreground and background colors of on screen text must be achieved. Always lean towards a higher contrast ratio for easier readability. Never use color codes alone to define hierarchy or to differentiate text based information, include additional changes in shape or text.

WCAG 2.1 Guideline 1.4.1: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

WCAG Guideline 1.4.3 Contrast (Minimum) (Level AA): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following

Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes
Text that is part of a logo or brand name has no contrast requirement.

In terms of color deficiency (color blindness), the safest colors are black, white and gray followed by blue and yellow. Contrasting red versus green is the most problematic, but can be usable so long as supplemental information is provided.

Subtle variations of colors may be lost in different monitor settings. For instance, flat panel screens are brighter than older monitors; Mac colors may be lighter than Windows colors. Finally, some low vision users set their monitors to high color contrast, reducing the mid-value range. If possible, test your colors on different monitors or different gamma settings.