/* * accessibility.css * Text-size and high-contrast toggle: toolbar styling and the states * applied to by assets/js/accessibility-boot.js and accessibility.js */ .a11y-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4em; padding: 0.4em var(--wp--preset--spacing--stack-md, 24px); background-color: var(--wp--preset--color--surface-container, #efeded); } .a11y-toolbar__label { font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--label-sm, 14px); color: var(--wp--preset--color--on-surface-variant, #44474d); margin-right: 0.2em; } .a11y-btn { font-family: inherit; font-size: var(--wp--preset--font-size--label-sm, 14px); line-height: 1; padding: 0.4em 0.65em; border: 1px solid var(--wp--preset--color--on-surface-variant, #44474d); border-radius: var(--wp--custom--radius--sm, 0.25rem); background-color: var(--wp--preset--color--surface-container-lowest, #ffffff); color: var(--wp--preset--color--on-surface, #1b1c1c); cursor: pointer; } .a11y-btn[aria-pressed="true"] { background-color: var(--wp--preset--color--primary, #031632); border-color: var(--wp--preset--color--primary, #031632); color: var(--wp--preset--color--on-primary, #ffffff); } .a11y-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary, #031632); outline-offset: 2px; } /* ------------------------------------------------------------------ Text size steps. Scaling the root font-size looked correct in theory (rem values would follow it) but this theme's font sizes in theme.json are all fixed px, while spacing/gap/radius across block-styles.css are rem-based. Scaling the root therefore left body text untouched and instead inflated paddings/gaps everywhere. Overriding the font-size preset custom properties directly targets only text. ------------------------------------------------------------------ */ html.a11y-text-large { --wp--preset--font-size--label-sm: 15.75px; /* 14px x 1.125 */ --wp--preset--font-size--body-md: 18px; /* 16px x 1.125 */ --wp--preset--font-size--body-lg: 20.25px; /* 18px x 1.125 */ --wp--preset--font-size--headline-md: 27px; /* 24px x 1.125 */ --wp--preset--font-size--display-lg-mobile: 33.75px; /* 30px x 1.125 */ --wp--preset--font-size--display-lg: 45px; /* 40px x 1.125 */ } html.a11y-text-larger { --wp--preset--font-size--label-sm: 17.5px; /* 14px x 1.25 */ --wp--preset--font-size--body-md: 20px; /* 16px x 1.25 */ --wp--preset--font-size--body-lg: 22.5px; /* 18px x 1.25 */ --wp--preset--font-size--headline-md: 30px; /* 24px x 1.25 */ --wp--preset--font-size--display-lg-mobile: 37.5px; /* 30px x 1.25 */ --wp--preset--font-size--display-lg: 50px; /* 40px x 1.25 */ } /* ------------------------------------------------------------------ High contrast mode — maximises text and control contrast. The warm ivory surfaces go pure white and every text/accent token goes pure black. The CTA orange (on-tertiary-container) is the one token that must not simply become black: it carries meaning as the primary action colour, so it darkens to on-tertiary-fixed-variant, which clears 7:1 against white while staying recognisably orange. ------------------------------------------------------------------ */ html.is-high-contrast { --wp--preset--color--surface: #ffffff; --wp--preset--color--surface-container-lowest: #ffffff; --wp--preset--color--surface-container-low: #ffffff; --wp--preset--color--surface-container: #ffffff; --wp--preset--color--on-surface: #000000; --wp--preset--color--on-surface-variant: #000000; --wp--preset--color--surface-tint: #000000; --wp--preset--color--primary: #000000; --wp--preset--color--on-tertiary-container: #6e3900; --wp--preset--color--tertiary-container: #000000; --wp--preset--color--outline-variant: #000000; --wp--preset--color--surface-variant: #000000; } html.is-high-contrast *:focus-visible { outline: 3px solid #000000; outline-offset: 2px; } html.is-high-contrast .kmr-chip { border-width: 2px; border-color: currentColor; }