[{"data":1,"prerenderedAt":242},["ShallowReactive",2],{"doc-page:adr\u002F0005-three-theme-palette":3},{"data":4,"body":7,"toc":236},{"title":5,"description":6},"ADR 0005 — Three-theme palette (tti \u002F tti-dark \u002F tti-hc)","",{"type":8,"children":9},"root",[10,18,56,63,69,74,79,103,108,114,136,181,186,192],{"type":11,"tag":12,"props":13,"children":15},"element","h1",{"id":14},"adr-0005-three-theme-palette-tti-tti-dark-tti-hc",[16],{"type":17,"value":5},"text",{"type":11,"tag":19,"props":20,"children":21},"ul",{},[22,34],{"type":11,"tag":23,"props":24,"children":25},"li",{},[26,32],{"type":11,"tag":27,"props":28,"children":29},"strong",{},[30],{"type":17,"value":31},"Date",{"type":17,"value":33},": 2026-04-24",{"type":11,"tag":23,"props":35,"children":36},{},[37,42,44],{"type":11,"tag":27,"props":38,"children":39},{},[40],{"type":17,"value":41},"Status",{"type":17,"value":43},": Accepted (three-theme palette); three-way toggle cycle is\n",{"type":11,"tag":27,"props":45,"children":46},{},[47,49],{"type":17,"value":48},"superseded by ",{"type":11,"tag":50,"props":51,"children":53},"a",{"href":52},"\u002Fdocs\u002Fadr\u002F0006-separate-hc-from-casual-theme-toggle",[54],{"type":17,"value":55},"ADR 0006",{"type":11,"tag":57,"props":58,"children":60},"h2",{"id":59},"context",[61],{"type":17,"value":62},"Context",{"type":11,"tag":64,"props":65,"children":66},"p",{},[67],{"type":17,"value":68},"Texas A&M Transportation Institute is a unit of the Texas A&M University\nSystem and a state agency. State agency web presences must meet Texas\nGovernment Code §2054.459 (state web accessibility standards) and the\nTAMUS Accessibility Policy, both of which reference WCAG 2.1 AA as a floor\nand recommend AAA where feasible.",{"type":11,"tag":64,"props":70,"children":71},{},[72],{"type":17,"value":73},"Separately, developer and designer audiences increasingly expect dark mode\nas table stakes, and dark mode isn't automatically an accessibility\nfeature — it's a user-preference feature.",{"type":11,"tag":64,"props":75,"children":76},{},[77],{"type":17,"value":78},"These are two distinct axes:",{"type":11,"tag":80,"props":81,"children":82},"ol",{},[83,93],{"type":11,"tag":23,"props":84,"children":85},{},[86,91],{"type":11,"tag":27,"props":87,"children":88},{},[89],{"type":17,"value":90},"Light ↔ Dark",{"type":17,"value":92}," — aesthetic preference.",{"type":11,"tag":23,"props":94,"children":95},{},[96,101],{"type":11,"tag":27,"props":97,"children":98},{},[99],{"type":17,"value":100},"Standard ↔ High-contrast",{"type":17,"value":102}," — accessibility compliance ceiling.",{"type":11,"tag":64,"props":104,"children":105},{},[106],{"type":17,"value":107},"A single toggle that conflates them (e.g. dark = high-contrast) is worse\nthan either axis alone: a user wanting AAA in daylight gets forced dark;\na user wanting dark at night gets forced to see black-on-white text.",{"type":11,"tag":57,"props":109,"children":111},{"id":110},"decision",[112],{"type":17,"value":113},"Decision",{"type":11,"tag":64,"props":115,"children":116},{},[117,119,126,128,134],{"type":17,"value":118},"Three named themes, driven by ",{"type":11,"tag":120,"props":121,"children":123},"code",{"className":122},[],[124],{"type":17,"value":125},"[data-theme]",{"type":17,"value":127}," on ",{"type":11,"tag":120,"props":129,"children":131},{"className":130},[],[132],{"type":17,"value":133},"\u003Chtml>",{"type":17,"value":135},":",{"type":11,"tag":19,"props":137,"children":138},{},[139,153,167],{"type":11,"tag":23,"props":140,"children":141},{},[142,151],{"type":11,"tag":27,"props":143,"children":144},{},[145],{"type":11,"tag":120,"props":146,"children":148},{"className":147},[],[149],{"type":17,"value":150},"tti",{"type":17,"value":152}," — the default. Maroon #5C0025 on warm white, WCAG AA+.",{"type":11,"tag":23,"props":154,"children":155},{},[156,165],{"type":11,"tag":27,"props":157,"children":158},{},[159],{"type":11,"tag":120,"props":160,"children":162},{"className":161},[],[163],{"type":17,"value":164},"tti-dark",{"type":17,"value":166}," — warm charcoal surfaces with the maroon lightened to\n~#b14a6c (maroon-400) so it stays visible on dark. Gold accent\nunchanged. Targets WCAG AA.",{"type":11,"tag":23,"props":168,"children":169},{},[170,179],{"type":11,"tag":27,"props":171,"children":172},{},[173],{"type":11,"tag":120,"props":174,"children":176},{"className":175},[],[177],{"type":17,"value":178},"tti-hc",{"type":17,"value":180}," — pulled directly from TTI's 508-accessible PPTX palette.\nPure black text on pure white, darker maroon (#500000), zero\ncolor-mixing. WCAG AAA.",{"type":11,"tag":64,"props":182,"children":183},{},[184],{"type":17,"value":185},"Theme toggle cycles through all three: tti → tti-dark → tti-hc → tti.\nIcon signals the next state (sun = \"click to go back to light,\" moon =\n\"click for dark,\" contrast icon = \"click for high-contrast\").",{"type":11,"tag":57,"props":187,"children":189},{"id":188},"consequences",[190],{"type":17,"value":191},"Consequences",{"type":11,"tag":19,"props":193,"children":194},{},[195,213,226,231],{"type":11,"tag":23,"props":196,"children":197},{},[198,200,206,208,211],{"type":17,"value":199},"Three blocks in ",{"type":11,"tag":120,"props":201,"children":203},{"className":202},[],[204],{"type":17,"value":205},"tokens.css",{"type":17,"value":207},", each a full override of every semantic\ntoken. When we add a new token, we must add it to all three blocks —\nmissing a theme shows as \"falls back to ",{"type":11,"tag":8,"props":209,"children":210},{},[],{"type":17,"value":212}," value,\" which is usually\nwrong.",{"type":11,"tag":23,"props":214,"children":215},{},[216,218,224],{"type":17,"value":217},"Color mixing via ",{"type":11,"tag":120,"props":219,"children":221},{"className":220},[],[222],{"type":17,"value":223},"color-mix(in srgb, ...)",{"type":17,"value":225}," works in tti and tti-dark but\nproduces washed-out results in tti-hc (pure-color palette). The tti-hc\nblock overrides surface tints to solid values to sidestep this.",{"type":11,"tag":23,"props":227,"children":228},{},[229],{"type":17,"value":230},"Future additions (sepia, solarized, anything else) should land as ADR-\nsupersedes-0005 rather than quietly growing the cycle — three is\nalready near the UX ceiling for \"click-to-cycle.\" A fourth theme wants\na dropdown or preference page instead.",{"type":11,"tag":23,"props":232,"children":233},{},[234],{"type":17,"value":235},"Meeting AAA in tti-hc is a compliance claim, not a claim about tti or\ntti-dark. Those are targeted at AA. Audit reports should run against\nall three.",{"title":6,"searchDepth":237,"depth":237,"links":238},2,[239,240,241],{"id":59,"depth":237,"text":62},{"id":110,"depth":237,"text":113},{"id":188,"depth":237,"text":191},1792775664436]