Foundations · Color · Legibility
Legibility Testing.
We audited background × text pairings and locked in charcoal text for every Melon and Clay CTA background. The compliant choice clears WCAG AA and reads cleanly across any future surface using Melon or Clay as a fill.
What changed.
The change is simple: keep the Melon, swap white type for charcoal. That single move clears the legibility flag and keeps the CTA inside the brand's neutral palette. The same charcoal pairs with petal and clay, so the rule scales across the family.
What we're testing.
The Coral scale
Three coral tokens currently live in the system, used as the Mom Multi / Women's Daily / Postpartum stage colors and as accent fills. The mid value (Melon) is what most ecomm-surfacing CTAs would land on.
What's at stake
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA (preferred for ecomm CTAs that carry transactional weight) requires 7:1 normal / 4.5:1 large.
The matrix below computes each ratio live so we can see exactly which combinations pass.
Decision.
Locked decision
Charcoal on the coral family.
Charcoal (#2A2820) on every coral tone: petal (#FFCECA), melon (#FF8080), and clay (#EE857D). Charcoal on melon clears WCAG AA for body text (5.97:1) and AAA for large-text CTA scale. Pure black tested cleaner mathematically (8.65:1, AAA at every size) but pulls outside the brand's warm-tone neutral palette. Charcoal is the brand-aligned, compliant answer for every coral CTA across PDPs, the storefront, ads, packaging, and any future surface using a coral tone as a fill.
Every combination.
Each cell shows a live CTA-sized sample, the computed contrast ratio, and the WCAG level it clears for normal text. Hover any swatch to see the underlying values.
In context.
The locked pairing rendered in real PDP and dark-surface contexts, with the original white-on-Melon shown for reference.
Mom Multi
Mom Multi
Mom Multi
Locked in.
Locked · Charcoal on the coral family
Charcoal on petal, charcoal on melon, charcoal on clay is the final type pairing across the coral family. Applies to the Buttons component, all PDP variants (Conception, 2nd Trimester, Mom Multi), the Shop All kit, every CTA surface using a coral tone as a fill, and packaging or editorial layouts that ground type on coral. Reviewed, signed off, and not changing without a fresh accessibility or brand request.