OKLCH Color Specification / Palette Text: WCAG 2.1 AAA / 19 Official Ports

Circadia

OKLCH themes for code, terminals, and documents.

Circadia provides OKLCH color themes for editors, terminals, and documents. Automated checks validate text contrast on three base backgrounds in all four palettes. Rendered application states and color vision accessibility need separate validation.

Explore:
git clone https://github.com/tanmaymanojgandhi/circadia.git šŸ“‹
ā˜€ļø Warm Parchment
11.89:1 body
Warm Parchment • Light

Warm paper canvas (#f7f4ec) with dark text and blue syntax accents.

Click to activate ✓ Active
ā˜• Dark Classic
11.17:1 body
Warm Ember • Dark

Brown-black canvas (#17130f) with brass accents and varied syntax colors.

Click to activate ✓ Active
šŸ‡ Dark Modern
11.52:1 body
Velvet Plum • Modern UI

Deep velvet wine canvas (#140e12) with saturated pastels for modern web and application development.

Click to activate ✓ Active
šŸŒ² Dark Focus
10.94:1 body
Obsidian Pine • Deep Terminal

Green-black canvas (#131714) with sage accents and varied syntax colors.

Click to activate ✓ Active

Tokens & Color Palette

Click any token cell to copy its value.

The 4 Circadian Modes

Engineered in OKLCH to match human melanopic response across ambient light cycles.

ā˜€ļø

Warm Parchment (Light)

Warm Parchment • Light
11.89:1 body

Canvas: #f7f4ec (Warm Cellulose Cast)

Appearance: Warm paper background with dark ink text and neutral headings.

Warm Paper Sapphire Headings High Ambient
ā˜•

Warm Ember & Espresso (Dark Classic)

Warm Ember • Dark
11.17:1 body

Canvas: #17130f (Warm Espresso Charcoal)

Appearance: Brown-black background with brass accents and varied syntax colors.

Amber Accents Dark Background Warm Text
šŸ‡

Plum Noir (Dark Modern)

Plum Noir • Dark
11.52:1 body

Canvas: #140e12 (Velvet Wine Noir)

Appearance: Plum-black background with lavender accents and lavender syntax colors.

Plum Background Velvet Rose Modern Web Dev
šŸŒ²

Obsidian Pine (Dark Focus)

Obsidian Pine • Dark
10.94:1 body

Canvas: #131714 (Green-Black)

Appearance: Green-black background with sage accents and varied syntax colors.

Deep Terminal Forest Sage Data Science

Color vision accessibility

Color and typography provide different cues; CVD validation remains pending.

šŸ“

1. Lightness, chroma, and hue

OKLCH describes lightness, chroma, and hue. Syntax roles use different colors, but those differences need evaluation under CVD simulations.

Minimum lightness separation is not currently enforced.
šŸ”¤

2. Typographic cues

Some editor ports use bold keywords and italic comments to supplement syntax color. Coverage varies between applications.

Support depends on the application, font, and syntax scope.
šŸ›”ļø

3. Diagnostic colors

Diagnostic colors mark errors and conflicts. Color alone should not be the only way to identify these states.

Diagnostic indicators should supplement color with symbols or text.

Contrast validation

Text in all four palettes is checked against three base backgrounds.

Palette text contrast target: Contrast Ratio = (Lā‚ + 0.05) / (Lā‚‚ + 0.05) ≥ 7.00:1 (Strict AAA)
228 Palette foreground/background pairs
7:1 Palette text contrast target
Pending Rendered-state and CVD checks
H1 → H6 Monotonic Heading Hierarchy

Syntax Highlight Preview

Preview the syntax colors across languages.

spec.md
Markdown
Hover a syntax symbol to inspect its token mapping

WCAG 2.1 Accessibility Ratios

Relative luminance verified against canvas background (bg_canvas).

Token Category Sample Hex / OKLCH Contrast Ratio WCAG Invariant

Ports & Ecosystem

18 unified themes for editors, terminals, and tools.

Specification Files

Canonical palette data, normative rules, and token mapping docs.

spec/palette.json Canonical OKLCH and Hex palette definitions
Raw JSON →
spec/rules.md Normative palette and accessibility invariants
Markdown →
spec/token-map.md Semantic mapping guide for port creators
Markdown →