Accessibility
The canon color pairs with their contrast measured on every build, focus shown live, and the rules that hold it up.
This page has the contrast table for every color pair in the canon, measured on each build. Use it to check whether a text reads on a background before you publish it. darkGray #afafaf does not work as text on light; black #272727 does. Below that: focus shown live, what is prohibited and the general rules.
Live contrast pairs
Every contrast ratio comes from the WCAG 2.2 relative-luminance formula, applied at build time to the canon hex values.Passes AAA ≥7:1 — normal text at any size.
Passes AA ≥4.5:1 — normal text; AAA only as large text.
See the full table
| Text | Background | Ratio | Verdict | Use |
|---|---|---|---|---|
#272727 | #faf9f7 | 14.20:1 | AAA | Body text |
#272727 | #f5f5f5 | 13.70:1 | AAA | Body text alt |
#f5f5f5 | #272727 | 13.70:1 | AAA | Text on black |
#272727 | #f9be4a | 8.89:1 | AAA | Text on amber |
#272727 | #8acdee | 8.57:1 | AAA | Text on light blue |
#f5f5f5 | #114f82 | 7.82:1 | AAA | Text on deep blue |
#f5f5f5 | #794224 | 7.36:1 | AAA | Light text on deep orange |
#272727 | #7fbf80 | 6.88:1 | AA | Text on green |
#f5f5f5 | #674a98 | 6.40:1 | AA | Text on lila |
#272727 | #e887a7 | 6.01:1 | AA | Text on pink |
WCAG 2.2 levels
The two ceilings of the system
Two uses in the canon do not reach AAA and are not dressed up: they are declared with the measurement this build produces, and their use is bounded.amber as body text
The darkest step of the warm scale stays at AA on light: reaching AAA would mean darkening it until it stopped being the brand color. It works for display emphasis, marker, rule and figure — never for a paragraph.
#8d5d27 · #ffffff orange field with ink on top
The cover field with its text in ink passes AA, and AAA only at display size. Its place is the cover surface, not a page with paragraphs.
#272727 · #da7835 Focus, live
Press Tab to walk the specimens: the ring adapts to the surface. Clicking them does nothing — they exist to show focus.Prohibited
- Amber as a text color on light backgrounds. To write on light there is its text-safe tone; raw amber stays for fills.
- White text on amber, at any weight and at any size: on top of amber the one that reads is black.
- DarkGray as informative text on light — there it is decoration. If the figure matters it goes in black, and darkGray is left for writing on dark backgrounds.
- Color as the only carrier of meaning in states, errors and notices: each one also carries its icon and its text.
- Text below 8 pt, the canon's legibility floor. If it does not fit, cut the words — never the size.
- A light fill with paragraphs on top. If a block has to carry running text, it sits on paper or it sits on dark; on a light fill the only one that reads is black.
General rules
- Minimum contrast 4.5:1 for normal text (WCAG 2.2 AA).
- Minimum contrast 3:1 for large text (24px, or 18.66px bold).
- Minimum contrast 3:1 for UI elements (borders, icons).
- Visible focus on every interactive: a 2 pt blue ring; on amber, a double black ring with a light halo.
prefers-reduced-motion: durations to 0.01ms and delays to 0 — nothing stays hidden waiting to animate.- Touch target of at least 24 × 24 px on controls, and 44 px on CTAs.