Brand Standard

Accessibility.

Every Men's Wellness Centers product meets WCAG 2.2 Level AA contrast standards. Every color combination on the brand is audited at 4.5:1 for body text, 3:1 for large text and UI elements. Use the semantic tokens below. Do not hardcode hex values. Run the AI prompt at the bottom on any new code before shipping.

Standard

WCAG 2.2 Level AA.

Three thresholds cover every situation. If a pair does not meet its threshold, fix the pair.

4.5:1

Normal text

All body copy, captions, labels, links, error and success messages, placeholders. Anything smaller than 18px regular or 14px bold.

3:1

Large text

18px and larger at any weight, or 14px and larger at bold (700+). Most headlines and primary CTAs qualify.

3:1

UI & icons

Focus rings, perceivable borders, form field outlines, validation icons, status indicators, and any non-text interactive element.

Audit Result

33 of 33 pass.

Every color pair used on the brand site, contrast-checked against its WCAG threshold. Sort and filter below.

Foreground	Background	Use case	Ratio	Level	Result
`orange`	`navy_mid`	Orange accent on navy_mid	5.09:1	Normal text (4.5:1)	PASS
`white`	`orange_btn`	Button label on orange_btn (default state)	5.22:1	Normal text (4.5:1)	PASS
`green_text`	`white`	Success text on white	5.48:1	Normal text (4.5:1)	PASS
`orange`	`navy`	Orange tagline / accent on navy	5.69:1	Normal text (4.5:1)	PASS
`orange_text`	`cream`	Orange link or inline accent on cream (body text)	5.83:1	Normal text (4.5:1)	PASS
`orange_text`	`white`	Orange link or inline accent on white (body text)	6.45:1	Normal text (4.5:1)	PASS
`red_text_lt`	`white`	Error text on white	6.47:1	Normal text (4.5:1)	PASS
`muted_gray`	`navy_mid`	Caption on navy_mid	6.61:1	Normal text (4.5:1)	PASS
`caption_light`	`cream`	Caption / secondary text on cream	6.8:1	Normal text (4.5:1)	PASS
`muted_gray`	`navy`	Caption / form label on navy	7.38:1	Normal text (4.5:1)	PASS
`body_gray`	`navy_mid`	Body gray on navy_mid	7.5:1	Normal text (4.5:1)	PASS
`caption_light`	`white`	Caption / secondary on white	7.54:1	Normal text (4.5:1)	PASS
`caption_light`	`white`	Lead form input placeholder gray on white	7.54:1	Normal text (4.5:1)	PASS
`caption_light`	`white`	Signature HIPAA notice body on white inbox	7.54:1	Normal text (4.5:1)	PASS
`body_gray`	`navy`	Body copy gray on navy	8.38:1	Normal text (4.5:1)	PASS
`red_text`	`navy`	Lead form error text on navy	9.88:1	Normal text (4.5:1)	PASS
`white`	`navy_light`	White on navy_light	14.93:1	Normal text (4.5:1)	PASS
`white`	`navy_mid`	White text on navy_mid	16.77:1	Normal text (4.5:1)	PASS
`ink`	`cream`	Body text on cream	16.92:1	Normal text (4.5:1)	PASS
`ink`	`white`	Body text on white (cards, inputs)	18.74:1	Normal text (4.5:1)	PASS
`white`	`navy`	White headlines on navy	18.74:1	Normal text (4.5:1)	PASS
`ink`	`white`	Lead form input value on white field	18.74:1	Normal text (4.5:1)	PASS
`ink`	`white`	Signature name + contact text on white inbox	18.74:1	Normal text (4.5:1)	PASS
`orange`	`white`	Orange Oswald headline accent on white (LARGE only)	3.29:1	Large text (3:1)	PASS
`white`	`orange`	Button label (white) on orange (BOLD 16px = large)	3.29:1	Large text (3:1)	PASS
`orange`	`white`	Signature tagline on white inbox (LARGE bold)	3.29:1	Large text (3:1)	PASS
`border_dark`	`navy`	Perceivable separator / focus on navy (UI)	3.23:1	UI / icon (3:1)	PASS
`border_strong`	`cream`	Perceivable separator / focus on cream (UI)	3.29:1	UI / icon (3:1)	PASS
`orange`	`white`	Focus ring on white field (UI element)	3.29:1	UI / icon (3:1)	PASS
`red`	`navy`	Validation error icon on navy	4.98:1	UI / icon (3:1)	PASS
`orange`	`navy`	Focus ring on navy surface (UI element)	5.69:1	UI / icon (3:1)	PASS
`muted_gray`	`navy`	Field label muted on navy (UI)	7.38:1	UI / icon (3:1)	PASS
`green`	`navy`	Validation check icon on navy	7.39:1	UI / icon (3:1)	PASS

Semantic Tokens

Use tokens, not hex.

These are the only colors you should reference in code. Every token is contrast-audited for the surfaces it is approved on. Do not hardcode hex values in components.

--cream

#F5F3F0

--cream-deep

#E5E3DF

--border-strong

#8A8678

--navy

#0B1029

--navy-mid

#161B3A

--navy-light

#1E244A

--border-dark

#5A60A0

--orange

#E8670A

--orange-btn

#B84A08

--orange-text

#A04108

--white

#FFFFFF

--ink

#0B1029

--body-gray

#B0ADA8

--muted-gray

#9CA3AF

--caption-light

#4F555C

--green

#10B981

--green-text

#047857

--red

#EF4444

--red-text

#FCA5A5

--red-text-lt

#B91C1C

Hard Rules

Non-negotiable.

No hardcoded hex valuesAlways reference a token. If the right token does not exist, propose one and add it to the system before shipping.

No raw orange #E8670A on cream/white as body textThe brand orange fails 4.5:1 on light. Use --orange-text (#A04108) for body, links, and inline accents. Reserve --orange for CTA fills and Oswald display headlines 24px+.

No --muted-gray on cream or white--muted-gray (#9CA3AF) is for navy surfaces only. On cream/white, use --caption-light (#4F555C).

Focus rings must be 3:1 against the surfaceUse --orange on light surfaces and --orange or --border-dark on navy. Never remove focus indicators.

Disabled states still need contrastDisabled buttons fall back to gray with white text at 4.5:1. Test the disabled state explicitly.

Placeholders need contrast tooForm placeholder text on white fields uses --caption-light. Never the default browser gray.

AI Audit Prompt

Run this on every new build.

Hand this prompt to Claude, ChatGPT, or any AI assistant working on MWC code. It reproduces our audit and forces semantic-token usage.

Audit and fix all color combinations in this app for WCAG AA compliance.

Requirements:
- Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold) and UI/icon elements.
- Check every text-on-background pair: body copy, headings, links, buttons (default/hover/active/disabled), placeholders, badges, toasts, tooltips, form labels, error/success states, nav, sidebar, cards, modals, and overlays.
- No white-on-white, light-gray-on-white, or low-contrast brand-color-on-brand-color combinations.
- Preserve the existing brand palette where possible; if a color fails, adjust lightness/saturation minimally or swap to an accessible token rather than redesigning.
- Define semantic color tokens (text-primary, text-muted, bg-surface, border, primary, primary-foreground, destructive, etc.) in the Tailwind/theme config and apply them consistently. No hardcoded hex values in components.
- Ensure focus rings, disabled states, and placeholder text also meet contrast requirements.
- Keep both light and dark modes compliant.

Deliverable:
1. List each failing pair you found (foreground / background / ratio).
2. Show the corrected token or hex and new ratio.
3. Apply the fixes across the codebase using the updated tokens.

Beyond Color

The rest of the standard.

Color is one slice of WCAG. The full MWC accessibility floor:

Every form input has a real <label> linked with for= and id=. Placeholder-only labels are banned.
Every error message uses role="alert" and is linked via aria-describedby on the field it describes.
Every <img> has an alt attribute. Decorative images use alt="" explicitly.
Tap targets are at least 48x48px on touch. Primary CTAs are 56-60px tall on mobile.
Input font-size is 16px minimum. iOS Safari zooms anything smaller; that is a known mobile failure.
Honor prefers-reduced-motion. Pulsing CTAs, parallax, and hover-lift cards are banned globally.
Honor prefers-contrast: more. Bump field borders to white on dark surfaces when the OS asks.
Submit buttons set aria-busy="true" during async submission; success states use role="status" with aria-live="polite".
Skip-to-content link is required on every multi-section page.
Headings are hierarchical. One <h1> per page, no skipping levels.