Why Healthcare & Government Need Special Color Palettes
Healthcare and government websites serve the entire population — including older adults, people with visual impairments, and users with low digital literacy. A color palette that works fine for a startup's marketing site can be a real barrier for these users.
These sectors also often have legal requirements: Section 508 in the US, EN 301 549 in the EU, and various national accessibility laws all mandate WCAG 2.1 AA compliance at minimum. Many go further and require AAA for critical information.
But accessibility doesn't mean ugly. A well-designed accessible color palette can be both beautiful and inclusive.
Key Accessibility Requirements
Before we get to the palettes, let's recap the standards your colors need to meet:
| Standard | Normal Text | Large Text | UI Components |
|---|---|---|---|
| WCAG 2.2 AA | 4.5:1 | 3:1 | 3:1 |
| WCAG 2.2 AAA | 7:1 | 4.5:1 | — |
Healthcare and government sites should aim for WCAG AA as the legal minimum and target AAA for critical user pathways (login, appointments, results, payments).
Also important but less discussed:
- Color blindness: 8% of men have red-green color blindness. Never rely solely on color to convey meaning (error/success states, chart data).
- Glare and halation: Pure white backgrounds can cause glare for users with cataracts. Slightly warm off-white backgrounds are easier on older eyes.
- Focus indicators: Thick, high-contrast focus rings — not just a thin outline that blends in.
Palette 1: Trustworthy Blue (Government Standard)
Blue is the most trusted color across cultures and the default for government and healthcare. This palette is inspired by the US Web Design System and UK GOV.UK standards.
| Role | Hex | Color | Contrast on White |
|---|---|---|---|
| Primary | #005EA2 | ■ | 8.2:1 (AAA) |
| Primary Light | #2491FF | ■ | 4.7:1 (AA) |
| Primary Dark | #162E51 | ■ | 13.5:1 (AAA) |
| Success | #00833D | ■ | 6.1:1 (AA) |
| Warning | #936F00 | ■ | 5.3:1 (AA) |
| Error | #B50909 | ■ | 6.2:1 (AA) |
| Background | #F0F0F0 | ■ | — |
| Body Text | #1B1B1B | ■ | 15.8:1 (AAA) |
Palette 2: Calm Teal (Healthcare & Wellness)
Teal and aqua feel clean, calm, and clinical — perfect for healthcare. This palette is warmer than pure blue and works well for patient-facing portals and wellness platforms.
| Role | Hex | Color | Contrast on White |
|---|---|---|---|
| Primary | #0A7C84 | ■ | 6.3:1 (AA) |
| Secondary | #3D6D97 | ■ | 5.0:1 (AA) |
| Success | #0E7C4F | ■ | 5.8:1 (AA) |
| Warning | #8A6700 | ■ | 5.1:1 (AA) |
| Error | #A8262C | ■ | 5.9:1 (AA) |
| Info | #205493 | ■ | 7.2:1 (AAA) |
| Background | #F5FAFA | ■ | — |
Palette 3: Warm & Inclusive (Public Services)
For sites serving diverse populations including many older adults. Warmer tones reduce eye strain and feel more welcoming than cool blues. Inspired by inclusive design best practices.
| Role | Hex | Color | Contrast on #FFFAF0 |
|---|---|---|---|
| Primary | #7C2D12 | ■ | 8.1:1 (AAA) |
| Secondary | #4A5568 | ■ | 6.9:1 (AA+) |
| Success | #22543D | ■ | 7.5:1 (AAA) |
| Warning | #7B341E | ■ | 6.8:1 (AA) |
| Error | #742A2A | ■ | 6.5:1 (AA) |
| Background | #FFFAF0 | ■ | — |
| Body Text | #1A1A1A | ■ | 17.3:1 (AAA) |
Palette 4: High-Contrast Monochrome (Max Accessibility)
For maximum accessibility and minimal distraction. Almost monochromatic with carefully chosen accent colors. Best for long-form content and forms.
| Role | Hex | Contrast on White |
|---|---|---|
| Primary Text | #111827 | 17.1:1 (AAA) |
| Secondary Text | #374151 | 10.3:1 (AAA) |
| Muted Text | #4B5563 | 7.3:1 (AAA) |
| Border | #D1D5DB | — |
| Link / Primary | #1D4ED8 | 8.6:1 (AAA) |
| Success | #166534 | 7.0:1 (AAA) |
| Error | #991B1B | 7.8:1 (AAA) |
Colorblind-Safe Data Colors
Charts and data visualizations are especially tricky for healthcare and government. Avoid the standard red/green/blue/yellow rainbow palette — it's a disaster for colorblind users.
Use a colorblind-safe sequential or categorical palette instead:
| Palette Type | Example Colors | Colorblind Safe? | ||
|---|---|---|---|---|
| Viridis (sequential) | #440154 | →#35B779 | →#FDE725 | Yes (all types) |
| Cividis (sequential) | #00204C | →#E4B853 | →#FEC65B | Yes |
| Okabe-Ito (categorical) | 8 distinct colors | Yes (research-backed) | ||
| Tableau Colorblind 10 | 10 distinct colors | Yes |
The Okabe-Ito palette is especially recommended — it was developed specifically for maximum distinguishability for people with all types of color vision deficiency.
Implementation Best Practices
Use design tokens, not hardcoded colors
Define your palette as semantic tokens — --color-primary, --color-error, --color-text-body — not just --blue-600. This makes it much easier to maintain dark mode, high-contrast mode, and theme updates.
Provide a high-contrast mode toggle
WCAG allows you to offer a high-contrast mode as an alternative, as long as it's easy to find and use. Many government sites include this as a standard feature.
Test with real users
Automated tools catch about 30% of accessibility issues. For the other 70%, you need real users — especially older adults and people with visual impairments. Include them in your testing process.
Audit regularly
Accessibility isn't a one-time check. New features, new components, and new content can all introduce new issues. Schedule quarterly audits and run automated checks in CI.
Start Testing Your Palette
Want to verify your healthcare or government color palette meets accessibility standards? Use our Color Contrast Checker to test any color pair against WCAG 2.2 AA and AAA standards. It also includes colorblind simulation and suggests adjustments if your colors fail.