---
title: Colour
description: The colour roles every theme fills, how they're solved in OKLCH, and the contrast targets they meet.
---

Every theme fills the same roles. Components only ever read roles, so they never branch on a theme.

| Group | Roles |
| --- | --- |
| Surfaces | `surface-lower`, `surface-low`, `surface-default`, `surface-raised`, `surface-overlay` |
| Borders | `border-quiet`, `border-normal`, `border-loud`, `border-accent` |
| Text | `text-strong`, `text-primary`, `text-secondary`, `text-disabled`, `link` |
| Neutral fills | `fill-neutral-resting`, `-hovered`, `-pressed`, `-selected`, `-disabled` |
| Primary fills | `fill-primary-resting`, `-hovered`, `-pressed`, `on-primary` |
| Accent | `accent`, `fill-accent-resting`, `-hovered`, `-pressed`, `fill-accent-quiet`, `on-accent`, `focus` |
| Status | `info`, `success`, `important`, `warning`, `danger`, each with `fill-*-quiet` and `border-*` |

Each is a CSS variable named `--gw-color-<role>`.

## Solved, not hand-set

A core theme has two inputs: a dark background and an accent. Everything else is solved in OKLCH, with derived colours mixed in OKLab:

- Surfaces keep the background's hue and chroma, stepping lightness. Light mode carries the same tint at lower chroma.
- Text is solved along the surface hue until it reaches its contrast target.
- The accent keeps its hue and chroma and moves in lightness until it reaches 5:1.
- Status colours start from GitHub's Markdown alert colours and are solved the same way.

## Contrast targets

All measured on the raised surface, the lowest-contrast surface text sits on:

| Role | Target |
| --- | --- |
| Strong text | 11:1 |
| Body text | 9:1 |
| Muted text | 4.6:1 |
| Accent | 5:1 |
| Status colours | 4.8:1 |
| Text on the accent fill | 4.5:1 |

`mise run check` fails when a core theme misses one. The [contrast report](/themes/contrast) lists every ratio.

## Status colours

GitHub's Markdown alert set, so each has its own colour, mapped onto the feedback roles and onto ANSI colours in terminals:

| Alert | Role | ANSI |
| --- | --- | --- |
| Note | `info` | Blue |
| Tip | `success` | Green |
| Important | `important` | Magenta |
| Warning | `warning` | Yellow |
| Caution | `danger` | Red |

<ThemePreview theme="base" compact={false} />