Electric cyan on a near-black canvas can give a developer tool, telemetry view or fintech dashboard a distinct visual direction. That is a design application, not evidence that particular code editors or financial products have adopted this exact color. The useful question is how to carry a luminous cyan identity from dark mode into light mode without losing readable text and essential interface cues.
The five sRGB values here are an original ColorIndicator interface palette, not a conversion of a display gamut or product brand color. For a yellow-green neon alternative, compare Electric Chartreuse in Dark-Mode UI; for a more subdued blue-green system, see Transformative Teal in UI Design.
Why cyan needs different light and dark roles
- Light surfaces: #00E5FF measures just 1.54:1 on white and 1.45:1 on #F5F9FB. Neither pair meets WCAG AA for text of any size, or the 3:1 threshold where a non-text visual cue is required.
- Dark surfaces: #00E5FF on #080C14 reaches 12.72:1, exceeding AAA for normal text. A high ratio for this pair does not validate every status marker, control state or surrounding surface.
- Theme mapping: use #065A60 for light-theme text and action roles: it reaches 7.96:1 on white and 7.51:1 on #F5F9FB. Do not reuse that deeper value as dark-mode text on #080C14, where it drops to 2.46:1.
A five-color cyber cyan palette for UI tokens
Assign each swatch a role before applying it to a component. The brighter accent is not a substitute for readable light-theme text; the pale divider is decorative unless another visual cue identifies an active control.
| Token role | Color | HEX | RGB | HSL | Suggested use |
|---|---|---|---|---|---|
| --color-brand-primary | Deep Oceanic Cyan | #065A60 | 6, 90, 96 | 184°, 88%, 20% | Light-theme headings, links and primary actions |
| --color-accent-highlight | Bioluminescent Cyan | #00E5FF | 0, 229, 255 | 186°, 100%, 50% | Dark-theme interactive text and highlighted data |
| --color-surface-light | Glacial Frost Canvas | #F5F9FB | 245, 249, 251 | 200°, 43%, 97% | Light canvas and card surfaces |
| --color-border-subtle | Polar Mist | #D2E2E8 | 210, 226, 232 | 196°, 32%, 87% | Decorative dividers, not sole essential control boundaries |
| --color-surface-dark | Nocturnal Obsidian | #080C14 | 8, 12, 20 | 220°, 43%, 5% | Dark canvas and light-theme body text |
Working from an existing screenshot? Analyze the image to inspect its actual colors, or browse the Color Palettes Library for other starting points.
WCAG contrast: test the exact pairing
These WCAG 2.1 ratios are computed from the stated sRGB HEX codes. They apply to individual foreground/background pairs, not to an entire application. Normal text needs 4.5:1 for AA or 7:1 for AAA; large text needs 3:1 for AA or 4.5:1 for AAA.
| Foreground / background | Contrast | Normal text | Large text | UI components |
|---|---|---|---|---|
| #080C14 / #FFFFFF | 19.57:1 | AAA | AAA | Exceeds 3:1 where required |
| #080C14 / #F5F9FB | 18.48:1 | AAA | AAA | Exceeds 3:1 where required |
| #00E5FF / #080C14 | 12.72:1 | AAA | AAA | Exceeds 3:1 where required |
| #065A60 / #FFFFFF | 7.96:1 | AAA | AAA | Exceeds 3:1 where required |
| #065A60 / #F5F9FB | 7.51:1 | AAA | AAA | Exceeds 3:1 where required |
| #065A60 / #080C14 | 2.46:1 | Below AA | Below AA | Below 3:1 if essential |
| #00E5FF / #FFFFFF | 1.54:1 | Below AA | Below AA | Below 3:1 if essential |
| #00E5FF / #F5F9FB | 1.45:1 | Below AA | Below AA | Below 3:1 if essential |
For text, WCAG AA requires 4.5:1 at normal size and 3:1 at large size; AAA requires 7:1 and 4.5:1 respectively. Non-text contrast uses 3:1 for visual information needed to identify active controls and states against adjacent colors. A passing button label does not by itself verify the button boundary, focus indicator or entire interface.
#00E5FF should not be text or an essential unbordered icon or focus cue on white or #F5F9FB. On those surfaces, #065A60 is the tested text alternative. In dark mode, #065A60 on #080C14 is also below AA; use #00E5FF or a separately tested light token instead.
#D2E2E8 measures 1.26:1 on #F5F9FB and 1.33:1 on white. It can remain a subtle divider, but if a border is the only cue identifying an active input, choose a value that meets the applicable 3:1 non-text contrast requirement. Disabled controls are exempt; active and focused states still need separate inspection. The darker #044449 hover token reaches 10.89:1 on white and 10.28:1 on #F5F9FB.
Check each component in the Contrast Checker, and inspect channel values in the HEX to RGB Converter. Contrast alone cannot confirm that a state is distinguishable without color.
Light and dark token roles
For a light theme, start with #F5F9FB canvas, white cards, #080C14 body text and #065A60 links or primary actions. On white, the dark text pair reaches 19.57:1 and the action-color pair reaches 7.96:1. In dark mode, use #080C14 canvas, #F5F9FB body text (18.48:1) and #00E5FF as the brighter tested link or data-accent token (12.72:1). Check any accent fill with its actual label and adjacent surface.
CSS custom properties to start from
:root { --color-canvas: #F5F9FB; --color-surface: #FFFFFF; --color-text-main: #080C14; --color-brand-primary: #065A60; }for light surfaces.--color-brand-primary-hover: #044449; --color-accent-highlight: #00E5FF; --color-border-subtle: #D2E2E8;for separate action, accent and decorative roles.[data-theme="dark"] { --color-canvas: #080C14; --color-text-main: #F5F9FB; --color-brand-primary: #00E5FF; }as a dark starting point; test your actual components.
Frequently asked questions
Can #00E5FF be used as body text on a light background?
No. #00E5FF measures 1.54:1 on white and 1.45:1 on #F5F9FB, below WCAG AA for normal and large text. Use #065A60 on those light surfaces instead: the tested pairs measure 7.96:1 and 7.51:1.
Does cyber cyan meet WCAG AAA for text in dark mode?
For the exact tested pair, #00E5FF on #080C14 measures 12.72:1 and exceeds the 7:1 AAA threshold for normal text. Other surfaces, states and control boundaries still need separate checks.
Why use different cyan tokens across light and dark themes?
The bright #00E5FF token has strong contrast on #080C14 but insufficient contrast on white. Mapping the light-theme text and action role to #065A60 keeps the cyan family while meeting the tested text thresholds.
Where can I inspect the values and check contrast?
Use the ColorIndicator HEX to RGB Converter for RGB and HSL values, then test each real foreground/background pair with the Contrast Checker.
Convert a swatch in the HEX to RGB Converter, then measure its final foreground/background pairing in the Contrast Checker.