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 $luci-brand-color #0067C5 AA

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 $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 #F6F6F6 AAA

Dark $luci-background-color-dark #454545 AAA

Medium Blue $luci-background-color-medium-blue #1E4A93 AAA

Dark Blue $luci-background-color-dark-blue #173E77 AAA

Purple $luci-background-color-purple #7E5FD4 AA

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

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

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

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

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

Secondary

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

On White $luci-text-color-secondary-on-light #565656 AAA

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

Selected Text

On Light $luci-text-color-selected-on-light #7E5FD4 AA

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

Footer Supportive Text

On Dark Gray $luci-text-color-footer-supportive #B4DF24 AA

Links

On White $luci-link-color-default-on-light #0067C5 AA

Hover $luci-link-color-hover-on-light #1E4A93 AAA

Active $luci-link-color-active-on-light #173E77 AAA

Visited $luci-link-color-visited-on-light #1E4A93 AAA

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

Hover $luci-link-color-hover-on-dark #F2F2F2 AAA

Active $luci-link-color-active-on-dark #F2F2F2 AAA

Visited $luci-link-color-visited-on-dark #F2F2F2 AAA

Errors

On White $luci-feedback-color-error-primary #DA1E21 AA

On Light $luci-feedback-color-error-primary #DA1E21 AA

Disabled

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

On White $luci-text-color-disabled-on-light #C2C2C2

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

Interactive

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

Default $luci-interactive-color-default #0067C5 AA

Hover $luci-interactive-color-hover #1E4A93 AAA

Active/Pressed $luci-interactive-color-active #173E77 AAA

Focus $luci-interactive-color-focus #4FAAFF AAA

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

Fail/Error (charts/graphs) $luci-feedback-color-error-chart #FF4548 AA

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

Warning

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

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

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

Success

Success (text, icons) $luci-feedback-color-success-primary #498128 AA

Success (charts/graphs) $luci-feedback-color-success-chart #6FC13E AAA

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

Separators & Borders

Separators and borders define and structure content.

Separators

On White $luci-border-separator-on-light solid 1px #C2C2C2

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

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

Table & Component Borders

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

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

Neutrals

Our neutrals have been streamlined for on-screen use. They are organized by lightness value from Black (0) to White (100).

Black $luci-color-black #000000 AAA

7 $luci-color-neutral-7 #131313 AAA

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

27 $luci-color-neutral-27 #454545 AAA

34 $luci-color-neutral-34 #565656 AAA

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

61 $luci-color-neutral-61 #9C9C9C AAA

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

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

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

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

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

Charts and Graphs

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

Color 2 $luci-chart-color-2 #FFAC00

Color 3 $luci-chart-color-3 #F9DE2F

Color 4 $luci-chart-color-4 #7BD8E1

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

Color 6 $luci-chart-color-6 #1E4A93

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

Color 8 $luci-chart-color-8 #88C5FF

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

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

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