Skip to content
design
Foundations

Accessibility

Readable at a glance, at night, in direct sun and under stress, by everyone aboard.

On this page
ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK
WARNINGGusts 22 kn, above the reef point of 20 kn · since 20:47ACK
CAUTIONHouse bank at 38 % · since 20:15
ConningKeyboard focus
Every severity carries a shape and a word, the acknowledge control is a full touch target, and keyboard focus is drawn in the accent.
01Never color aloneSeverity, integrity and state always carry a shape or a word as well as a color. They read the same in Night and to a color-blind eye.
02Readable in any lightThe floor for text and values is 4.5:1 against their surface, in all four themes, from a dark cockpit to direct sun.
03Operable with wet handsTouch targets are 48 px on phones, tablets and touch screens, and every action has a keyboard path at the nav station.

Contrast

Every text role against the page surface, in all four themes. Each ratio is computed from the token values, so a token change that drops below 4.5:1 shows up here at once. Where a cell is under the floor, that role does not carry text in that theme: Dusk's alarm color, Day's accent, alarm, warning and caution, and Bright's accent, warning and caution. Accent-colored text takes --bk-action-text, the theme's readable accent step, and text in an alert's color takes --bk-alert-*-text (color as text), which reads at 4.5:1 everywhere. Night's dim and faint text is the one role held under the floor, at 3.9:1, to keep the crew's dark adaptation: it carries labels, never values.

TokenNightDuskDayBright
--text
Primary text and values
#EAA75E10.2:1
#E7E9EC16.1:1
#17181C16.0:1
#0B0C0F19.6:1
--text-dim
Labels and secondary text
#8F61303.9:1
#8B8F986.0:1
#5B60685.7:1
#4B50588.1:1
--text-faint
Section labels, sources
#8F61303.9:1
#878B945.7:1
#666B754.8:1
#5D626B6.1:1
--accent
Accent text, active icons
#FFC87813.8:1
#14B8A67.9:1
#0D94883.4:1
#0D94883.7:1
--alert-alarm-color
Alarm word and shape
#E90F204.6:1
#E1000E3.9:1
#E300194.4:1
#EB00144.6:1
--alert-warning-color
Warning word and shape
#BA5A004.6:1
#FA7D007.4:1
#FE94132.0:1
#FE94132.2:1
--alert-caution-color
Caution word and shape
#8973004.5:1
#FFCC1612.9:1
#FFDB421.2:1
#FFDB421.4:1

Color never codes alone

Night uses a subdued amber interface palette while instruments and alert roles retain their own treatments. Each alert priority has a color, a shape and a word. The shape and the word remain necessary when colors are hard to distinguish, absent in print or changed by a display setting.

Do
ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK
CAUTIONHouse bank at 38 % · since 20:15
Give every severity its shape and its word. Alarm, warning and caution stay distinct in Night and to a color-blind eye.
Don't
Anchor drag · 38 m outside swing circle
House bank at 38 %
Do not mark priority with a colored dot alone. The mark and words must identify it when color cannot.

Flashing

Only an unacknowledged alarm or emergency flashes; a warning and a caution are steady. The alarm flashes 400 ms on and 400 ms off, under three flashes a second (designed with reference to WCAG 2.2 SC 2.3.1), and keeps flashing under reduced motion: it is the signal that someone has to act, and its word and color say the same without it.

Touch targets

The visible control can be small; the area that responds to a finger cannot. On a screen up to 68.75em wide, or under a coarse pointer at any width, every touch target is at least --target-touch-size. A coarse pointer changes a target's size, never a layout. Every visible control is at least --target-visual-size.

TokenValueremPreview
--target-touch-size48px3rem
--target-visual-size32px2rem
Anchor
- - - 48 px touch area▬ 32 px visible row
A 32px navigation row inside its 48px touch area

Focus

Every interactive control shows keyboard focus through the shared focus roles. The ring remains independent of selection and invalid borders and must not be clipped by its parent. Focus follows reading order through the navigation and content, with a skip link to the main region.

Do

ACK

Draw a visible accent ring on the focused control.
Don't

ACK

Don't remove the focus outline. At the nav station the keyboard user loses track of which alarm ACK acknowledges.

Reading and interaction beyond the pointer

Use document headings in order, descriptive link text and labels that remain visible beside fields. A chart needs a meaningful summary and inspectable source values; a diagram needs its relationships explained in text. A source disclosure is useful evidence, but raw syntax alone is not an adequate explanation for every reader.

Test Tab and Shift+Tab through the complete task, arrow keys inside composite controls, Escape from overlays, and focus return to the trigger. A hover hint must not contain the only copy of an error, unit or instruction. After removing a row, keep focus on a meaningful remaining control. Do not move focus when a reading updates.

Reflow and exported documents

At narrow widths and increased browser zoom, prose, metadata and actions should reflow without hiding content. Allow a wide data table or drawing to scroll inside its own frame, with the title and explanation outside it. Retain headings, captions and essential labels in print. A browser-generated PDF is not automatically a tagged, accessible document; check the actual delivered format and reading order.

Verify names and descriptions with a screen reader, colors against the actual nested surface, and state changes with forced colors and reduced motion. Automated checks identify some failures; they do not verify a complete task, data correctness or bridge-display suitability.

Checks

Run the consumer's available automated checks, then inspect keyboard behavior, announcements, reflow and contrast in the actual task. Record the tested themes and layouts; a foundation matrix or a screenshot alone does not establish that every consuming page is accessible.