In keeping with our theme of trust, the HealthCare.gov identity marker establishes a universal signature across all HealthCare.gov communications. We treat the marker the same across all media. See the rules to follow when using the HealthCare.gov identity marker below.

The Health Insurance Marketplace, the authenticated application where consumers buy insurance, uses a separate and distinct logo. This logo appears in the HealthCare.gov footer.

To ensure that our identity marker is clearly discernable, it requires space as shown below, free of type, graphics, and other elements that might cause visual clutter. There is also a Spanish version of the marker.

Examples

English

Spanish

Variations

There are two variations of the HealthCare.gov identity marker that should be used sparingly. The first is a white logo against black. The second is a gray version. Both are intended to be used as "tags" in areas such as a footer where subtle use of the mark is appropriate.

White logo on black

Grey logo

Favicon

A dark blue HealthCare.gov favicon appears on all HealthCare.gov web pages.

Guidance

Usage

• The HealthCare.gov identity marker should only be used against a white background. It shouldn’t be placed against any other background color or modified in any way.

Incorrect usage

Style	Example
Color background
Photographic background
White against color
Drop shadow
Other colors
Outlined
Squeezed

Accessibility

• Logos used in the header and footer are considered functional images per the W3C.

General accessibility guidance

• Logos in the header and footer, or that function as links, should be given alternative text that tells the user where clicking the logo will take them – in our case, usually the homepage.
• Logos used in the header and footer, or that function as links, should be given focus when navigating by keyboard.

Accessibility testing

• Alternate text is visible when you hover over the logo
• Clicking the logo shows a focus state

Keyboard testing

• The logo receives focus via keyboard navigation. Using only a keyboard, you can navigate to the logo, use it to go to the appropriate link, and navigate away from it.
• Focus indicators are clearly visible around logos. When you use a keyboard to tab into a text input, you see an indicator around the input field.

Screenreader testing

• Alternative text is read aloud by screenreaders.
• Screenreader announces that it is on a link, and the link’s destination.

Code

React

Review Storybook for React guidance of this component.

Style customization

Customize the colors of the logo using CSS.

Available classes:

• .hc-c-logo__health
• .hc-c-logo__care
• .hc-c-logo__gov

Component maturity