Field
Contrast gate enforcedP1 direction (G11). Built to be read on site: near-black ink, strong lines, larger type and controls, a saturated cobalt brand. Atkinson Hyperlegible Next and Mono.
All 23 gated contrast pairs pass WCAG AA.
Colour roles
Apps write these roles, never a palette class (D11, D12).
Text
Primary text.
Secondary text.
Muted text and captions.
Faint text and placeholders. G17: darkened to pass 4.5:1, so it can carry text.
Surfaces
Page background.
Card and panel surface.
The viewer's dark canvas.
Lines and focus
Dividers and card outlines. Decorative: no contrast minimum.
Subtle dividers and quiet fills.
A control's edge: input, select and checkbox borders. 3:1 on panel (WCAG 1.4.11).
Focus ring.
Brand
Brand fill: the primary button, the selected segment.
Brand fill, hover and pressed.
Text and icons on a brand fill.
Links and the active nav item.
Active nav, selected row and info tints.
Edge of an accent tint.
Logo
The logo's folder and wordmark (G7).
Hi-vis amber: the tab, saturated.
The green bar, saturated (green 500).
Status
Accepted, done.
Changes requested, rejected, overdue.
Waiting on someone: not submitted, due soon.
In review and re-review.
"N new".
Internal notes.
Contrast (G17)
WCAG 2.x ratio. 4.5 for text, 3 for large text and non-text UI. Advisory pairs are reported and never fail a build.
| Sample | Pair | Ratio | Min | Result | Use |
|---|---|---|---|---|---|
| Aa Sample | color.ink on color.panel | 19.18 | 4.5 | Pass | Body text on a panel |
| Aa Sample | color.ink on color.canvas | 16.95 | 4.5 | Pass | Body text on the page |
| Aa Sample | color.ink-2 on color.panel | 13.82 | 4.5 | Pass | Secondary text |
| Aa Sample | color.mute on color.panel | 10.40 | 4.5 | Pass | Muted text and captions on a panel |
| Aa Sample | color.mute on color.canvas | 9.19 | 4.5 | Pass | Muted text on the page |
| Aa Sample | color.faint on color.canvas | 6.51 | 4.5 | Pass | Faint text on the page |
| Aa Sample | color.faint on color.panel | 7.36 | 4.5 | Pass | Faint text. G17: either disabled / decorative only, or dark enough to pass |
| Aa Sample | color.brand on color.panel | 7.02 | 4.5 | Pass | Brand-coloured text |
| Aa Sample | color.accent on color.panel | 7.02 | 4.5 | Pass | Links and the active nav item |
| Aa Sample | color.brand-fg on color.brand | 7.02 | 4.5 | Pass | Primary button label |
| Aa Sample | color.brand-fg on color.brand-2 | 9.24 | 4.5 | Pass | Primary button label, hover and pressed |
| Aa Sample | color.accent on color.accent-bg | 6.50 | 4.5 | Pass | Active nav item, info tag |
| Aa Sample | color.ink on color.accent-bg | 17.75 | 4.5 | Pass | Text on a selected row |
| Aa Sample | color.ok on color.ok-bg | 8.74 | 4.5 | Pass | Status word on its tint: ok |
| Aa Sample | color.bad on color.bad-bg | 8.61 | 4.5 | Pass | Status word on its tint: bad |
| Aa Sample | color.warn on color.warn-bg | 8.72 | 4.5 | Pass | Status word on its tint: warn |
| Aa Sample | color.re on color.re-bg | 6.48 | 4.5 | Pass | Status word on its tint: re-review |
| Aa Sample | color.new on color.new-bg | 6.47 | 4.5 | Pass | "N new" on its tint |
| Aa Sample | color.int on color.int-bg | 10.46 | 4.5 | Pass | Internal-note text on its tint |
| Aa Sample | color.int-ink on color.int-bg | 12.79 | 4.5 | Pass | Internal-note body text on its tint |
| Aa Sample | color.ring on color.panel | 5.00 | 3 | Pass | Focus ring (non-text) |
| Aa Sample | color.ring on color.canvas | 4.42 | 3 | Pass | Focus ring on the page (non-text) |
| Aa Sample | color.line-strong on color.panel | 5.21 | 3 | Pass | A control's edge: input, select and checkbox borders (non-text). line itself is decorative. |
| Aa Sample | color.ok-line on color.ok-bg | 3.46 | 3 | Pass | Status tag border. Advisory: decorative while the word names the tag |
| Aa Sample | color.bad-line on color.bad-bg | 3.41 | 3 | Pass | Status tag border. Advisory |
| Aa Sample | color.warn-line on color.warn-bg | 3.46 | 3 | Pass | Status tag border. Advisory |
| Aa Sample | color.re-line on color.re-bg | 3.47 | 3 | Pass | Status tag border. Advisory |
| Aa Sample | color.logo on color.panel | 5.00 | 3 | Pass | Logo mark. Advisory: logotypes are exempt (WCAG 1.4.3) |
Type
Banksia Rise OC · Condition 14(b) · 2,418 items
Atkinson Hyperlegible Next (G19 candidate). Drawn by the Braille Institute for low vision: serifed I, tailed l, slashed 0; holds up outdoors at Field's larger sizes.
Banksia Rise OC · Condition 14(b) · 2,418 items
Atkinson Hyperlegible Mono: the face's own mono.
Shape
44px: the touch target (V5 L8). G10 grows interactive hit areas to it under pointer: coarse.
Height of a sm control (G10).
Height of a md control: the default.
Height of a lg control.
Minimum height of a list or table row.
Page side padding at desktop width.