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.
Free contrast checker & color blindness simulator
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.
Every tool is free Only the URL Analyzer needs a (free) account
Contrast audit
2 of 3 pairs pass AA for body text
- AAA · 7+
- AA · 4.5+
- Large only · 3+
- Fail
That last tile is our own brand gold on our own surface. Keep it for accents and rules — not for reading.
Select a tile to inspect it and try your own colors.
Inspecting
Accent as body text
#D3AF37 on #F5F0E6
Pick a color, or type a 3- or 6-digit hex. Everything below follows.
WCAG 2 contrast
1.85 : 1 Fail
Lightness · OKLCHGap 0.17
Contrast is mostly the distance between two lightnesses. Hue barely counts.
APCA · WCAG 3 draftLc +32
Spot text and non-text only · A draft, shown for comparison; WCAG 2 is still the conformance test.
Each cell is this text hue on this background hue, at one pair of lightnesses. The ring is your pair; the small dots are the nearest passing fixes. Move either slider to walk the map.
#D3AF37 on #F5F0E6 · 1.85:1 · Fail
- 4.5:1FailBody textAA · 1.4.3
- 3:1FailLarge textAA · 1.4.3
- 7:1FailBody text, enhancedAAA · 1.4.6
- 3:1FailIcons and bordersAA · 1.4.11
A ring closes when the pair reaches that threshold. Large text is 24px, or 18.5px bold.
Selecting a type previews it in the specimen too. The simulations follow Machado, Oliveira and Fernandes (2009) at full severity. The ratio barely moves because contrast follows lightness; anything told apart by hue alone can vanish.
Each fix moves one color in lightness only, so the hue stays yours.
Passes every threshold, AAA included. Nothing to fix.
color: #D3AF37; background-color: #F5F0E6;
Every text color in our palette (rows) on every background (columns). The bar under each cell is its grade. Select a cell to inspect it above.
Live demo
Pick two colors, watch the verdict move
Text#1d2a3e
Background#FFFCF7
Color 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
Accessibility, in the open
We publish the audit of our own palette.
Here it is. Every text and control color on this site, placed by its WCAG 2 contrast against the ground it sits on and computed from the color tokens that ship.
- Accessibility rules
- 126
- Vision conditions
- 78
- Free tools
- 30
- 1.33:1 Separators Decoration, no minimum
- 1.86:1 Gold on paper Refused
- 2.11:1 White on gold Refused
- 4.19:1 Control borders Passes 3:1 for controls
- 5.23:1 Captions Passes AA
- 5.71:1 Gold text Passes AA
- 7.48:1 Labels Passes AAA
- 12.39:1 Body text Passes AAA
- 12.72:1 Buttons Passes AAA
- 15.30:1 Headings Passes AAA
- 1.35:1 Separators Decoration, no minimum
- 2.11:1 White on gold Refused
- 4.54:1 Control borders Passes 3:1 for controls
- 6.66:1 Captions Passes AA
- 10.34:1 Labels Passes AAA
- 11.57:1 Gold text Passes AAA
- 16.81:1 Body text Passes AAA
- 16.81:1 Buttons Passes AAA
- 19.29:1 Headings Passes AAA
Every tool is free
- URL Analyzer: 20 scans a month with a free account.
- Color Blindness Simulator: 25 simulations a day.
Paid plans
Both caps lifted, plus whole-site crawls of up to 24 pages, cloud sync and API access.
The workflow
One brand color to a shippable system
Change the color 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.
Color of the day
A new color every morning, with its numbers
#D3AF37
Auric Gold
The house accent. Warm, metallic, and — as the numbers below show — a color for rules and marks rather than for reading: it clears 3:1 as a large display color 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
The references
Guides and references
Browse all
Every tool, in one place
Accessibility
Color Contrast Checker
Check text and UI colors against WCAG AA and AAA contrast ratios, see the APCA Lc score, preview the pair, and fix failing text in one click.
Free to use
Accessibility
Color Blindness Simulator
Simulate 78 vision conditions on your own images and designs: every type of color blindness, plus cataract, glaucoma, macular degeneration and more.
Free to use
Accessibility
URL Analyzer
Audit any web page's accessibility, color contrast, metadata and security from its URL, with each finding pointing at the line that caused it. Free account.
Free to use
Generators
Basic Color Tools
Everyday color tools in one workspace: a palette generator and remixer, gradient maker, color picker, palette battles and quick format conversion.
Free to use
Design Systems
Design System Generator
Generate an accessible design system from an industry, a style and a contrast target: OKLCH color ramps, type, icons and tokens, exported twelve ways.
Free to use
Utilities
Image Color Picker
Extract a palette from any image with K-means++ and an eyedropper, then check its WCAG contrast pairs, harmony and CIE Lab values.
Free to use
Generators
Tints & Shades Generator
Generate tints, shades and tonal ramps from one color in the space you choose, with every step's lightness and contrast measured as you build.
Free to use
Generators
Gradient Ramp
Build a color ramp in sRGB, linear RGB, HSL or OKLCH and measure how even its steps are, what text can sit on each one, and what color-blind readers see.
Free to use
No tool matches that. Try a shorter word, or clear the category filters.