Accessibility and content

Guide index · Color · Terminal

One contract, three surfaces

Every surface shares one accessibility contract: WCAG 2.2 AA as a design target, a real accessible name, accurate state, and words that still carry the meaning when color, motion, or a pointer is unavailable.

Desktop and mobile are one graphical system. They share components, contrast, focus, type roles, and wording. They diverge only where the platform forces it: a 40px pointer target versus a 48px touch target, a visible name where hover is unavailable, and reflow on a narrow screen. Mobile type also follows the host text scale. Typography and iconography are where those constraints change the rendering most; the accessible meaning stays the same.

The terminal keeps the same names, states, and sentences. It has no pixel targets, gradients, or vector icons. Brackets, glyphs, and words carry the meaning, including when color is reduced. See terminal design.

Design targets

Normal text needs at least 4.5:1 contrast; large text needs 3:1. Large text is at least 24 CSS px regular or about 18.67 CSS px bold. Essential control and graphical boundaries need 3:1 against adjacent colors.

The quiet frame is intentionally nonessential. If a line is the only cue that a field, control, or pane can be operated, use the essential boundary token. Cyan focus must remain visible against the control and its surroundings, including selected blue faces.

Use at least a 24×24 CSS px target or a qualifying spacing alternative. The sizes below are Oracle’s targets above that floor. Density values live on the layout page.

Desktop

Buttons, icon actions (including search Clear), and menu commands use the active density minimum: 40px standard, 32px dense, or 28px compact. The 28px compact drawer action is an explicit small pointer control. It is not a touch target. Focus cyan stays visible on the selected blue face.

Mobile

Contrast, focus, and wording match desktop. Every interactive control uses the 48px touch target, including search Clear and menu commands, including the drawer action that is 28px on a compact desktop rail.

Terminal

There is no CSS pixel target. Each action occupies at least one full cell, with a focus marker beside it. Contrast uses the ink and ANSI roles from color and terminal design, rechecked when a host remaps 16 colors.

One cell tall · no pixel target
Open collection

Open collection

Contrast and surface checks

Check foregrounds against every gradient stop and the actual surrounding surface. Keep labels opaque. A neon hue, or a different text pair that already passed, does not make the next pair accessible. The color page records the starting contrast envelope, including why blue edges are not used for small blue text.

Error labels, helper text, and placeholders stay readable. Disabled labels stay at full opacity in secondary text, even though inactive controls have exceptions in the contrast success criteria. A disabled appearance keeps its reason readable.

High-contrast and forced-colors modes may flatten gradients and remove decorative accents. Preserve visible focus, essential boundaries, checked and selected state, and semantic labels.

Desktop

The pairs below are the complete label and boundary set: enabled primary, disabled secondary, placeholder, hint, error, quiet frame, essential edge, and cyan focus on a selected blue face.

Mobile

The same pairs, on the same surfaces. Touch size does not change the contrast roles.

Terminal

The same words. Disabled labels stay in secondary text. Errors keep the danger prefix. A warning keeps its words under truecolor, 16-color, and no color.

! Stale  Truecolor · warning foreground
[! Stale]  16-color · yellow
[! Stale]  No color · words only

Keyboard and assistive technology

Use real buttons, links, inputs, headings, lists, and tables, with platform equivalents in native UIs. Icons alone need an accessible name. Associate labels, hints, and errors with controls. Mark decorative graphics as decorative. Expose selected, expanded, checked, disabled, and busy states accurately. State appearance is defined on interaction.

Each region has a descriptive name. Tab strips expose tab and panel relationships and manual activation; dialogs manage and restore focus. No hidden or inactive panel can contain reachable controls. A sticky header is a single live structure, not an accessible duplicate.

Reflow and new observations do not steal focus. Errors may offer a summary linking to affected fields. New important status uses a polite live region; only a newly occurring urgent actionable error merits assertive interruption. Do not announce every diagnostic line or progress tick.

Make focus visible and unobscured by fixed footers, sticky headers, or overlays. Scroll a focused control into the visible body area when necessary without changing its value. Preserve native text selection, copy, zoom, and editing behavior.

Desktop

Icon-only actions carry an accessible name at the 40px target. Checked, expanded, selected, disabled, and busy are exposed as their own states, each with words.

Mobile

The same states and names. An icon action shows its label inside the 48px target. A hover tooltip may add detail; it cannot be the only name.

Terminal

The same states use brackets, check glyphs, a selection marker, and explicit disabled and busy words. See the glyph guide for the character tiers.

Scaling and adaptive use

Support text resizing to 200% and reflow at 320 CSS px available width without loss of content or required actions. Exceptionally wide tables, code, and diagrams can have deliberate labeled scrolling. The whole shell should not overflow horizontally.

Test longer translations, right-to-left content, high-DPI displays, and long unbroken identifiers. Mirror layout and navigation direction when appropriate; keep code, numbers, checks, and brand assets in their original direction. Directional labels and chevrons still describe the actual action.

Honor reduced motion. Status changes stay readable without flashing. A necessary command stays available without hover. Provide touch-sized controls where touch is supported. Motion timing is on the motion page.

Desktop

At 200% text, toolbars wrap and every action remains reachable. Fixed headers and footers must not cover the focused control.

Mobile

The same 200% text requirement, inside a narrow width. At 320 CSS px the actions reflow. Host text scale stacks on the shared type scale from typography.

Terminal

The host owns font size and zoom. Sentences wrap at the column count. A long identifier gets a labeled scrolling region and stays exact.

Content language

Use sentence case and specific verbs: “Open collection,” “Discard and reload,” “Inspect original.” A vague “OK” acknowledges a clear message and does nothing else. Name destructive consequences. Keep transport codes out of the primary explanation; technical identifiers can appear in secondary details.

Explain the current fact, the relevant scope, and the next action. “Revision conflict. Your draft is retained. Discard and reload to edit the observed revision.” “Saved locally,” “Request accepted,” and “Completed” are separate facts.

Use “Unknown” or “Unavailable” for missing evidence. A zero is a measured value, not a stand-in for missing data. “No matching loaded rows” and “No records exist” are different empty states. Display observed time when freshness changes the interpretation. Use color plus words. A percentage names its denominator, and an estimated value says so. User-generated data remains data.

Desktop

The specimen is the full vocabulary: specific verbs, the acknowledgement, the three completion facts, missing evidence, both empty states, a warning whose words carry the meaning, and an estimated count.

Mobile

Identical sentences, status names, and empty states. Narrow width wraps the lines; it does not shorten the words.

Terminal

The same sentences. Status words remain when the chip color is unavailable.

Review checklist

Each item is an interface requirement for shipped surfaces.

• Review all default, hover, pressed, selected, focused, disabled, busy, invalid, and stale combinations.
• Check primary and secondary text, input edges, selected-tab markers, and cyan focus against actual gradient stops.
• Navigate every pane, menu, tab, disclosure, and dialog by keyboard alone; confirm focus restoration.
• At 200% text scale and compact width, reach all actions and read errors without clipped headers.
• Add, remove, and wrap chips and metadata; heading anchors remain fixed.
• Refresh or disconnect while reading retained rows and logs; position and useful data remain stable.
• Verify unknown outcomes and accepted receipts do not display final-success language.
• Exercise reduced motion and forced colors; important information remains visible.
• In terminals, test truecolor, 256 and 16 colors, no color, wide characters, resize, and linear output.
• Confirm copyable identifiers and code exclude decorative text and remain exact.