Standard: WCAG 2.1 Level AA — the legal accessibility baseline.
Required ratios: 4.5:1 for normal text · 3:1 for large text (≥18pt bold or ≥24px regular) · AAA is 7:1 / 4.5:1.
How this works: Every pair below is computed server-side at build time from the actual v2 tokens. The colored swatch is the foreground; the box behind it is the background. If you change a token in global.css, this page recomputes on next build.
light_mode Light mode 18/18 pass
| Pair | Preview | Ratio | Grade |
|---|---|---|---|
| Primary text on canvas #1A1A1A on #FAF0E2 | Aa — sample | 15.44:1 | AAA |
| Primary text on card #1A1A1A on #FFFFFF | Aa — sample | 17.40:1 | AAA |
| Primary text on alt surface #1A1A1A on #F2EDE6 | Aa — sample | 14.94:1 | AAA |
| Secondary text on canvas #666666 on #FAF0E2 | Aa — sample | 5.09:1 | AA |
| Secondary text on card #666666 on #FFFFFF | Aa — sample | 5.74:1 | AA |
| Muted text on canvas #595959 on #FAF0E2 | Aa — sample | 6.21:1 | AA |
| Muted text on card #595959 on #FFFFFF | Aa — sample | 7.00:1 | AAA |
| Terracotta on canvas (large only per v2) #C4622D on #FAF0E2 | Aa — sample | 3.63:1 | AA·LG |
| Terracotta on card (large only per v2) #C4622D on #FFFFFF | Aa — sample | 4.09:1 | AA·LG |
| Terra-dark (body link) on canvas #A34E1A on #FAF0E2 | Aa — sample | 5.09:1 | AA |
| Terra-dark (body link) on card #A34E1A on #FFFFFF | Aa — sample | 5.73:1 | AA |
| Hunter green on canvas #2D5940 on #FAF0E2 | Aa — sample | 7.12:1 | AAA |
| Hunter green on card #2D5940 on #FFFFFF | Aa — sample | 8.03:1 | AAA |
| Forest green on white (icons/tags) #4A7B5A on #FFFFFF | Aa — sample | 4.92:1 | AA |
| Forest green on cream #4A7B5A on #FAF0E2 | Aa — sample | 4.36:1 | ADVISORY Per v2 spec: decorative-only on cream. Never used as text — flagged here for awareness, not active failure. |
| Danger red on card #A33333 on #FFFFFF | Aa — sample | 6.82:1 | AA |
| White on Hunter (primary CTA) #FFFFFF on #2D5940 | Aa — sample | 8.03:1 | AAA |
| White on Terra (large CTAs only) #FFFFFF on #C4622D | Aa — sample | 4.09:1 | AA·LG CC uses Hunter for primary CTAs. Terra reserved for accent borders / large headlines. If you ever build a Terra button, keep text ≥18pt regular OR ≥14pt bold. |
"·LG" denotes pairs that only need to clear the 3:1 large-text threshold (terracotta is large-text-only per v2 rule).
dark_mode Studio Dark mode 18/18 pass
| Pair | Preview | Ratio | Grade |
|---|---|---|---|
| Primary text on canvas #F5F5F2 on #2B2D2B | Aa — sample | 12.71:1 | AAA |
| Primary text on card #F5F5F2 on #1A1A1A | Aa — sample | 15.93:1 | AAA |
| Primary text on alt surface #F5F5F2 on #232422 | Aa — sample | 14.27:1 | AAA |
| Secondary text on canvas #CFCFC8 on #2B2D2B | Aa — sample | 8.86:1 | AAA |
| Secondary text on card #CFCFC8 on #1A1A1A | Aa — sample | 11.12:1 | AAA |
| Muted text on canvas #A5A59E on #2B2D2B | Aa — sample | 5.60:1 | AA |
| Muted text on card #A5A59E on #1A1A1A | Aa — sample | 7.02:1 | AAA |
| Terracotta on canvas #E89460 on #2B2D2B | Aa — sample | 5.84:1 | AA |
| Terracotta on card #E89460 on #1A1A1A | Aa — sample | 7.32:1 | AAA |
| Terra-dark (body link) on canvas #F2A576 on #2B2D2B | Aa — sample | 6.89:1 | AA |
| Terra-dark (body link) on card #F2A576 on #1A1A1A | Aa — sample | 8.64:1 | AAA |
| Hunter green on canvas #76B98D on #2B2D2B | Aa — sample | 6.01:1 | AA |
| Hunter green on card #76B98D on #1A1A1A | Aa — sample | 7.54:1 | AAA |
| Forest green on card #8FBE9E on #1A1A1A | Aa — sample | 8.31:1 | AAA |
| Forest green on canvas #8FBE9E on #2B2D2B | Aa — sample | 6.63:1 | AA |
| Danger red on card #E27676 on #1A1A1A | Aa — sample | 5.87:1 | AA |
| Card-surface dark on Hunter (primary CTA — text flips dark in dark mode) #1A1A1A on #76B98D | Aa — sample | 7.54:1 | AAA |
| Card-surface dark on Terra (large CTAs only) #1A1A1A on #E89460 | Aa — sample | 7.32:1 | AAA·LG |
Dark mode accent colors are lightened from their light-mode siblings — terracotta brightens from #C4622D → #E89460, terra-dark (body links) flips from #A34E1A → #F2A576, hunter from #2D5940 → #5A9B6E, forest from #4A7B5A → #8FBE9E. The terracotta brand identity stays intact while passing AA against the warm-charcoal canvas.
code How dark mode is implemented
Studio Dark is a CSS-variable-based theme toggle. The topbar sun/moon button writes localStorage['aria-cc-theme'] and sets data-theme="dark" on the <html> element. Two complementary mechanisms make the entire site dark:
- Token swaps —
:root[data-theme="dark"]overrides every CSS variable: surfaces flip dark, text flips light, accents lighten. Scoped styles usingvar(--bg),var(--text), etc. flip automatically. - Tailwind utility overrides — pages using Tailwind classes directly (
bg-white,text-stone-900,border-stone-200) get explicit dark-mode overrides inglobal.css. So a card withclass="bg-white"still has white in light mode but flips to#1A1A1Ain dark.
You can preview any page in dark mode by appending ?theme=dark to the URL — e.g. cc.madebyotten.com/dashboard?theme=dark. Useful for sharing dark-mode screenshots without forcing the recipient to toggle.