Color
Color gives actions and surfaces a consistent role. The rendered palette uses ochre for primary actions, eucalyptus for secondary emphasis, and neutral surfaces to foreground language.
Color roles and hierarchy
Choose a role before choosing a shade. Primary identifies the most important action or current destination. Secondary supports another action. Background and foreground form the reading surface; card and popover roles describe contained surfaces. Error, warning, success and info describe feedback rather than brand emphasis.
- Pair each surface with its matching foreground. A color that works on the page background may fail on a filled button.
- Use primary sparingly, for actions, focus and current location. A page full of equally prominent actions loses hierarchy.
- Keep text, icon or shape alongside semantic color. Red alone cannot explain why an input failed.
- A source citation, an internal review flag and community approval are distinct evidence states. Never make a green label stand in for missing authority.
Live role pairs
These specimens use the actual CSS roles and change with the page theme. Measured text contrast is reported honestly, including failures; a token name is not an accessibility guarantee.
| Role | Live background / foreground | Text contrast | Specimen |
|---|---|---|---|
| --color-background | Loading… | Not measured | Aa · Example text |
| --color-accent | Loading… | Not measured | Aa · Example text |
| --color-card | Loading… | Not measured | Aa · Example text |
| --color-destructive | Loading… | Not measured | Aa · Example text |
| --color-error | Loading… | Not measured | Aa · Example text |
| --color-info | Loading… | Not measured | Aa · Example text |
| --color-muted | Loading… | Not measured | Aa · Example text |
| --color-popover | Loading… | Not measured | Aa · Example text |
| --color-primary | Loading… | Not measured | Aa · Example text |
| --color-secondary | Loading… | Not measured | Aa · Example text |
| --color-success | Loading… | Not measured | Aa · Example text |
| --color-warning | Loading… | Not measured | Aa · Example text |
Contrast checker
Explore an opaque color pair and its text contrast. Use text labels to read results independently of the preview colors.
Enter opaque sRGB colors in #RRGGBB format. Transparency, images and gradients need a separate rendered-background assessment.
Contrast ratio: 4.52:1
- AA normal text (4.5:1): Pass
- AA large text (3:1): Pass
- AAA normal text (7:1): Fail
Example heading
Example body text: source details and review status remain visible beside a result.
Pass/fail uses the unrounded ratio. This tool checks a color pair; it does not certify a page or a component’s accessibility.
Contrast specifications
| Content | Minimum | How to apply it |
|---|---|---|
| Normal text, WCAG AA | 4.5:1 | Body text, labels, placeholders and ordinary button text. |
| Large text, WCAG AA | 3:1 | At least 24px regular or about 18.67px bold at the browser’s default CSS pixel conversion. |
| Normal text, WCAG AAA | 7:1 | A useful higher target for important reading content. |
| Required non-text visual information | 3:1 | Identify controls and states against adjacent colors; assess the actual boundary or indicator. |
Evaluate the final foreground against its actual adjacent background, including hover and focus. Do not round a result into compliance. Disabled controls have an exception under the text-contrast criterion, but unexplained or unreadable disabled actions still create usability problems.
Applying roles
.source-details {
background: var(--color-card);
color: var(--color-card-foreground);
border: 1px solid var(--color-border);
}
.source-details a { color: var(--color-primary); }
.source-details a:hover { color: var(--color-primary-hover); }
.source-details a:focus-visible {
outline: 3px solid var(--color-ring);
outline-offset: 3px;
}Primitive palette values are for defining roles or intentional illustrations. Product components should consume semantic and component tokens. Keep light and dark roles deliberate; dark mode is not a blanket inversion of every color.
Theme, state and cultural context
Changing a primary role means checking its foreground, hover, active and focus combinations. Theme overrides must reach portals as well as the local container. A translucent overlay needs contrast measured against the composited background, not just its raw RGB value.
Language-specific accents require a documented relationship to the material being presented. Do not use one landscape palette as a claim about every Indigenous language. Photographs and contributed artwork remain attributed content; their colors do not grant permission to use cultural motifs in interface decoration.
Do and avoid
| Do | Avoid |
|---|---|
| Use an explicit error message plus a state treatment. | An error indicated only by a red outline. |
| Measure the actual foreground/surface pair in each theme. | Assuming a semantic token automatically meets contrast. |
| Use consistent role tokens across a component family. | Hardcoded colors that drift from the shared theme. |
| Keep evidence and approval statuses separate. | Coloring a machine suggestion as verified knowledge. |
Verification and related guidance
Inspect both themes, each interactive state, forced colors and color-independent labels. Use the checker for opaque pairs, inspect rendered overlays separately, and test the component with keyboard and screen reader. All raw palette values and theme overrides are searchable in the token explorer.