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
25 references in four parts. Each part opens on the page to start from; the rest go deeper.
Color codes
Names, codes and conversions, from Tailwind and RAL to every CSS format.
7 entries
Working with color
Contrast and palettes for real work, with every pair measured.
7 entries
Accessibility
The standards, the law and the patterns, with checks you can run.
6 entries
Tools and data
Tokens, integrations, datasets and the tests behind the engines.
5 entries
Looking for something these don't name? The site search covers every page.
Search the siteBrowse all
Every tool, in one place
All 30 tools, free to use. The search also finds articles, guides, WCAG criteria, patterns and colors across the site.
30 tools
Did you mean ?
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.
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.
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.
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.
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.
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.
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.
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.
Generators
Personalization Generator
Give it the colors and brief you have in mind and get a design system back: palettes, mesh gradients, type, UI pairs, posters and theme tokens.
Utilities
SVG Recolor
Recolor an SVG file and see exactly what changed: colors can swap places, named colors and shorthands are rewritten, and nothing leaves your browser.
Accessibility
Ishihara Plate Generator
Generate Ishihara-style color vision test plates that hide a figure from a chosen deficiency, measured and scored in OKLab, and export them.
Color Science
Color Science Lab
A color science workspace for chromatic adaptation, spectral analysis, color appearance, 60+ color spaces and model comparison, in floating panels.
Colorimetry
Standard Illuminants
CIE standard illuminants and their spectral power distributions, with CCT and Duv by Ohno's method, the chromaticity diagram and chromatic adaptation.
Colorimetry
Chromatic Adaptation
Apply eight published chromatic adaptation transforms to a real image and watch the eye adapt over time, with the data and paper behind each one named.
Colorimetry
Gamut Mapping
See what a color becomes when the target space cannot hold it: sRGB, Display P3, Rec.2020, Adobe RGB and ProPhoto boundaries sliced through CIELAB.
Gamut & Rendering
Gamut Explorer
Define custom primaries, derive RGB to XYZ matrices, draw color spaces on the chromaticity diagram and measure their gamut area.
Gamut & Rendering
HDR Gamut Plot
Plot the three broadcast gamuts on one diagram and the PQ and HLG curves that carry them to 10,000 nits, with ICtCp and JzAzBz views.
Gamut & Rendering
Tone Mapping
Compare nine tone-mapping curves, including Reinhard, Hable and ACES, on HDR images, with a histogram, waveform, vectorscope and LUT export.
Typography
Font Library
Browse thousands of self-hosted fonts, each shown in itself: set your own words, explore variable axes and glyphs, and copy the kit or CDN line.
Iconography
Icon Library
Search about 12,900 icons across seven sets, recolor and resize them in the tab, and copy them as SVG, JSX or a data URI, or serve them from a CDN.
Utilities
LUT Lab
Read a .cube LUT, apply it to an image and see what it moved: hue, lightness and chroma in CIELAB, and the highlights it crushed.
Utilities
ICC Profile Reader
Drop an ICC color profile and read it against the ICC specification: header, colorants and primaries, gamut coverage and a conformance verdict.
Utilities
Collage Maker
Build a photo collage on a canvas and export it, with coverage, overlap and off-canvas area measured from the pixels. Nothing is uploaded.
Generators
ASCII Art Generator
Turn images, your webcam or text into ASCII art with dithering, edge detection and four render modes, then export it. Everything runs in your browser.
Publish
Portfolio Builder
Build a free public portfolio from your color work, see it live as you edit, and publish it at your own address. Paid plans drop the small credit line.
Advanced lab
Perception & Vision
Run eight simulations of how a scene reaches a different visual system over your own image: color vision deficiency, rod vision, lens yellowing and more.
Advanced lab
Visual Pathway
Follow a color from the retina to V4 one stage at a time: cone signals, opponent channels, centre-surround cells and a V1 Gabor bank, each explained.
Advanced lab
Psychophysics Bench
Measure contrast thresholds with adaptive staircases over gratings stated in luminance and cycles per degree, then fit the psychometric function.
Advanced lab
Material Under Light
Light a pigment and see its color: pigment, illuminant and reflectance multiplied one wavelength at a time from 380 to 780 nm, against the CIE observer.
Advanced lab
Dye in Solution
Mix a dye bath and see its color: Beer–Lambert absorption over 81 wavelengths from 380 to 780 nm, integrated against the CIE 1931 observer.
No tool matches that.