Build your brand and see it pass
Change a colour, a font or the button style and the preview changes with it. Every contrast check below comes from the same code the kit's build uses, so a brand that passes here passes there.
Free, in your browser. Nothing you choose or upload leaves this page.
Accessibility
Passes WCAG 2.2 AA in light and darkRequired text pairs passing: light 51 of 51, dark 51 of 51.
- Depth button label, 44px tall, light4.92:1Pass
- Depth button label, 48px tall, light4.97:1Pass
- Depth button label, 56px tall, light5.05:1Pass
Live preview
Real components from the kit, styled only by your brand's tokens.
Buttons
How ordering works
Choose by 6pm
Pick loaves and pastries for the next morning.
We bake overnight
Everything is made fresh from 3am.
Collect from 7am
Your order waits on the counter with your name on it.
Questions
Can I change an order?
Yes, until 6pm the evening before.
Do you deliver?
Not yet. Orders are collected from the shop.
Form fields
Every contrast check, light mode
All 51 required pairs pass. Advisory pairs (status colours, focus ring, strong border) are there for information and do not block the build.
Show all 61 checks for light mode
| Text | On | Ratio | Needs | Result |
|---|---|---|---|---|
Body text text | canvas | 16.33:1 | 4.5:1 | Pass |
Body text text | surface | 18.37:1 | 4.5:1 | Pass |
Body text text | surface-raised | 18.37:1 | 4.5:1 | Pass |
Body text text | surface-muted | 14.78:1 | 4.5:1 | Pass |
Muted text text-muted | canvas | 6.48:1 | 4.5:1 | Pass |
Muted text text-muted | surface | 7.29:1 | 4.5:1 | Pass |
Subtle text text-subtle | canvas | 4.57:1 | 4.5:1 | Pass |
Subtle text text-subtle | surface | 5.14:1 | 4.5:1 | Pass |
Links (accent) accent | canvas | 4.85:1 | 4.5:1 | Pass |
Solid button label accent-text | accent | 5.46:1 | 4.5:1 | Pass |
Solid button label accent-text | accent-hover | 7.04:1 | 4.5:1 | Pass |
Text on dark sections inverse-text | inverse-canvas | 16.33:1 | 4.5:1 | Pass |
Text on dark sections inverse-text | inverse-surface | 14.09:1 | 4.5:1 | Pass |
Muted text on dark sections inverse-text-muted | inverse-canvas | 7.96:1 | 4.5:1 | Pass |
Depth button label action-depth-text | action-depth-from | 4.80:1 | 4.5:1 | Pass |
Depth button label action-depth-text | action-depth-to | 7.04:1 | 4.5:1 | Pass |
Ink button label action-ink-text | action-ink | 18.37:1 | 4.5:1 | Pass |
Ink button label action-ink-text | action-ink-hover | 13.13:1 | 4.5:1 | Pass |
WhatsApp button label whatsapp-text | whatsapp | 6.69:1 | 4.5:1 | Pass |
WhatsApp button label whatsapp-text | whatsapp-hover | 8.18:1 | 4.5:1 | Pass |
WhatsApp button label whatsapp-text | whatsapp-highlight | 9.40:1 | 4.5:1 | Pass |
Warning text status-warning-text | canvas | 6.09:1 | 4.5:1 | Pass |
Warning text status-warning-text | status-warning-subtle | 6.15:1 | 4.5:1 | Pass |
Sky level label level-sky-text | level-sky-highlight | 8.23:1 | 4.5:1 | Pass |
Sky level label level-sky-text | level-sky-base | 5.27:1 | 4.5:1 | Pass |
Sky level label level-sky-text | level-sky-hover | 4.71:1 | 4.5:1 | Pass |
Sky level text level-sky-ink | canvas | 4.83:1 | 4.5:1 | Pass |
Sky level text level-sky-ink | surface | 5.43:1 | 4.5:1 | Pass |
Blue level label level-blue-text | level-blue-highlight | 6.25:1 | 4.5:1 | Pass |
Blue level label level-blue-text | level-blue-base | 8.57:1 | 4.5:1 | Pass |
Blue level label level-blue-text | level-blue-hover | 11.10:1 | 4.5:1 | Pass |
Blue level text level-blue-ink | canvas | 6.01:1 | 4.5:1 | Pass |
Blue level text level-blue-ink | surface | 6.76:1 | 4.5:1 | Pass |
Navy level label level-navy-text | level-navy-highlight | 9.26:1 | 4.5:1 | Pass |
Navy level label level-navy-text | level-navy-base | 15.39:1 | 4.5:1 | Pass |
Navy level label level-navy-text | level-navy-hover | 17.30:1 | 4.5:1 | Pass |
Navy level text level-navy-ink | canvas | 10.75:1 | 4.5:1 | Pass |
Navy level text level-navy-ink | surface | 12.10:1 | 4.5:1 | Pass |
Pearl level label level-pearl-text | level-pearl-highlight | 19.67:1 | 4.5:1 | Pass |
Pearl level label level-pearl-text | level-pearl-base | 16.34:1 | 4.5:1 | Pass |
Pearl level label level-pearl-text | level-pearl-hover | 14.48:1 | 4.5:1 | Pass |
Pearl level text level-pearl-ink | canvas | 6.49:1 | 4.5:1 | Pass |
Pearl level text level-pearl-ink | surface | 7.30:1 | 4.5:1 | Pass |
Obsidian level label level-obsidian-text | level-obsidian-highlight | 10.52:1 | 4.5:1 | Pass |
Obsidian level label level-obsidian-text | level-obsidian-base | 17.57:1 | 4.5:1 | Pass |
Obsidian level label level-obsidian-text | level-obsidian-hover | 13.94:1 | 4.5:1 | Pass |
Obsidian level text level-obsidian-ink | canvas | 15.62:1 | 4.5:1 | Pass |
Obsidian level text level-obsidian-ink | surface | 17.57:1 | 4.5:1 | Pass |
Depth button label action-depth-text | action-depth-fill@44px | 4.96:1 | 4.5:1 | Pass |
Depth button label action-depth-text | action-depth-fill@48px | 4.97:1 | 4.5:1 | Pass |
Depth button label action-depth-text | action-depth-fill@56px | 5.02:1 | 4.5:1 | Pass |
success colour status-success | canvas | 4.57:1 | 4.5:1 (advisory) | Pass |
warning colour status-warning | canvas | 4.63:1 | 4.5:1 (advisory) | Pass |
info colour status-info | canvas | 5.27:1 | 4.5:1 (advisory) | Pass |
danger colour danger | canvas | 5.59:1 | 4.5:1 (advisory) | Pass |
success colour status-success | status-success-subtle | 4.68:1 | 4.5:1 (advisory) | Pass |
warning colour status-warning | status-warning-subtle | 4.68:1 | 4.5:1 (advisory) | Pass |
info colour status-info | status-info-subtle | 5.17:1 | 4.5:1 (advisory) | Pass |
danger colour danger | status-danger-subtle | 5.24:1 | 4.5:1 (advisory) | Pass |
Focus ring focus | canvas | 4.85:1 | 3:1 (advisory) | Pass |
Strong border border-strong | canvas | 1.85:1 | 3:1 (advisory) | Fail |
Export
The JSON has the same shape as the brand files in the kit. The CSS holds every token for light and dark, ready to import.
{
"name": "my-brand",
"label": "My brand",
"accent": "#b8430d",
"ink": "#17140f",
"paper": "#f6f1e8",
"fonts": {
"body": "'Hanken Grotesk Variable', Arial, sans-serif",
"display": "'Bricolage Grotesque Variable', Arial, sans-serif"
},
"appearance": "depth"
}
When your brand passes
Hand the JSON file to your developer, or to whoever builds your site. In the kit it goes in the brands folder and every component picks it up. The guide to accessible colours explains what each check means and how to fix a fail.