This component is only used for HealthCare. Please use the theme switcher to view the component with HealthCare styles.
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
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.