Theme and accessibility
Dark, light and system themes, the always-dark MDT, and the contrast Statewide holds for text, buttons and form fields.
Choose a theme
Pick Dark, Light or System from Theme in the avatar menu or on your account page. Statewide opens in dark the first time. Signed-out pages have the same choice in the footer. Your choice is remembered in this browser, per site address, not on your account.
The MDT is always dark, so a console left open on a second monitor doesn't flash bright.
Contrast
Statewide holds text to WCAG 2.2 AA, at least 4.5:1, and the edge of every form control to at least 3:1, in the portal's light and dark themes and in the MDT. An automated test measures these pairs, so a colour change that breaks one fails the build.
Form field edges
Inputs, selects and text areas draw their edge in their own colour, separate from the quiet lines on cards and tables, which are decoration only.
| Where | Field edge | Contrast |
|---|---|---|
| Portal, light | #8a8a8a | 3.45:1 on white, 3.31:1 on the off-white page, 3.08:1 on the grey surface |
| Portal, dark | #666666 | 3.45:1 on the page, 3.03:1 on the raised surface |
| MDT | #606979 | 3.49:1 on the background, 3.28:1 on cards, 3.06:1 on muted panels |
Primary buttons
| Where | Fill | Text | Contrast |
|---|---|---|---|
| Portal, light | #171717 | White | Above 4.5:1 |
| Portal, dark | #ededed | #0a0a0a | Above 4.5:1 |
| MDT | #0062d1 | White | 5.73:1 |
Blue text and focus rings in the MDT use the lighter #52a8ff.
Community colours
Colours you choose for your own public site are yours to check. Statewide's checks cover its own screens.