Skip to main content
U.S. flag

An official website of the United States government

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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:

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.

18F Visual identity

An official website of the GSA’s Technology Transformation Services

Looking for U.S. government information and services?
Visit USA.gov