Color

Grid

ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK

DepthSOUNDER

8.4m

▲ +0.3 m / 10 min

True windMAST

14G22kn

TWD 214°

SOGGPS

0.4kn

COG 087°

Color anatomy

There are three groups of color, each with its own job.

Neutrals

Surfaces, hairlines and text. Switch themes to see the same roles in each palette.

Accent

Instruments

The OpenBridge instruments draw a value at one of two priorities. A regular value is neutral grey. An enhanced value, the one that matters now, is the accent: in Day and Bright it is the accent's darker step, because an instrument writes values in it and the accent reads under 4.5:1 as text on a light dial. Selection and focus in the instruments' controls are the accent, as in every other control. Night's accent is amber and red marks only the alarm, so Night draws both instrument priorities in amber: an enhanced value is a brighter amber than a regular one, at least 1.3 times its luminance, so the two priorities differ in brightness and not in hue. Focus rings and the icon of a selected control take the same brighter amber. Every color a Night instrument draws its values, marks and controls in is amber or grey, which keeps the crew's dark adaptation; the one exception is the starboard green of the rate of turn and the thrust arrows, the sidelight convention they are read by. Night's tank media are amber and grey too: a medium whose ISO 14726 color is green, cyan or blue takes a shade of its own, and the tank's label names it. The one blue on an instrument is the water under the keel on the depth instrument, outside Night.

Severity and integrity

These come from OpenBridge's alert roles, and they mean the same thing on every surface.

Roles in every theme

Using color

Editorial and diagram color

Operational alert roles retain their meaning when a report includes an alert example. Ordinary report categories, series and process stages use the categorical data palette with written labels. A blue technical-report panel describes a subject; it does not establish a publication state or data quality.

The analytical charts take their own series palette, --data-categorical-analytical-01 to -09, from charts.css.

Mermaid uses the --bk-diagram-* roles for canvas, neutral nodes, grouped systems, services and connections. A dataflow connection also needs a name or pattern so it remains understandable in Night and in print. Local PresentationScope themes resolve these roles independently. Explicit colors in authored Mermaid source can override the shared theme, and need their own review.

Evaluate the actual pair of foreground and background, including transparent tints and nested panels. Palette membership alone does not make a fill suitable for small text. See Design tokens for the diagram matrix and the distinction between appearance and evidence.

Contrast

Text and values must reach at least 4.5:1 against the surface they sit on, in every theme. The matrix above computes each ratio from the token values, so a change that breaks contrast shows up here. Night is the one exception: its dim and faint text is held at 3.9:1 on black to keep the crew's dark adaptation, and it carries labels, never values.

Color as text

The OpenBridge alert colors are fills: in Day and Bright the warning and caution colors, and in Dusk and Day the alarm, fall under 4.5:1 as text. A word or a number in an alert's color takes its text step instead, and so does text in the red, amber, orange or yellow of a status. Shapes, borders, fills and icons keep the colors themselves. Each step reads at 4.5:1 on every surface in every theme, which the kit's contrast test holds.

Related

• Themes — the four palettes these tokens take their values from.
• Tokens — the names, the values and how they are read.
• Alarms and severity — the reserved colors, and what each one means.
• Accessibility — the contrast floor every text role is held to.