Color palette

For Adobe, Sketch, and Mac applications

Download color palettes

white

#FFFFFF

light

#B3EFFF

bright

#00CFFF

medium

#046B99

dark

#1C304A

black

#000000

Color guidance

Color choices impact the accessibility of our content. Here's how to use color in line with 18F's accessibility practices.

Don't use color exclusively to convey meaning

People see colors differently, and color is not seen by everyone. If color is the only signal, that signal won’t get through as intended to everyone.

When communicating, use color as an enhancement to other elements like text, icons, or patterns. For example, to visualize data in a line chart, use different line styles (solid, dashed, dotted) in addition to different line colors.

One helpful test is to imagine your design in black and white. Is it still understandable?

Use accessible color combinations

Colors need to contrast with one another to be identifiable. WCAG provides guidance on what contrast ratios are accessible in certain situations:

Large text (bolded 18px text, regular 24px text, or larger) should have a contrast ratio of 3:1 or more with its background.
Small text (18px text or smaller) should have a contrast ratio of 4.5:1 or more with its background.
Non-text elements (aka, icons or diagrams) should have a contrast ratio of 3:1 or more with its background color.

We recommend using a higher standard when using the 18F palette:

Large and small text should have a contrast ratio of 4.5:1 or more with its background.
Non-text elements should have a contrast ratio of 3:1 or more with its background color.

Below is an outline of accessible 18F color combinations.

	White text #FFFFFF	Light text #B3EFFF	Bright text #00CFFF	Medium text #046B99	Dark text #1C304A	Black text #000000
Black background #000000	White elements on black background is 508-compliant, with a contrast ratio of 17:1.	Light elements on black background is 508-compliant, with a contrast ratio of 15:1.	Bright elements on black background is 508-compliant, with a contrast ratio of 11:1.	Medium elements on black background is 508-compliant, with a contrast ratio of 3.6:1. We recommend using this combination only for non-text elements.	Do not use dark text on black background; it is not 508-compliant, with a contrast ratio of 1.5:1.	Do not use black text on black background; it is not 508-compliant, with a contrast ratio of 1.0:1.
Dark background #1C304A	White elements on dark background is 508-compliant, with a contrast ratio of 11:1.	Light elements on dark background is 508-compliant, with a contrast ratio of 10:1.	Bright elements on dark background is 508-compliant, with a contrast ratio of 7:1.	Do not use medium text on dark background; it is not 508-compliant, with a contrast ratio of 2.3:1.	Do not use dark text on dark background; it is not 508-compliant, with a contrast ratio of 1.0:1.	Do not use black text on dark background; it is not 508-compliant, with a contrast ratio of 1.5:1.
Medium background #046B99	White elements on medium background is 508-compliant, with a contrast ratio of 4.70:1.	Light elements on medium background is 508-compliant, with a contrast ratio of 4.15:1. We recommend using this combination only for non-text elements.	Bright elements on medium background is 508-compliant, with a contrast ratio of 3.2:1. We recommend using this combination only for non-text elements.	Do not use medium text on medium background; it is not 508-compliant, with a contrast ratio of 1.0:1.	Do not use dark text on medium background; it is not 508-compliant, with a contrast ratio of 2.3:1.	Black elements on medium background is 508-compliant, with a contrast ratio of 3.6:1. We recommend using this combination only for non-text elements.
Bright background #00CFFF	Do not use white text on bright background; it is not 508-compliant, with a contrast ratio of 1.5:1.	Do not use light text on bright background; it is not 508-compliant, with a contrast ratio of 1.3:1.	Do not use bright text on bright background; it is not 508-compliant, with a contrast ratio of 1.0:1.	Medium elements on bright background is 508-compliant, with a contrast ratio of 3.2:1. We recommend using this combination only for non-text elements.	Dark elements on bright background is 508-compliant, with a contrast ratio of 7:1.	Black elements on bright background is 508-compliant, with a contrast ratio of 11:1.
Light background #B3EFFF	Do not use white text on light background; it is not 508-compliant, with a contrast ratio of 1.1:1.	Do not use light text on light background; it is not 508-compliant, with a contrast ratio of 1.0:1.	Do not use bright text on light background; it is not 508-compliant, with a contrast ratio of 1.3:1.	Medium elements on light background is 508-compliant, with a contrast ratio of 4.15:1. We recommend using this combination only for non-text elements.	Dark elements on light background is 508-compliant, with a contrast ratio of 10:1.	Black elements on light background is 508-compliant, with a contrast ratio of 15:1.
White background #FFFFFF	Do not use white text on white background; it is not 508-compliant, with a contrast ratio of 1.0:1.	Do not use light text on white background; it is not 508-compliant, with a contrast ratio of 1.1:1.	Do not use bright text on white background; it is not 508-compliant, with a contrast ratio of 1.5:1.	Medium elements on white background is 508-compliant, with a contrast ratio of 4.70:1.	Dark elements on white background is 508-compliant, with a contrast ratio of 11:1.	Black elements on white background is 508-compliant, with a contrast ratio of 17:1.