Accessibility
WCAG 2.2 AA everywhere, with 7:1 contrast for primary text and numerals.
Text on every layer
fg.* on the surface ladder, computed at build time. fg.disabled is exempt from 1.4.3; fg.inverse sits on surface.inverse only.
Light theme
| Foreground | surface.canvas | surface.layer-1 | surface.layer-2 | surface.layer-3 | surface.overlay |
|---|---|---|---|---|---|
| fg.primary | 18.84:1 AAA | 19.67:1 AAA | 18.84:1 AAA | 17.77:1 AAA | 19.67:1 AAA |
| fg.secondary | 9.58:1 AAA | 10.00:1 AAA | 9.58:1 AAA | 9.04:1 AAA | 10.00:1 AAA |
| fg.muted | 6.25:1 AA | 6.53:1 AA | 6.25:1 AA | 5.90:1 AA | 6.53:1 AA |
| fg.placeholder | 5.05:1 AA | 5.27:1 AA | 5.05:1 AA | 4.76:1 AA | 5.27:1 AA |
| fg.numeric | 19.59:1 AAA | 20.45:1 AAA | 19.59:1 AAA | 18.48:1 AAA | 20.45:1 AAA |
| fg.link | 7.41:1 AAA | 7.74:1 AAA | 7.41:1 AAA | 6.99:1 AA | 7.74:1 AAA |
| fg.link-hover | 9.89:1 AAA | 10.32:1 AAA | 9.89:1 AAA | 9.33:1 AAA | 10.32:1 AAA |
Dark theme
| Foreground | surface.canvas | surface.layer-1 | surface.layer-2 | surface.layer-3 | surface.overlay |
|---|---|---|---|---|---|
| fg.primary | 19.59:1 AAA | 18.84:1 AAA | 16.96:1 AAA | 15.31:1 AAA | 16.96:1 AAA |
| fg.secondary | 13.81:1 AAA | 13.28:1 AAA | 11.96:1 AAA | 10.79:1 AAA | 11.96:1 AAA |
| fg.muted | 6.58:1 AA | 6.33:1 AA | 5.70:1 AA | 5.14:1 AA | 5.70:1 AA |
| fg.placeholder | 6.58:1 AA | 6.33:1 AA | 5.70:1 AA | 5.14:1 AA | 5.70:1 AA |
| fg.numeric | 20.45:1 AAA | 19.67:1 AAA | 17.71:1 AAA | 15.99:1 AAA | 17.71:1 AAA |
| fg.link | 10.52:1 AAA | 10.11:1 AAA | 9.11:1 AAA | 8.22:1 AAA | 9.11:1 AAA |
| fg.link-hover | 14.23:1 AAA | 13.68:1 AAA | 12.32:1 AAA | 11.12:1 AAA | 12.32:1 AAA |
Non-text contrast
WCAG 1.4.11 asks for 3:1 on the boundaries of controls and on the focus indicator.
| Line | On | Light | Dark |
|---|---|---|---|
| field.line | field.bg | 3.11:1 AA-large | 3.13:1 AA-large |
| line.strong | surface.layer-1 | 5.27:1 AA | 3.73:1 AA-large |
| focus.ring | surface.canvas | 5.74:1 AA | 6.99:1 AA |
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |
| focus.ring | surface.layer-2 | 5.74:1 AA | 6.05:1 AA |
| focus.ring | surface.layer-3 | 5.42:1 AA | 5.46:1 AA |
| focus.ring | surface.overlay | 6.00:1 AA | 6.05:1 AA |
Colour is never the only signal
Status colour reinforces a word: a Badge says "Overdue", the active SideNav item is tinted and carries aria-current, and a selected tab changes its text colour as well as its underline.