Color

Color is an integral aspect of conveying clear concise information. Our colors are optimized for multiple backgrounds, meeting or exceeding WCAG 2.0 Level AA Accessibility Guidelines.

NetApp Blue

NetApp Blue is NetApp's official brand color. In LUCI, NetApp Blue is also the color used to convey interactivity (see Text and Interactive color sections for more detail).

NetApp Blue

Backgrounds

Background colors work in pairs to establish visual hierarchy.

Primary

Primary backgrounds contain the product or site’s focal point. Most of the product or site’s user interface will display on this background.

White

Secondary

Secondary backgrounds offer visual rest from primary backgrounds. They often contain auxiliary elements such as utility navigation, main navigation, side navigation, card backgrounds, registration forms, promotions and the footer.

Light
Dark
Medium Blue
Dark Blue

Text

Text on any background color must have a minimum foreground-to-background contrast ratio of 4.5:1. This ensures compliance with WCAG 2.0 Level AA Accessibility Guidelines. The only exception to this rule, is for text that exceeds 18px font size (AA18).

Brand logos and disabled text do not have a minimum contrast ratio. All other content, including placeholder text, must meet or exceed 4.5:1.

Primary Text

Use for fundamental text, such as body copy, Form Field labels, Data Table cell data, List Group items and Headings.

On White
On Light
On Dark
On Medium Blue
On Dark Blue

Secondary Text

Use for supportive text, such as placeholder text in Forms and metadata (small text and help text).

On White
On Light

Selected Text

Use for text that is selected.

On Light
On Dark

Use for text in a product or site footer.

On Dark Gray

Apply link properties based on link states and backgrounds.

On White
Hover
Active
Visited
On Dark
Hover
Active
Visited

Error Text

Use for error text on a primary white background or secondary light background. For example, use error text to display a form field error message.

On White
On Light

Disabled Text

Use to indicate components that cannot be used. Disabled components are exempt from the minimum contrast ratio 4.5:1.

On White
On Light

Interactive

Use to establish interactivity and hierarchy between UI components, such as buttons.

Default
Hover
Active/Pressed
Focus

Feedback

Use feedback colors to reinforce user action. Color alone is not sufficient to meet WCAG 2.0 Level AA Accessibility Guidelines. An additional affordance, such as an Icon, must be included.

Information

Information (text, icons)
Information (charts/graphs)
Information (background used with black text)

Information Icon Example

Error

Fail/Error (text, icons)
Fail/Error (charts/graphs)
Fail/Error (background used with black text)

Error Icon Example

Warning

Warning (background used with black text; icons)
Warning (background used with black text; charts/graphs)
Warning (background used with black text)

Warning Icon Example

Success

Success (text, icons)
Success (charts/graphs)
Success (background used with black text)

Success Icon Example

Separators and Borders

Separators and borders define and structure content.

Separators

Used as 1px horizontal lines to divide and structure sections on a page.

On White
On Light
On Dark

Table and Component Borders

Used as a 1px border around tables and components (such as charts and graphs).

On White
On Light

Neutrals

Our neutrals have been streamlined for on-screen use. They are organized by lightness value from Black (0) to White (100). Neutrals are used for separators, borders, backgrounds, text, inactive icons, disabled button and link states, form fields, radio buttons and checkboxes.

Black
7
15
27
34
53
61
76
84
85
96
White

Accent Colors

Do not use accent colors for alerts or notifications. Instead, use the Feedback palette.

The purple hues are NOT to be used except for depicting a selected or active state. For example, note the use of purple for selected radio buttons and checkboxes. The LUCI documentation system uses purple to reveal the selected page in navigation and in List Groups. Purple is also used for icons and icon-only buttons. It is also used as a color hue within certain charts and graphs.

25
43
60

The green hues are NOT to be used except as an accent bar on the card component (coming soon to LUCI). They are also used to depict a selected icon, a selected radio button or checkbox on dark backgrounds., for example see List Groups on colored backgrounds.

33
35
50
51
75

Charts and Graphs

Learn more about LUCI Charts and Graphs.

Color 1
Color 2
Color 3
Color 4
Color 5
Color 6
Color 7
Color 8
Color 9
Color 10

Accessibility

Color contrast refers to the difference between foreground and background. The World Wide Web Consortium established specific color-contrast ratios for achieving compliance. The guidelines are split into three levels: A, AA, and AAA. The highest contrast level is AAA. The organizational benchmark for NetApp LUCI products is Level AA.

The color decisions here reflect an adherence to a contrast ratio of at least 4.5:1. When possible, we recommend a ratio near 5.5:1, just to be safe. Never use any combinations that do not meet Level AA Guidelines, unless using a text size 18px or higher (check contrast to be sure AA18 is met).

Neutrals Color Contrast Matrix

Background Text
#FFFFFF
#F6F6F6
#F2F2F2
#D7D7D7
#C2C2C2
#9C9C9C
#888888
#565656
#454545
#252525
#131313
#000000
#FFFFFF
Text
DNP 1
Text
DNP 1.1
Text
DNP 1.4
Text
DNP 1.7
Text
DNP 2.7
Text
AA18 3.5
Text
AAA 7.3
Text
AAA 9.5
Text
AAA 15.3
Text
AAA 18.5
Text
AAA 21
#F6F6F6
Text
DNP 1
Text
DNP 1
Text
DNP 1.3
Text
DNP 1.6
Text
DNP 2.5
Text
AA18 3.2
Text
AA 6.7
Text
AAA 8.8
Text
AAA 14.1
Text
AAA 17.1
Text
AAA 19.4
#F2F2F2
Text
DNP 1.1
Text
DNP 1
Text
DNP 1.2
Text
DNP 1.5
Text
DNP 2.4
Text
AA18 3.1
Text
AA 6.5
Text
AAA 8.5
Text
AAA 13.6
Text
AAA 16.6
Text
AAA 18.7
#D7D7D7
Text
DNP 1.4
Text
DNP 1.3
Text
DNP 1.2
Text
DNP 1.2
Text
DNP 1.9
Text
DNP 2.4
Text
AA 5.1
Text
AA 6.6
Text
AAA 10
Text
AAA 12.9
Text
AAA 14.5
#C2C2C2
Text
DNP 1.7
Text
DNP 1.6
Text
DNP 1.5
Text
DNP 1.2
Text
DNP 1.5
Text
DNP 1.9
Text
AA18 4.1
Text
AA 5.3
Text
AAA 8.6
Text
AAA 10
Text
AAA 11.7
#9C9C9C
Text
DNP 2.7
Text
DNP 2.5
Text
DNP 2.4
Text
DNP 1.9
Text
DNP 1.5
Text
DNP 1.2
Text
DNP 2.6
Text
AA18 3.4
Text
AA 5.5
Text
AA 6.7
Text
AAA 7.6
#888888
Text
AA18 3.5
Text
AA18 3.2
Text
AA18 3.1
Text
DNP 2.4
Text
DNP 1.9
Text
DNP 1.2
Text
DNP 2
Text
DNP 2.7
Text
AA18 4.3
Text
AA 5.2
Text
AA 5.9
#565656
Text
AAA 7.3
Text
AA 6.7
Text
AA 6.5
Text
AA 5.1
Text
AA18 4.1
Text
DNP 2.6
Text
DNP 2
Text
DNP 1.3
Text
DNP 2
Text
DNP 2.5
Text
DNP 2.8
#454545
Text
AAA 9.5
Text
AAA 8.8
Text
AAA 8.5
Text
AA 6.6
Text
AA 5.3
Text
AA18 3.4
Text
DNP 2.7
Text
DNP 1.3
Text
DNP 1.6
Text
DNP 1.9
Text
DNP 2.1
#252525
Text
AAA 15.3
Text
AAA 14.1
Text
AAA 13.6
Text
AAA 10
Text
AAA 8.6
Text
AA 5.5
Text
AA18 4.3
Text
DNP 2
Text
DNP 1.6
Text
DNP 1.2
Text
DNP 1.3
#131313
Text
AAA 18.5
Text
AAA 17.1
Text
AAA 16.6
Text
AAA 12.9
Text
AAA 10
Text
AA 6.7
Text
AA 5.2
Text
DNP 2.5
Text
DNP 1.9
Text
DNP 1.2
Text
DNP 1.1
#000000
Text
AAA 21
Text
AAA 19.4
Text
AAA 18.7
Text
AAA 14.5
Text
AAA 11.7
Text
AAA 7.6
Text
AA 5.9
Text
DNP 2.8
Text
DNP 2.1
Text
DNP 1.3
Text
DNP 1.1
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast