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 $luci-brand-color #000000 AAA

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 $luci-background-color-white #FFFFFF AAA

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 $luci-background-color-light #F2F2F2 AAA

Dark $luci-background-color-dark #4D4D4D AAA

Light Blue $luci-background-color-light-blue #CCDAFF AAA

Lightest Blue $luci-background-color-lightest-blue #F5FBFF AAA

Medium Blue $luci-background-color-medium-blue #2958FF AA

Dark Blue $luci-background-color-dark-blue #0037FF AAA

Darkest Blue $luci-background-color-darkest-blue #001C80 AAA

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 $luci-text-color-primary-on-light #4D4D4D AAA

On Light $luci-text-color-primary-on-light #4D4D4D AAA

On Dark $luci-text-color-primary-on-dark #FFFFFF AAA

On Medium Blue $luci-text-color-primary-on-dark #FFFFFF AA

On Dark Blue $luci-text-color-primary-on-dark #FFFFFF AAA

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 $luci-text-color-secondary-on-light #666666 AA

On Light $luci-text-color-secondary-on-light #666666 AA

Selected Text

Use for selected text color for text that is selected.

On Light $luci-text-color-selected-on-light #333333 AAA

On Dark $luci-text-color-selected-on-dark #FFFFFF AAA

Links

Apply link properties based on link states and backgrounds.

On White $luci-link-color-default-on-light #5278FF AA18

Hover $luci-link-color-hover-on-light #2958FF AA

Active $luci-link-color-active-on-light #0037FF AAA

Visited $luci-link-color-visited-on-light #2958FF AA

On Dark $luci-link-color-default-on-dark #FFFFFF AAA

Hover $luci-link-color-hover-on-dark #E6E6E6 AA

Active $luci-link-color-active-on-dark #E6E6E6 AA

Visited $luci-link-color-visited-on-dark #E6E6E6 AA

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 $luci-feedback-color-error-primary #D82841 AA

On Light $luci-feedback-color-error-primary #D82841 AA18

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 $luci-text-color-disabled-on-light #B3B3B3

On Light $luci-text-color-disabled-on-light #B3B3B3

Interactive

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

Default $luci-interactive-color-default #5278FF AA

Hover $luci-interactive-color-hover #2958FF AA

Active/Pressed $luci-interactive-color-active #0037FF AAA

Focus $luci-interactive-color-focus #7B99FF AAA

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) $luci-feedback-color-information-primary #333333 AAA

Information (charts/graphs) $luci-feedback-color-information-chart #B1B3BE AAA

Information (background used with black text) $luci-feedback-color-information-background #FFFBAC AAA

Information Icon Example

Error

Fail/Error (text, icons) $luci-feedback-color-error-primary #D82841 AA

Fail/Error (charts/graphs) $luci-feedback-color-error-chart #E68480 AAA

Fail/Error (background used with black text) $luci-feedback-color-error-background #F7D4D9 AAA

Error Icon Example

Warning

Warning (background used with black text; icons) $luci-feedback-color-warning-primary #FF6130 AAA

Warning (background used with black text; charts/graphs) $luci-feedback-color-warning-chart #FFBCA3 AAA

Warning (background used with black text) $luci-feedback-color-warning-background #FFE3D5 AAA

Warning Icon Example

Success

Success (text, icons) $luci-feedback-color-success-primary #1E6540 AAA

Success (charts/graphs) $luci-feedback-color-success-chart #65D097 AAA

Success (background used with black text) $luci-feedback-color-success-background #90DAB6 AAA

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 $luci-border-separator-on-light solid 1px #B3B3B3

On Light $luci-border-separator-on-light solid 1px #B3B3B3

On Dark $luci-border-separator-on-dark solid 1px #808080

Table and Component Borders

Use a 1px border around tables and components such as charts and graphs.

On White $luci-border-component-on-light solid 1px #CCCCCC

On Light $luci-border-component-on-light solid 1px #CCCCCC

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 $luci-color-black #000000 AAA

7 $luci-color-neutral-7 #1A1A1A AAA

15 $luci-color-neutral-15 #333333 AAA

27 $luci-color-neutral-27 #4D4D4D AAA

34 $luci-color-neutral-34 #666666 AA

53 $luci-color-neutral-53 #808080 AA

61 $luci-color-neutral-61 #999999 AAA

76 $luci-color-neutral-76 #B3B3B3 AAA

84 $luci-color-neutral-84 #CCCCCC AAA

85 $luci-color-neutral-85 #E6E6E6 AAA

96 $luci-color-neutral-96 #F2F2F2 AAA

White $luci-color-neutral-white #FFFFFF AAA

Charts and Graphs

Learn more about LUCI charts and graphs.

Color 1 $luci-chart-color-1 #61DCE8

Color 2 $luci-chart-color-2 #01ADBD

Color 3 $luci-chart-color-3 #2958FF

Color 4 $luci-chart-color-4 #0072D9

Color 5 $luci-chart-color-5 #A3BAFF

Color 6 $luci-chart-color-6 #B1B3BE

Color 7 $luci-chart-color-7 #FFBCA3

Color 8 $luci-chart-color-8 #C66900

Color 9 $luci-chart-color-9 #D71ECD

Color 10 $luci-chart-color-10 #9F82F1

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