Is this palette enough for a health site to be accessible?

No palette is enough on its own. Colour contrast is one part of WCAG alongside keyboard access, labels, error handling and readable content. This palette makes the colour part measurable and safe, and you still need to audit the finished pages. It is not legal or compliance advice.

Why AAA for body text when AA is the usual target?

Reading health information is high stakes and often done by older readers or in poor conditions. AAA costs little in a mostly neutral text colour, so the palette takes the margin there and stays at AA for coloured elements, where AAA would force very dark colours.

Can I use the warning colour for allergy alerts?

Yes, as text on the page or surface colour or as a filled badge with its paired label colour, since both pairs are verified. Add an icon and wording so the alert never depends on colour alone, as WCAG 1.4.1 requires.

How do I check a custom tint I add on top of this palette?

Paste the two hex values into the contrast checker. If the pair fails, the Fix button moves lightness only, keeping the hue, until it passes.

OKLCH Studio · Accessible palettes · Industries

Accessible color palette for healthcare (WCAG 2.2 verified)

Updated 2026-10-19

Healthcare interfaces are read by people who are unwell, anxious, tired or old, and who are often in a hurry. A patient may be checking an appointment time on a phone in a bright waiting room, or an older relative may be reading a dosage instruction on a tablet with the brightness turned down. Colour that is merely acceptable in a design review can fail in those conditions.

That is why this palette sets body text at WCAG AAA (7:1) instead of the AA minimum of 4.5:1, and keeps every interactive colour at AA or better. Contrast sensitivity tends to fall with age, so the extra margin is cheap protection for the readers who need it most. WCAG 2.2 AA is the level most commonly referenced by procurement rules and audits, and AAA body text sits comfortably above it.

The risks specific to health products are medication names, doses, lab values and appointment times. These are short strings where one misread character matters, so they deserve the strongest text colour you have, and never a muted grey. Status colours matter too: an out-of-range result must not rely on red alone.

How to build a palette like this by hand is explained in the accessible colour palette guide; this page is the finished, verified result.

The palette: light and dark

Hex values are the sRGB result after gamut mapping. The oklch() values are those of the final hex, so converting either gives the same colour.

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Light theme

Background
#F2F8F9
oklch(0.975 0.007 208.8)
Sample text
Surface
#FAFFFF
oklch(0.996 0.005 197.1)
Sample text
Text
#171C1C
oklch(0.221 0.007 196.6)
Sample text
Muted text
#4F5556
oklch(0.444 0.008 208.8)
Sample text
Primary
#00737E
oklch(0.507 0.087 206.4)
Sample text
Primary foreground
#FAFCFC
oklch(0.990 0.002 197.1)
Sample text
Accent
#A04F27
oklch(0.521 0.120 44.9)
Sample text
Border
#888F90
oklch(0.645 0.008 207.1)
Sample text
Focus ring
#00646F
oklch(0.460 0.079 207.9)
Sample text
Success
#008158
oklch(0.5333 0.1163 162.37)
Sample text
Success fill
#008457
oklch(0.5415 0.1211 160.71)
Sample text
Success fill label
#FAFCFC
oklch(0.990 0.002 197.1)
Sample text
Warning
#A16300
oklch(0.555 0.122 67.9)
Sample text
Warning fill
#FFBA44
oklch(0.8335 0.1508 76.88)
Sample text
Warning fill label
#0E1010
oklch(0.171 0.003 196.9)
Sample text
Error
#A21A1B
oklch(0.4603 0.1706 26.95)
Sample text
Error fill
#C8322E
oklch(0.551 0.187 27.1)
Sample text
Error fill label
#FAFCFC
oklch(0.990 0.002 197.1)
Sample text
Info
#2274AF
oklch(0.540 0.120 245.0)
Sample text
Info fill
#1377B9
oklch(0.5501 0.1324 245.13)
Sample text
Info fill label
#FAFCFC
oklch(0.990 0.002 197.1)
Sample text

Appointment confirmed

Secondary text sits on the surface colour.

Link in primary · Accent text

Primary buttonSuccessWarningErrorInfo

Dark theme

Background
#131717
oklch(0.200 0.006 196.7)
Sample text
Surface
#1D2122
oklch(0.244 0.006 214.4)
Sample text
Text
#E9F0F1
oklch(0.950 0.008 207.1)
Sample text
Muted text
#B7BFC0
oklch(0.799 0.009 205.9)
Sample text
Primary
#65D0DC
oklch(0.799 0.100 205.2)
Sample text
Primary foreground
#0C0E0E
oklch(0.161 0.003 196.8)
Sample text
Accent
#FFAB82
oklch(0.814 0.113 46.7)
Sample text
Border
#656D6D
oklch(0.528 0.010 196.9)
Sample text
Focus ring
#65D0DC
oklch(0.799 0.100 205.2)
Sample text
Success
#6CE5B5
oklch(0.839 0.130 164.9)
Sample text
Success fill
#3BCD9A
oklch(0.759 0.143 165.0)
Sample text
Success fill label
#0E1010
oklch(0.171 0.003 196.9)
Sample text
Warning
#FFBC56
oklch(0.839 0.140 75.1)
Sample text
Warning fill
#E9A11D
oklch(0.7605 0.1539 75.30)
Sample text
Warning fill label
#0E1010
oklch(0.171 0.003 196.9)
Sample text
Error
#F66D62
oklch(0.700 0.171 27.0)
Sample text
Error fill
#FF7A6D
oklch(0.732 0.165 27.5)
Sample text
Error fill label
#0E1010
oklch(0.171 0.003 196.9)
Sample text
Info
#71BFFF
oklch(0.780 0.120 245.0)
Sample text
Info fill
#61B9FF
oklch(0.760 0.132 244.8)
Sample text
Info fill label
#0E1010
oklch(0.171 0.003 196.9)
Sample text

Contrast table: every verified pair

Pass or fail uses the raw WCAG 2.x ratio; the ratio shown is floored to two decimals so a near miss is never rounded up. APCA Lc is signed: positive is dark on light, negative is light on dark. Each row opens the pair in the checker.

Light theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#171c1c on #f2f8f9	16.05:1	AAA 7:1	Pass / Pass	Pass / Pass	+99.2	Lc 75: body text	Open in checker
Text on surface#171c1c on #faffff	17.06:1	AAA 7:1	Pass / Pass	Pass / Pass	+103.5	Lc 75: body text	Open in checker
Muted text on background#4f5556 on #f2f8f9	7.07:1	AAA 7:1	Pass / Pass	Pass / Pass	+81.5	Lc 75: body text	Open in checker
Muted text on surface#4f5556 on #faffff	7.52:1	AAA 7:1	Pass / Pass	Pass / Pass	+85.8	Lc 75: body text	Open in checker
Primary as link text on background#00737e on #f2f8f9	5.21:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.5	Lc 60: larger content text	Open in checker
Primary as link text on surface#00737e on #faffff	5.54:1	AA 4.5:1	Pass / Fail	Pass / Pass	+76.8	Lc 75: body text	Open in checker
Button label on primary#fafcfc on #00737e	5.43:1	AA 4.5:1	Pass / Fail	Pass / Pass	−80.4	Lc 75: body text	Open in checker
Accent text on background#a04f27 on #f2f8f9	5.37:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.5	Lc 60: larger content text	Open in checker
Accent text on surface#a04f27 on #faffff	5.71:1	AA 4.5:1	Pass / Fail	Pass / Pass	+77.7	Lc 75: body text	Open in checker
Border on background#888f90 on #f2f8f9	3.06:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+55.4	Lc 45: headlines and large text	Open in checker
Border on surface#888f90 on #faffff	3.26:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	+59.7	Lc 45: headlines and large text	Open in checker
Focus ring on background#00646f on #f2f8f9	6.41:1	3:1 (WCAG 1.4.11)	Pass / Fail	Pass / Pass	+78.4	Lc 75: body text	Open in checker
Focus ring on surface#00646f on #faffff	6.81:1	3:1 (WCAG 1.4.11)	Pass / Fail	Pass / Pass	+82.6	Lc 75: body text	Open in checker
Success text on background#008158 on #f2f8f9	4.57:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.5	Lc 60: larger content text	Open in checker
Success text on surface#008158 on #faffff	4.86:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Success badge label on fill#fafcfc on #008457	4.59:1	AA 4.5:1	Pass / Fail	Pass / Pass	−75.4	Lc 75: body text	Open in checker
Warning text on background#a16300 on #f2f8f9	4.55:1	AA 4.5:1	Pass / Fail	Pass / Pass	+68.6	Lc 60: larger content text	Open in checker
Warning text on surface#a16300 on #faffff	4.83:1	AA 4.5:1	Pass / Fail	Pass / Pass	+72.8	Lc 60: larger content text	Open in checker
Warning badge label on fill#0e1010 on #ffba44	11.23:1	AA 4.5:1	Pass / Pass	Pass / Pass	+73.1	Lc 60: larger content text	Open in checker
Error text on background#a21a1b on #f2f8f9	7.24:1	AA 4.5:1	Pass / Pass	Pass / Pass	+80.4	Lc 75: body text	Open in checker
Error text on surface#a21a1b on #faffff	7.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	+84.6	Lc 75: body text	Open in checker
Error badge label on fill#fafcfc on #c8322e	5.16:1	AA 4.5:1	Pass / Fail	Pass / Pass	−78.1	Lc 75: body text	Open in checker
Info text on background#2274af on #f2f8f9	4.67:1	AA 4.5:1	Pass / Fail	Pass / Pass	+69.4	Lc 60: larger content text	Open in checker
Info text on surface#2274af on #faffff	4.97:1	AA 4.5:1	Pass / Fail	Pass / Pass	+73.7	Lc 60: larger content text	Open in checker
Info badge label on fill#fafcfc on #1377b9	4.67:1	AA 4.5:1	Pass / Fail	Pass / Pass	−76.0	Lc 75: body text	Open in checker

Dark theme: 25 pairs
Pair	WCAG ratio	Target	Normal AA / AAA	Large AA / AAA	APCA Lc	APCA tier	Check
Text on background#e9f0f1 on #131717	15.65:1	AAA 7:1	Pass / Pass	Pass / Pass	−96.2	Lc 75: body text	Open in checker
Text on surface#e9f0f1 on #1d2122	14.07:1	AAA 7:1	Pass / Pass	Pass / Pass	−95.0	Lc 75: body text	Open in checker
Muted text on background#b7bfc0 on #131717	9.65:1	AAA 7:1	Pass / Pass	Pass / Pass	−66.2	Lc 60: larger content text	Open in checker
Muted text on surface#b7bfc0 on #1d2122	8.68:1	AAA 7:1	Pass / Pass	Pass / Pass	−65.0	Lc 60: larger content text	Open in checker
Primary as link text on background#65d0dc on #131717	9.98:1	AA 4.5:1	Pass / Pass	Pass / Pass	−68.2	Lc 60: larger content text	Open in checker
Primary as link text on surface#65d0dc on #1d2122	8.97:1	AA 4.5:1	Pass / Pass	Pass / Pass	−67.0	Lc 60: larger content text	Open in checker
Button label on primary#0c0e0e on #65d0dc	10.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	+70.0	Lc 60: larger content text	Open in checker
Accent text on background#ffab82 on #131717	9.80:1	AA 4.5:1	Pass / Pass	Pass / Pass	−67.2	Lc 60: larger content text	Open in checker
Accent text on surface#ffab82 on #1d2122	8.81:1	AA 4.5:1	Pass / Pass	Pass / Pass	−66.0	Lc 60: larger content text	Open in checker
Border on background#656d6d on #131717	3.40:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−24.4	Below Lc 30	Open in checker
Border on surface#656d6d on #1d2122	3.06:1	3:1 (WCAG 1.4.11)	Fail / Fail	Pass / Fail	−23.2	Below Lc 30	Open in checker
Focus ring on background#65d0dc on #131717	9.98:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−68.2	Lc 60: larger content text	Open in checker
Focus ring on surface#65d0dc on #1d2122	8.97:1	3:1 (WCAG 1.4.11)	Pass / Pass	Pass / Pass	−67.0	Lc 60: larger content text	Open in checker
Success text on background#6ce5b5 on #131717	11.62:1	AA 4.5:1	Pass / Pass	Pass / Pass	−77.0	Lc 75: body text	Open in checker
Success text on surface#6ce5b5 on #1d2122	10.45:1	AA 4.5:1	Pass / Pass	Pass / Pass	−75.7	Lc 75: body text	Open in checker
Success badge label on fill#0e1010 on #3bcd9a	9.43:1	AA 4.5:1	Pass / Pass	Pass / Pass	+64.5	Lc 60: larger content text	Open in checker
Warning text on background#ffbc56 on #131717	10.82:1	AA 4.5:1	Pass / Pass	Pass / Pass	−72.7	Lc 60: larger content text	Open in checker
Warning text on surface#ffbc56 on #1d2122	9.73:1	AA 4.5:1	Pass / Pass	Pass / Pass	−71.5	Lc 60: larger content text	Open in checker
Warning badge label on fill#0e1010 on #e9a11d	8.70:1	AA 4.5:1	Pass / Pass	Pass / Pass	+60.6	Lc 60: larger content text	Open in checker
Error text on background#f66d62 on #131717	6.26:1	AA 4.5:1	Pass / Fail	Pass / Pass	−46.5	Lc 45: headlines and large text	Open in checker
Error text on surface#f66d62 on #1d2122	5.63:1	AA 4.5:1	Pass / Fail	Pass / Pass	−45.2	Lc 45: headlines and large text	Open in checker
Error badge label on fill#0e1010 on #ff7a6d	7.50:1	AA 4.5:1	Pass / Pass	Pass / Pass	+54.2	Lc 45: headlines and large text	Open in checker
Info text on background#71bfff on #131717	9.11:1	AA 4.5:1	Pass / Pass	Pass / Pass	−63.4	Lc 60: larger content text	Open in checker
Info text on surface#71bfff on #1d2122	8.19:1	AA 4.5:1	Pass / Pass	Pass / Pass	−62.1	Lc 60: larger content text	Open in checker
Info badge label on fill#0e1010 on #61b9ff	8.99:1	AA 4.5:1	Pass / Pass	Pass / Pass	+62.0	Lc 60: larger content text	Open in checker

Status colours and colour blindness

The four status fills were simulated for protanopia, deuteranopia and tritanopia (Machado et al., 2009). Success against error, the pair most often confused, must stay at least 6 ΔE-OK ×100 apart under every simulation. The other pairs are shown for information, so keep an icon and a word on every status.

Light theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	34.5	26.3	39.2	31.9	Shown only
success / error	28.5	16.2	6.4	33.0	Yes
success / info	17.1	16.2	15.3	3.2	Shown only
warning / error	31.8	42.0	37.4	22.6	Shown only
warning / info	40.0	34.2	44.5	31.2	Shown only
error / info	30.3	24.1	21.6	33.0	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Dark theme, status fills
Pair	Normal vision	Protanopia	Deuteranopia	Tritanopia	Held to 6
success / warning	20.9	11.8	15.5	27.5	Shown only
success / error	28.8	15.3	6.4	31.3	Yes
success / info	17.7	15.2	14.3	3.8	Shown only
warning / error	13.3	13.2	10.5	5.5	Shown only
warning / info	28.5	26.0	28.7	26.2	Shown only
error / info	28.3	21.8	20.8	29.7	Shown only

Fills as simulated:Normal visionProtanopiaDeuteranopiaTritanopia

Why these colours

The primary hue is a teal-blue around OKLCH hue 205 with modest chroma. Blue-green is widely read as clean and clinical without the coldness of a pure blue, and low chroma keeps large areas of the page from glowing, which tires the eye on long forms. The neutrals carry a faint tint of the same hue so surfaces feel related to the brand instead of sterile grey.

The accent is a warm coral-orange. It is used sparingly for the one thing that needs attention on a screen, such as a next-step button or an unread message. Warm against cool also survives the common forms of colour-vision deficiency, because the pair differs in lightness as well as hue. Lightness was solved for each role against both the page background and the card surface, holding hue and chroma, so nothing was nudged by eye.

The generator solved 50 pairs (25 light, 25 dark), and all of them meet their target on the raw WCAG ratio. The tightest is muted text on background in the light theme at 7.07:1 against a target of 7:1. After gamut mapping to sRGB the light primary keeps 87% of the requested chroma; hue was held throughout.

How to use it

Use the text colour, not the muted colour, for doses, units, allergies, times and anything a person might act on.
Show out-of-range or urgent values with an icon and a word such as High, as well as the error colour, so the signal survives grayscale, glare and colour-vision differences.
Keep body copy at 16 px or larger and line length moderate; contrast helps, but it cannot rescue tiny type on a dim screen.
Do not place the accent colour as small text on tinted cards without checking the pair in the table; the accent is verified on the page and surface colours only.
Test printed and screenshot versions of appointment slips and instructions, because patients often photograph or print them.

Export

Generated from the verified values above, never typed by hand. Light and dark are both included.

CSS custom properties (hex, then oklch())

/* sRGB hex first: every browser. */
:root {
  --color-background: #f2f8f9;
  --color-surface: #faffff;
  --color-text: #171c1c;
  --color-text-muted: #4f5556;
  --color-primary: #00737e;
  --color-primary-foreground: #fafcfc;
  --color-accent: #a04f27;
  --color-border: #888f90;
  --color-focus-ring: #00646f;
  --color-success: #008158;
  --color-success-solid: #008457;
  --color-success-solid-foreground: #fafcfc;
  --color-warning: #a16300;
  --color-warning-solid: #ffba44;
  --color-warning-solid-foreground: #0e1010;
  --color-error: #a21a1b;
  --color-error-solid: #c8322e;
  --color-error-solid-foreground: #fafcfc;
  --color-info: #2274af;
  --color-info-solid: #1377b9;
  --color-info-solid-foreground: #fafcfc;
}
.dark {
  --color-background: #131717;
  --color-surface: #1d2122;
  --color-text: #e9f0f1;
  --color-text-muted: #b7bfc0;
  --color-primary: #65d0dc;
  --color-primary-foreground: #0c0e0e;
  --color-accent: #ffab82;
  --color-border: #656d6d;
  --color-focus-ring: #65d0dc;
  --color-success: #6ce5b5;
  --color-success-solid: #3bcd9a;
  --color-success-solid-foreground: #0e1010;
  --color-warning: #ffbc56;
  --color-warning-solid: #e9a11d;
  --color-warning-solid-foreground: #0e1010;
  --color-error: #f66d62;
  --color-error-solid: #ff7a6d;
  --color-error-solid-foreground: #0e1010;
  --color-info: #71bfff;
  --color-info-solid: #61b9ff;
  --color-info-solid-foreground: #0e1010;
}

/* oklch() where supported: the same colours, unclipped values of the hex above. */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-background: oklch(0.975 0.007 208.8);
    --color-surface: oklch(0.996 0.005 197.1);
    --color-text: oklch(0.221 0.007 196.6);
    --color-text-muted: oklch(0.444 0.008 208.8);
    --color-primary: oklch(0.507 0.087 206.4);
    --color-primary-foreground: oklch(0.990 0.002 197.1);
    --color-accent: oklch(0.521 0.120 44.9);
    --color-border: oklch(0.645 0.008 207.1);
    --color-focus-ring: oklch(0.460 0.079 207.9);
    --color-success: oklch(0.5333 0.1163 162.37);
    --color-success-solid: oklch(0.5415 0.1211 160.71);
    --color-success-solid-foreground: oklch(0.990 0.002 197.1);
    --color-warning: oklch(0.555 0.122 67.9);
    --color-warning-solid: oklch(0.8335 0.1508 76.88);
    --color-warning-solid-foreground: oklch(0.171 0.003 196.9);
    --color-error: oklch(0.4603 0.1706 26.95);
    --color-error-solid: oklch(0.551 0.187 27.1);
    --color-error-solid-foreground: oklch(0.990 0.002 197.1);
    --color-info: oklch(0.540 0.120 245.0);
    --color-info-solid: oklch(0.5501 0.1324 245.13);
    --color-info-solid-foreground: oklch(0.990 0.002 197.1);
  }
  .dark {
    --color-background: oklch(0.200 0.006 196.7);
    --color-surface: oklch(0.244 0.006 214.4);
    --color-text: oklch(0.950 0.008 207.1);
    --color-text-muted: oklch(0.799 0.009 205.9);
    --color-primary: oklch(0.799 0.100 205.2);
    --color-primary-foreground: oklch(0.161 0.003 196.8);
    --color-accent: oklch(0.814 0.113 46.7);
    --color-border: oklch(0.528 0.010 196.9);
    --color-focus-ring: oklch(0.799 0.100 205.2);
    --color-success: oklch(0.839 0.130 164.9);
    --color-success-solid: oklch(0.759 0.143 165.0);
    --color-success-solid-foreground: oklch(0.171 0.003 196.9);
    --color-warning: oklch(0.839 0.140 75.1);
    --color-warning-solid: oklch(0.7605 0.1539 75.30);
    --color-warning-solid-foreground: oklch(0.171 0.003 196.9);
    --color-error: oklch(0.700 0.171 27.0);
    --color-error-solid: oklch(0.732 0.165 27.5);
    --color-error-solid-foreground: oklch(0.171 0.003 196.9);
    --color-info: oklch(0.780 0.120 245.0);
    --color-info-solid: oklch(0.760 0.132 244.8);
    --color-info-solid-foreground: oklch(0.171 0.003 196.9);
  }
}

Tailwind CSS v4 @theme

@theme {
  /* light */
  --color-background: oklch(0.975 0.007 208.8); /* #f2f8f9 */
  --color-surface: oklch(0.996 0.005 197.1); /* #faffff */
  --color-text: oklch(0.221 0.007 196.6); /* #171c1c */
  --color-text-muted: oklch(0.444 0.008 208.8); /* #4f5556 */
  --color-primary: oklch(0.507 0.087 206.4); /* #00737e */
  --color-primary-foreground: oklch(0.990 0.002 197.1); /* #fafcfc */
  --color-accent: oklch(0.521 0.120 44.9); /* #a04f27 */
  --color-border: oklch(0.645 0.008 207.1); /* #888f90 */
  --color-focus-ring: oklch(0.460 0.079 207.9); /* #00646f */
  --color-success: oklch(0.5333 0.1163 162.37); /* #008158 */
  --color-success-solid: oklch(0.5415 0.1211 160.71); /* #008457 */
  --color-success-solid-foreground: oklch(0.990 0.002 197.1); /* #fafcfc */
  --color-warning: oklch(0.555 0.122 67.9); /* #a16300 */
  --color-warning-solid: oklch(0.8335 0.1508 76.88); /* #ffba44 */
  --color-warning-solid-foreground: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-error: oklch(0.4603 0.1706 26.95); /* #a21a1b */
  --color-error-solid: oklch(0.551 0.187 27.1); /* #c8322e */
  --color-error-solid-foreground: oklch(0.990 0.002 197.1); /* #fafcfc */
  --color-info: oklch(0.540 0.120 245.0); /* #2274af */
  --color-info-solid: oklch(0.5501 0.1324 245.13); /* #1377b9 */
  --color-info-solid-foreground: oklch(0.990 0.002 197.1); /* #fafcfc */
  /* dark: use as dark:bg-background-dark, or remap under a .dark selector */
  --color-background-dark: oklch(0.200 0.006 196.7); /* #131717 */
  --color-surface-dark: oklch(0.244 0.006 214.4); /* #1d2122 */
  --color-text-dark: oklch(0.950 0.008 207.1); /* #e9f0f1 */
  --color-text-muted-dark: oklch(0.799 0.009 205.9); /* #b7bfc0 */
  --color-primary-dark: oklch(0.799 0.100 205.2); /* #65d0dc */
  --color-primary-foreground-dark: oklch(0.161 0.003 196.8); /* #0c0e0e */
  --color-accent-dark: oklch(0.814 0.113 46.7); /* #ffab82 */
  --color-border-dark: oklch(0.528 0.010 196.9); /* #656d6d */
  --color-focus-ring-dark: oklch(0.799 0.100 205.2); /* #65d0dc */
  --color-success-dark: oklch(0.839 0.130 164.9); /* #6ce5b5 */
  --color-success-solid-dark: oklch(0.759 0.143 165.0); /* #3bcd9a */
  --color-success-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-warning-dark: oklch(0.839 0.140 75.1); /* #ffbc56 */
  --color-warning-solid-dark: oklch(0.7605 0.1539 75.30); /* #e9a11d */
  --color-warning-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-error-dark: oklch(0.700 0.171 27.0); /* #f66d62 */
  --color-error-solid-dark: oklch(0.732 0.165 27.5); /* #ff7a6d */
  --color-error-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
  --color-info-dark: oklch(0.780 0.120 245.0); /* #71bfff */
  --color-info-solid-dark: oklch(0.760 0.132 244.8); /* #61b9ff */
  --color-info-solid-foreground-dark: oklch(0.171 0.003 196.9); /* #0e1010 */
}

shadcn/ui variables (:root and .dark)

:root {
  --background: oklch(0.975 0.007 208.8);
  --foreground: oklch(0.221 0.007 196.6);
  --card: oklch(0.996 0.005 197.1);
  --card-foreground: oklch(0.221 0.007 196.6);
  --popover: oklch(0.996 0.005 197.1);
  --popover-foreground: oklch(0.221 0.007 196.6);
  --primary: oklch(0.507 0.087 206.4);
  --primary-foreground: oklch(0.990 0.002 197.1);
  --secondary: oklch(0.996 0.005 197.1);
  --secondary-foreground: oklch(0.221 0.007 196.6);
  --muted: oklch(0.996 0.005 197.1);
  --muted-foreground: oklch(0.444 0.008 208.8);
  --accent: oklch(0.996 0.005 197.1);
  --accent-foreground: oklch(0.221 0.007 196.6);
  --destructive: oklch(0.551 0.187 27.1);
  --destructive-foreground: oklch(0.990 0.002 197.1);
  --border: oklch(0.645 0.008 207.1);
  --input: oklch(0.645 0.008 207.1);
  --ring: oklch(0.460 0.079 207.9);
  --success: oklch(0.5415 0.1211 160.71);
  --success-foreground: oklch(0.990 0.002 197.1);
  --warning: oklch(0.8335 0.1508 76.88);
  --warning-foreground: oklch(0.171 0.003 196.9);
  --info: oklch(0.5501 0.1324 245.13);
  --info-foreground: oklch(0.990 0.002 197.1);
  --brand-accent: oklch(0.521 0.120 44.9);
}

.dark {
  --background: oklch(0.200 0.006 196.7);
  --foreground: oklch(0.950 0.008 207.1);
  --card: oklch(0.244 0.006 214.4);
  --card-foreground: oklch(0.950 0.008 207.1);
  --popover: oklch(0.244 0.006 214.4);
  --popover-foreground: oklch(0.950 0.008 207.1);
  --primary: oklch(0.799 0.100 205.2);
  --primary-foreground: oklch(0.161 0.003 196.8);
  --secondary: oklch(0.244 0.006 214.4);
  --secondary-foreground: oklch(0.950 0.008 207.1);
  --muted: oklch(0.244 0.006 214.4);
  --muted-foreground: oklch(0.799 0.009 205.9);
  --accent: oklch(0.244 0.006 214.4);
  --accent-foreground: oklch(0.950 0.008 207.1);
  --destructive: oklch(0.732 0.165 27.5);
  --destructive-foreground: oklch(0.171 0.003 196.9);
  --border: oklch(0.528 0.010 196.9);
  --input: oklch(0.528 0.010 196.9);
  --ring: oklch(0.799 0.100 205.2);
  --success: oklch(0.759 0.143 165.0);
  --success-foreground: oklch(0.171 0.003 196.9);
  --warning: oklch(0.7605 0.1539 75.30);
  --warning-foreground: oklch(0.171 0.003 196.9);
  --info: oklch(0.760 0.132 244.8);
  --info-foreground: oklch(0.171 0.003 196.9);
  --brand-accent: oklch(0.814 0.113 46.7);
}

Design tokens (DTCG-style JSON)

{
  "color": {
    "light": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.975 0.007 208.8)",
        "$description": "sRGB #f2f8f9"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.996 0.005 197.1)",
        "$description": "sRGB #faffff"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.221 0.007 196.6)",
        "$description": "sRGB #171c1c"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.444 0.008 208.8)",
        "$description": "sRGB #4f5556"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.507 0.087 206.4)",
        "$description": "sRGB #00737e"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 197.1)",
        "$description": "sRGB #fafcfc"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.521 0.120 44.9)",
        "$description": "sRGB #a04f27"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.645 0.008 207.1)",
        "$description": "sRGB #888f90"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.460 0.079 207.9)",
        "$description": "sRGB #00646f"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.5333 0.1163 162.37)",
        "$description": "sRGB #008158"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.5415 0.1211 160.71)",
        "$description": "sRGB #008457"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 197.1)",
        "$description": "sRGB #fafcfc"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.555 0.122 67.9)",
        "$description": "sRGB #a16300"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.8335 0.1508 76.88)",
        "$description": "sRGB #ffba44"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.4603 0.1706 26.95)",
        "$description": "sRGB #a21a1b"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.551 0.187 27.1)",
        "$description": "sRGB #c8322e"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 197.1)",
        "$description": "sRGB #fafcfc"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.540 0.120 245.0)",
        "$description": "sRGB #2274af"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.5501 0.1324 245.13)",
        "$description": "sRGB #1377b9"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.990 0.002 197.1)",
        "$description": "sRGB #fafcfc"
      }
    },
    "dark": {
      "background": {
        "$type": "color",
        "$value": "oklch(0.200 0.006 196.7)",
        "$description": "sRGB #131717"
      },
      "surface": {
        "$type": "color",
        "$value": "oklch(0.244 0.006 214.4)",
        "$description": "sRGB #1d2122"
      },
      "text": {
        "$type": "color",
        "$value": "oklch(0.950 0.008 207.1)",
        "$description": "sRGB #e9f0f1"
      },
      "text-muted": {
        "$type": "color",
        "$value": "oklch(0.799 0.009 205.9)",
        "$description": "sRGB #b7bfc0"
      },
      "primary": {
        "$type": "color",
        "$value": "oklch(0.799 0.100 205.2)",
        "$description": "sRGB #65d0dc"
      },
      "primary-foreground": {
        "$type": "color",
        "$value": "oklch(0.161 0.003 196.8)",
        "$description": "sRGB #0c0e0e"
      },
      "accent": {
        "$type": "color",
        "$value": "oklch(0.814 0.113 46.7)",
        "$description": "sRGB #ffab82"
      },
      "border": {
        "$type": "color",
        "$value": "oklch(0.528 0.010 196.9)",
        "$description": "sRGB #656d6d"
      },
      "focus-ring": {
        "$type": "color",
        "$value": "oklch(0.799 0.100 205.2)",
        "$description": "sRGB #65d0dc"
      },
      "success": {
        "$type": "color",
        "$value": "oklch(0.839 0.130 164.9)",
        "$description": "sRGB #6ce5b5"
      },
      "success-solid": {
        "$type": "color",
        "$value": "oklch(0.759 0.143 165.0)",
        "$description": "sRGB #3bcd9a"
      },
      "success-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "warning": {
        "$type": "color",
        "$value": "oklch(0.839 0.140 75.1)",
        "$description": "sRGB #ffbc56"
      },
      "warning-solid": {
        "$type": "color",
        "$value": "oklch(0.7605 0.1539 75.30)",
        "$description": "sRGB #e9a11d"
      },
      "warning-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "error": {
        "$type": "color",
        "$value": "oklch(0.700 0.171 27.0)",
        "$description": "sRGB #f66d62"
      },
      "error-solid": {
        "$type": "color",
        "$value": "oklch(0.732 0.165 27.5)",
        "$description": "sRGB #ff7a6d"
      },
      "error-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      },
      "info": {
        "$type": "color",
        "$value": "oklch(0.780 0.120 245.0)",
        "$description": "sRGB #71bfff"
      },
      "info-solid": {
        "$type": "color",
        "$value": "oklch(0.760 0.132 244.8)",
        "$description": "sRGB #61b9ff"
      },
      "info-solid-foreground": {
        "$type": "color",
        "$value": "oklch(0.171 0.003 196.9)",
        "$description": "sRGB #0e1010"
      }
    }
  }
}

Open in the studio

Take the primary colour into the picker, build a tonal scale from it, or check any pair of your own.

Open #00737E in the OKLCH picker →Build a tonal scale →Check a pair

FAQ

Is this palette enough for a health site to be accessible?: No palette is enough on its own. Colour contrast is one part of WCAG alongside keyboard access, labels, error handling and readable content. This palette makes the colour part measurable and safe, and you still need to audit the finished pages. It is not legal or compliance advice.
Why AAA for body text when AA is the usual target?: Reading health information is high stakes and often done by older readers or in poor conditions. AAA costs little in a mostly neutral text colour, so the palette takes the margin there and stays at AA for coloured elements, where AAA would force very dark colours.
Can I use the warning colour for allergy alerts?: Yes, as text on the page or surface colour or as a filled badge with its paired label colour, since both pairs are verified. Add an icon and wording so the alert never depends on colour alone, as WCAG 1.4.1 requires.
How do I check a custom tint I add on top of this palette?: Paste the two hex values into the contrast checker. If the pair fails, the Fix button moves lightness only, keeping the hue, until it passes.

← All accessible palettes