Accessibility
Contrast, scalable type, and balancing accessibility with visual design.
Accessibility
Accessibility is the practice of building interfaces that everyone can perceive, operate, and understand — regardless of vision, motor, or cognitive ability, input device, or environment. We treat it as a baseline rather than a feature for a subset of users, because designing with accessibility in mind produces a product that is clearer for everyone. The high-contrast color, legible type, and predictable focus states that a screen-reader or keyboard user relies on are the same qualities that help an operator reading a dashboard on a glare-washed phone outside a substation, or anyone scanning quickly at the end of a long shift. Accessible design is simply better design, and the entire user base benefits from it.
Color & contrast
Every semantic color pair is tuned against the WCAG 2.1 contrast guidelines. The goal is AA at a minimum (4.5:1 for body text, 3:1 for large text and UI boundaries) and AAA wherever the palette allows (7:1). In practice the surfaces you read most clear AAA comfortably — body, card, and popover text land near 19:1 in light mode and 18:1 in dark, while secondary, accent, and muted helper text stay at or above AA in both themes. For contrast-sensitive cases such as text links or labels on tinted fills, dedicated *-emphasis token variants (for example primary-emphasis) push separation further. Light and dark are held to the same bar.
Body / background
≈19:1 · AAA
Muted surface
helper text ≥4.5:1 · AA
Primary
≈5.5:1 · AA
Success
≈4.7:1 · AA
Warning
≈7.7:1 · AAA
Info
≈4.6:1 · AA
Balancing visual design & accessibility
Accessibility and visual polish are treated as one problem, not competing ones. Rather than flattening the palette to force contrast, the system keeps the Edgecom blue and its semantic hues and pairs each with a foreground chosen to clear the threshold. Tuned *-emphasis and *-subtle variants give designers room to hit contrast targets — a darker text tone here, a lighter tint there — without abandoning the brand. The result is an interface that still looks like Edgecom and reads cleanly for everyone.
Scalable, legible type
The type scale is defined in relative units. Every size — from captions to display headings — is expressed in remand inherits from the browser’s root font size; nothing in the scale is pinned to a fixed pixel value. When a reader raises their default font size or zooms the page, the whole interface scales with them instead of clipping or overflowing. Sizes are paired with comfortable line heights, and a single sans-serif family (Inter) is used throughout for consistent, legible rendering across platforms. See Typography for the full scale.