Color

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

NetApp Black

Our primary color palette is a clean, minimal and monochromatic one of black and white.

NetApp Black

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
Light Blue
Lightest Blue
Medium Blue
Dark Blue
Darkest 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 the primary text color 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 the secondary text color for supportive text such as placeholder text in forms and metadata (small text and help text).

On White
On Light

Selected Text

Use for selected text color for text that is selected.

On Light
On Dark

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 color 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 the disable text color to indicate components that cannot be used. Disabled components are exempt from the 4.5:1 minimum contrast ratio.

On White
On Light

Interactive

Use the interactive text color to establish interactivity and hierarchy between UI components such as buttons.

Default
Hover
Active/Pressed
Focus

Feedback

Use feedback colors to reinforce user actions. Color alone is not sufficient to meet WCAG 2.0 Level AA Accessibility Guidelines. An additional indicator, 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

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

On White
On Light
On Dark

Table and Component Borders

Use 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

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 the color of an item in the foreground and the color of the field behind it. The World Wide Web Consortium established specific color-contrast ratios for ensuring accessibility. 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 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
#F2F2F2
#E6E6E6
#CCCCCC
#B3B3B3
#999999
#808080
#666666
#4D4D4D
#333333
#1A1A1A
#000000
#FFFFFF
Text
DNP 1.1
Text
DNP 1.2
Text
DNP 1.6
Text
DNP 2.1
Text
DNP 2.8
Text
AA18 3.9
Text
AA 5.7
Text
AAA 8.4
Text
AAA 12.6
Text
AAA 17.4
Text
AAA 21
#F2F2F2
Text
DNP 1.1
Text
DNP 1.1
Text
DNP 1.4
Text
DNP 1.8
Text
DNP 2.5
Text
AA18 3.5
Text
AA 5.1
Text
AAA 7.5
Text
AAA 11.2
Text
AAA 15.5
Text
AAA 18.7
#E6E6E6
Text
DNP 1.2
Text
DNP 1.1
Text
DNP 1.2
Text
DNP 1.6
Text
DNP 2.2
Text
AA18 3.1
Text
AA 4.6
Text
AA 6.7
Text
AAA 10
Text
AAA 13.9
Text
AAA 16.8
#CCCCCC
Text
DNP 1.6
Text
DNP 1.4
Text
DNP 1.2
Text
DNP 1.3
Text
DNP 1.7
Text
DNP 2.4
Text
AA18 3.5
Text
AA 5.2
Text
AAA 7.8
Text
AAA 10
Text
AAA 13
#B3B3B3
Text
DNP 2.1
Text
DNP 1.8
Text
DNP 1.6
Text
DNP 1.3
Text
DNP 1.3
Text
DNP 1.8
Text
DNP 2.7
Text
AA18 4
Text
AA 6
Text
AAA 8.3
Text
AAA 10
#999999
Text
DNP 2.8
Text
DNP 2.5
Text
DNP 2.2
Text
DNP 1.7
Text
DNP 1.3
Text
DNP 1.3
Text
DNP 2
Text
DNP 2.9
Text
AA18 4.4
Text
AA 6.1
Text
AAA 7.3
#808080
Text
AA18 3.9
Text
AA18 3.5
Text
AA18 3.1
Text
DNP 2.4
Text
DNP 1.8
Text
DNP 1.3
Text
DNP 1.4
Text
DNP 2.1
Text
AA18 3.2
Text
AA18 4.4
Text
AA 5.3
#666666
Text
AA 5.7
Text
AA 5.1
Text
AA 4.6
Text
AA18 3.5
Text
DNP 2.7
Text
DNP 2
Text
DNP 1.4
Text
DNP 1.4
Text
DNP 2.2
Text
AA18 3
Text
AA18 3.6
#4D4D4D
Text
AAA 8.4
Text
AAA 7.5
Text
AA 6.7
Text
AA 5.2
Text
AA18 4
Text
DNP 2.9
Text
DNP 2.1
Text
DNP 1.4
Text
DNP 1.4
Text
DNP 2
Text
DNP 2.4
#333333
Text
AAA 12.6
Text
AAA 11.2
Text
AAA 10
Text
AAA 7.8
Text
AA 6
Text
AA18 4.4
Text
AA18 3.2
Text
DNP 2.2
Text
DNP 1.4
Text
DNP 1.3
Text
DNP 1.6
#1A1A1A
Text
AAA 17.4
Text
AAA 15.5
Text
AAA 13.9
Text
AAA 10
Text
AAA 8.3
Text
AA 6.1
Text
AA18 4.4
Text
AA18 3
Text
DNP 2
Text
DNP 1.3
Text
DNP 1.2
#000000
Text
AAA 21
Text
AAA 18.7
Text
AAA 16.8
Text
AAA 13
Text
AAA 10
Text
AAA 7.3
Text
AA 5.3
Text
AA18 3.6
Text
DNP 2.4
Text
DNP 1.6
Text
DNP 1.2
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
About WCAG 2.0 contrast