The Medicaid color palette focuses on the three Medicaid brand colors, uses specific grays/blacks for text hierarchy,
and incorporates essential semantic colors, resulting in a manageable set of defined colors.
1. Core Brand Palette (4 Colors):
These colors are foundational to the Medicaid brand identity and should be used consistently across Medicaid.gov.
#026666
Medicaid Teal
Primary color for branding.
#17415F
Dark Navy
Accent color, used sparingly for specific UI elements or borders.
#046791
Blue
Accent color, used sparingly for specific UI elements or borders.
#565656
Logo Gray
Secondary brand color. Used for some typography, UI elements, branding accents and within the Medicaid logo.
2. Accent Colors (4 Colors)
Accent colors are intentional colors, used sparingly to draw attention to key interactive elements like buttons, links, or notifications. They provide crucial visual hierarchy by standing out against the core or neutral color palettes.
#CA4D22
Burnt Orange
Used sparingly as an additional accent color.
#76BAB2
Medicaid Mint
Accent color, used sparingly for specific UI elements or borders (as well as in the main menu navigation).
#862074
Bright Plum
Accent color, used sparingly for specific UI elements or borders.
#EEFAFE
Light Blue
Secondary brand color. Used as a background color and sometimes in combination with visual assets.
3. Neutral Palette (6 Colors)
This neutral color ramp replaces multiple variations of whites, grays and blacks found throughout Medicaid.
#1B1B1B
Ink
Body/Headings
Primary text color for maximum contrast (Typography H1-H6, Body copy). Consolidates various dark grays/blacks like #333333 and #000000 for text use.
#565C65
Dark Gray
(UI/Secondary Text)
Secondary text in complex UI elements, borders for input fields, and organizational dividers.
#757575
Medium Gray
(Placeholder/Mid-Text)
Placeholder text in search fields and forms. Also used for certain medium contrast UI text and text placeholders.
#DFE1E2
Light Gray
(Border/Divider)
Default color for borders for containers, tables, and form elements.
#F1F1F1
Off-White
(Shaded Background)
Subtle background color for card elements, shaded table rows, or UI areas that need slight visual separation.
#FFFFFF
White
(Base Background)
Main page background, also used for fill colors and light text on dark backgrounds.
4. Interaction and System Colors (8 Colors)
This category defines colors for interactive states and system feedback, ensuring clear communication of success, errors, warnings and links.
#17415F
Dark Navy
(Hover)
Used for the hover and active states of primary buttons and key links.
#EEFAFE
Light Blue
(Info/Background)
Background shade for informational messages or light blue containers. Can be used as the "Info" UI background color.
#00A91C
Success Green
(Core)
Primary color for successful actions and validation (e.g., success messages, icons) straight from USWDS
#ECF3EC
Light Success
(Background)
Light background color for success alert containers (USWDS)
#D54309
Error Red
(Core)
Primary color for critical errors and validation feedback (e.g., error messages, icons)
#F4E3DB
Light Error
(Background)
Light background color for error alert containers
#FFBE2E
Warning Yellow
(Core)
Primary color for warning messages and cautionary indicators, aligned with USWDS guidance
#FAF3D1
Light Warning
(Background)
Light background color for warning alert containers
Accessibility Requirements
Contrast Ratios:
To meet accessibility standards, text and background color combinations must maintain minimum contrast ratio of 4.5:1 for normal text.
When deviating from the default text color or background, always ensure this minimum contrast.
Color Use:
Never use color alone to convey information; ensure adequate font sizes and maintain sufficient contrast.
Usage Rules (Do's and Don'ts)
Consistency is Key:
Stick to the documented colors! Using multiple arbitrary variations of the same hue (like different plums or blues) weakens brand recognition.
Purpose-Driven Colors:
Every color in the palette must have a defined purpose (e.g., Error Red is reserved strictly for error states).
Deprecation:
Any color currently used on Medicaid that is not included in this consolidated style guide palette is deprecated and must be replaced during future development efforts.
