Color Use

Stick to brand colors

Always use the official brand colors. You can find the full list and how to use them in the color guide.

Make it easy to read

Minnesota law says that all government websites and digital content must follow accessibility rules (WCAG 2.1, Level AA). One important rule is about color contrast. Text must stand out clearly from the background. The contrast ratio should be at least 4.5 to 1. If you want to meet an even higher standard (Level AAA), the ratio should be 7 to 1.

Try to use high contrast colors so that text is easier to read for everyone.

Don’t use color alone to show meaning

You can’t rely on color alone to show what’s important or different. For example, don’t just use red text to show a warning—also use bold text, icons, or shapes to help explain it.

Web Content Accessibility Guidelines

Guideline 1.4.1 – Use of Color

This guideline says you can’t use color as the only way to show information, actions, or differences. You need to add something else, like text or shapes.

Guideline 1.4.3 Contrast (Minimum) (Level AA)

Text and images of text must have a contrast ratio of at least 4.5 to 1. There are a few exceptions:

Large text: Needs only a 3 to 1 contrast ratio.
Decorative or hidden text: If the text is just decoration or not meant to be seen, it doesn’t need to meet the contrast rule.
Logos: Text in logos or brand names doesn’t have to follow the contrast rule.

Tips for choosing colors

Black, white, and gray are the safest colors for people with color blindness. Blue and yellow are also good choices.
Red and green can be hard to tell apart for some people, so don’t use them alone to show differences.
Colors can look different on different screens. For example, Mac screens may show colors lighter than Windows screens. Some people with low vision use high-contrast settings, which can change how colors appear.
If you can, test your colors on different screens and settings to make sure they still work well.