01
Accessible ramp
Nine steps from the seed. Each one is measured against the page surface, so you can see where the scale stops being readable.
Accessible colour systems, contrast audits, design tokens
Design color systems people can read
Turn a website, image, palette, or single color into readable UI choices, color-vision checks, exportable tokens, and clear fixes — before your design ships.
Most tools are free, no account A full site scan needs an account
Contrast audit
1 issue
Body text on surface
#1d2a3e on #FFFCF7
14.12
AAA
Accent on ink
#d3af37 on #1d2a3e
6.85
AA
Accent as body text
#d3af37 on #FFFCF7
2.06
FAIL
That last row is our own brand gold on our own surface. Keep it for accents and rules — not for reading.
Live demo
Pick two colours, watch the verdict move
Text#1d2a3e
Background#FFFCF7
Colour that reads
Body copy at the size people actually read it, on the surface it will actually sit on.
Contrast
14.12
Normal text
AAA
Large text
AAA
We publish the audit of our own palette.
124accessibility rules
70+vision models
29tools, free
24pages per crawl
The workflow
One brand color to a shippable system
Change the colour and watch all three steps move. Nothing here asks you to trust a number you cannot reproduce.
02
Vision check
The same ramp through the Machado (2009) models the vision lab uses — so a scale that separates for you separates for everyone.
03
Export tokens
The scale above, in the format your build already reads.
Colour of the day
A new colour every morning, with its numbers
#D3AF37
Auric Gold
The house accent. Warm, metallic, and — as the numbers below show — a colour for rules and marks rather than for reading: it clears 3:1 as a large display colour and fails as body text on a light surface.
Hex#D3AF37
RGB211, 175, 55
HSL46° 64% 52%
HSB46° 74% 83%
CMYK0 17 74 17
LAB73 1 63
LCH73 63 89°
On white2.11:1
On black9.96:1
Tints, harmonies and how it reads
Tints & shades
Harmonies
- Complementary
- Analogous
- Triadic
- Split-comp.
- Tetradic
How it reads
2.11:1
on white
Normal: fail
Large: fail
9.96:1
on black
Normal: AAA
Large: AAA
Where to use it
Warm, metallic, attention-carrying. It earns its place as an accent and loses it as body copy: on a light surface a reader needs #8a6d16 (4.79:1) instead.
The libraries
Six libraries, all checkable
Browse all
Every tool, in one place
Accessibility
Analyze URLs
Advanced accessibility audit, contrast checking, colour vision simulation, palette extraction, and exportable reports.
Free to use
Design Systems
Design System Generator
Generate a complete design system - accessible OKLCH color ramps, font pairing, icon family, spacing, radius, shadow and motion scales - with live previews and token exports.
Free to use
Color Science
Color Science Lab
Advanced laboratory: chromatic adaptation, appearance models, spectral analysis, and perceptual spaces.
Free to use
Accessibility
Vision Simulation
Simulate colour vision deficiencies, cone isolation, and ocular conditions including retinal dystrophies.
Free to use
Generators
Basic Tools
Generate palettes, gradients, conversions, and quick color utilities in one easy place.
Free to use
Generators
Personalization Generator
Build preference-conditioned palettes, gradients, typography, UI pairs, and poster systems from a large color pool.
Free to use
Typography
Font Library
Browse, preview, download, and embed self-hosted fonts with live specimens and CDN-ready code.
Free to use
No tool matches that. Try a shorter word, or clear the category filters.