/* ============================================================ Accessibility colour themes - THE ONE FILE YOU EDIT PER SITE Five themes, one active at a time (radio semantics, enforced by a11y.js, not by this CSS). HOW THIS WORKS Each block is a full override of the palette's custom properties - deliberately NOT a filter() on html/body. A root filter would: (a) leave any untouched, since top-layer content sits outside the root element's subtree; (b) turn html/body into a containing block for the toolbar's own position:fixed trigger and panel, displacing them; (c) double-transform any backdrop-filter already present. Overriding the custom properties instead reaches everything that already reads them, with none of that. TOKENS ON THIS SITE (from styles.css, which mirrors the design system's tokens/colors.css): --surface-page page background --color-cream-deep image wells, hatched empty states --surface-card raised surface --text-primary primary text --text-secondary secondary text --accent-primary brand accent (+ -hover / -active) --text-on-accent text sitting on a filled accent --border-default section rules --border-on-white inner rules --surface-page-blur sticky header fill (page bg at 92%) --scrim-strong lightbox backdrop --on-scrim text on the lightbox backdrop --on-scrim-soft secondary text on the backdrop --on-scrim-border hairline on the backdrop ============================================================ */ /* Default (no theme class): tell the toolbar what the normal page background is, so the address bar is retinted correctly on reset. */ :root { --a11y-theme-color: #F3F1EC; } /* --- High contrast ------------------------------------------------ Near-maximum contrast, for low vision generally. */ :root.a11y-contrast { color-scheme: dark; --a11y-theme-color: #000; --surface-page: #000; --color-cream-deep: #000; --surface-card: #000; --text-primary: #FFF; --text-secondary: #EDEDED; --accent-primary: #FFD400; --accent-primary-hover: #FFD400; --accent-primary-active: #E6BF00; --accent-text: #FFD400; --accent-text-hover: #FFE866; --text-on-accent: #000; --border-default: #FFF; --border-on-white: #8C8C8C; --surface-page-blur: #000; --scrim-strong: #000; --on-scrim: #FFF; --on-scrim-soft: #EDEDED; --on-scrim-border: #FFF; } /* A translucent, blurred sticky header reads as a grey smear at this contrast level rather than a clean panel - flatten it to a solid fill. */ :root.a11y-contrast .site-header { background: var(--surface-page); backdrop-filter: none; -webkit-backdrop-filter: none; } /* The cover title sits on a black-to-transparent scrim over a photo. At this contrast level, give it a solid bar instead. */ :root.a11y-contrast .cover-label { background: #000; } /* --- Invert ------------------------------------------------------- A dark theme built from the brand palette, NOT a CSS invert() filter, which would also invert every photograph on the page. */ :root.a11y-invert { color-scheme: dark; --a11y-theme-color: #1B1B1B; --surface-page: #1B1B1B; --color-cream-deep: #141414; --surface-card: #0F0F0F; --text-primary: #EFEBE1; --text-secondary: #C2BBAC; --accent-primary: #D98F6B; --accent-primary-hover: #E9A883; --accent-primary-active: #C97B55; --accent-text: #D98F6B; --accent-text-hover: #E9A883; --text-on-accent: #1B1B1B; --border-default: #5A554B; --border-on-white: #3D3931; --surface-page-blur: rgba(27, 27, 27, 0.92); --scrim-strong: rgba(10, 10, 10, 0.97); --on-scrim: #EFEBE1; --on-scrim-soft: rgba(239, 235, 225, 0.75); --on-scrim-border: rgba(239, 235, 225, 0.4); } /* --- Black on yellow ---------------------------------------------- High glare tolerance, a common low-vision preference. */ :root.a11y-yellow { --a11y-theme-color: #FFE800; --surface-page: #FFE800; --color-cream-deep: #FFE800; --surface-card: #FFF480; --text-primary: #000; --text-secondary: #1A1A1A; --accent-primary: #000; --accent-primary-hover: #333; --accent-primary-active: #000; --accent-text: #000; --accent-text-hover: #333; --text-on-accent: #FFE800; --border-default: #000; --border-on-white: #4D4D4D; --surface-page-blur: #FFE800; --scrim-strong: #000; --on-scrim: #FFE800; --on-scrim-soft: #FFE800; --on-scrim-border: #FFE800; } :root.a11y-yellow .cover-label { background: #000; } /* --- Monochrome --------------------------------------------------- The palette goes grey, and so - narrowly - does the media: img/video/iframe only, never html/body, for the top-layer and containing-block reasons documented at the top of this file. */ :root.a11y-mono { --a11y-theme-color: #EDEDED; --surface-page: #EDEDED; --color-cream-deep: #E0E0E0; --surface-card: #FFF; --text-primary: #1A1A1A; --text-secondary: #4D4D4D; --accent-primary: #595959; --accent-primary-hover: #333; --accent-primary-active: #262626; --accent-text: #595959; --accent-text-hover: #262626; --text-on-accent: #FFF; --border-default: #999; --border-on-white: #CCC; --surface-page-blur: rgba(237, 237, 237, 0.92); --scrim-strong: rgba(26, 26, 26, 0.97); --on-scrim: #F2F2F2; --on-scrim-soft: rgba(242, 242, 242, 0.75); --on-scrim-border: rgba(242, 242, 242, 0.4); } :root.a11y-mono img, :root.a11y-mono video, :root.a11y-mono iframe { filter: grayscale(1); } /* --- Sepia -------------------------------------------------------- Warm, reduced-glare tone some low-vision and dyslexic readers prefer over full black-on-white. */ :root.a11y-sepia { --a11y-theme-color: #F4ECD8; --surface-page: #F4ECD8; --color-cream-deep: #EAD9B5; --surface-card: #FBF3E3; --text-primary: #4B3621; --text-secondary: #6F4E2E; --accent-primary: #8B4A24; --accent-primary-hover: #6B4423; --accent-primary-active: #5A381B; --accent-text: #8B4A24; --accent-text-hover: #5A381B; --text-on-accent: #FBF3E3; --border-default: #B08D57; --border-on-white: #D8C39A; --surface-page-blur: rgba(244, 236, 216, 0.92); --scrim-strong: rgba(59, 42, 25, 0.97); --on-scrim: #FBF3E3; --on-scrim-soft: rgba(251, 243, 227, 0.78); --on-scrim-border: rgba(251, 243, 227, 0.45); } :root.a11y-sepia img, :root.a11y-sepia video, :root.a11y-sepia iframe { filter: sepia(.55); }