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 always contain the product’s focal point. The user is doing most of their work 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
Purple

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

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

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

On White
On Light

Selected Text

On Light
On Dark
On Dark Gray
On White
Hover
Active
Visited
On Dark
Hover
Active
Visited

Errors

On White
On Light

Disabled

Use to indicate components that cannot be used. Disabled components are exempt from minimum contrast ratios.

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.

Errors

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

Warning

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

Success

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

Separators & Borders

Separators and borders define and structure content.

Separators

On White
On Light
On Dark

Table & Component Borders

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).

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

Charts and Graphs

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

Learn more about LUCI Charts and Graphs.

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 organizational benchmark for NetApp LUCI products is Level AA.

The color decisions shared 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