The picture stays in the tab.
A screenshot of a client's dashboard has names, numbers and a session token in the corner. Reducing it to five colours should not require handing it to a server in another country.
Pikkola Color Studio, tool No. 14
Colour, measured.
A contrast ratio, eight colour formats, six harmonies and the five colours inside a photograph. Four instruments in one page, and every one of them reads the colour in your tab and nowhere else.
Open the studio
WCAG 2.1
- 8
- colour formats
- 4.5
- AA, normal text
- 6
- harmonies
- 0
- bytes uploaded
Measured pair
14.24:1
Cocoa on cream, the pair this page is set in on a bright morning.
- AA, normal textpass
- AAA, normal textpass
- AA, large textpass
Studio
Four instruments, one bench
Check a pair before it ships, move a colour between formats, build a palette from one hue, or pull the colours out of a screenshot. Nothing here needs an account or an upload.
Text colour
foreground
rgb(42 33 25)
Background colour
background
rgb(247 243 232)
Preview
Contrast is a budget
Body copy at sixteen pixels, the size most of a page is set in. If this line asks for effort, the ratio is under four and a half.
Small print at thirteen pixels, where half a point of ratio is felt.
Button labelContrast ratio
14.24:1
AAA
- AA, normal text4.5:1
- AAA, normal text7:1
- AA, large text3:1
- AAA, large text4.5:1
- Interface borders and icons3:1
Large means 24 pixels, or 18.66 pixels when the weight is bold.
If it fails, by how much
These two shades of the text colour are the nearest that reach 4.5 to 1 on this background. Press one to keep it.
Relative luminance 0.017 and 0.897
HEX, rgb(), hsl(), hwb(), oklch() and oklab() are read directly. A named colour or anything else the browser knows is read through a canvas, so the page still makes no request.
The same colour, eight ways
Relative luminance0.122
On white7.71:1
On black2.73:1
AA on whitepass
Each swatch carries its ratio against white and against black, so a set can be checked for text use before it becomes a theme.
Drop a picture here
PNG, JPEG, WebP or SVG. It is read in the tab and never leaves it.
Five colours, weighted by how much of the picture each one covers. Transparent pixels are ignored.
Reference
The arithmetic behind the number
WCAG 2.1 defines contrast with relative luminance, not with a screenshot. Here is the whole calculation, so a result on this page can be checked against any other tool.
- Divide every channel by 255Red, green and blue become numbers from 0 to 1.
- Linearise each channelBelow 0.03928, divide by 12.92. Above it, add 0.055, divide by 1.055, then raise to 2.4.
- Weight the channels0.2126 red, 0.7152 green, 0.0722 blue, added together. That is the relative luminance.
- Compare the twoAdd 0.05 to the lighter and to the darker, then divide the first by the second.
| Text | AA | AAA |
|---|---|---|
| Normal, under 24 pixels | 4.5:1 | 7:1 |
| Large, 24 pixels or bold 18.66 | 3:1 | 4.5:1 |
| Icons, borders and focus rings | 3:1 | 3:1 |
A ratio above the line is the floor, not the ceiling. A page can pass every row in this table and still be unusable at arm's length, and a page that fails a row is hard to read for someone with low vision in a bright room. Both are worth fixing.
Why this one
The colour tools we used all wanted the image first.
The ratio is shown with its reason.
A number alone does not say whether to darken the text or lighten the panel. The two nearest shades that reach the line are offered beside the failure, with the ratio each of them reaches.
The exports are the ones we use.
CSS custom properties, a Tailwind theme object and plain JSON: the three shapes that end up in a repository. No proprietary palette file that needs this site to open it.
No account. No upload. No colour profile of you.
The colours and the image live in the form and on a canvas. Closing the tab throws them away, which is the point when the image is an unreleased screen.
Read the privacy noteQuestions
Asked with a swatch in hand
Is my image or my colour sent anywhere?
No. The image is read with the browser's file reader, drawn on a canvas in the page and reduced to five colours there. There is no request in the page at all, and the content security policy blocks every other origin.
Which contrast formula is used?
The WCAG 2.1 relative luminance formula on the sRGB channels, with the 0.03928 and 2.4 transfer function and the (L1 + 0.05) / (L2 + 0.05) ratio. The same numbers as the W3C's own examples.
What is the difference between AA and AAA?
AA asks for 4.5 to 1 on normal text and 3 to 1 on large text. AAA asks for 7 to 1 and 4.5 to 1. Large means at least 24 pixels, or 18.66 pixels when the text is bold.
Does a passing ratio make a page accessible?
No. It makes the text readable. Focus states, form labels, alt text, motion and the meaning carried by colour are separate obligations that a ratio cannot check.
Why is my OKLCH value different from another site?
There are two common conventions, one with L in the 0 to 1 range and one with L as a percentage, and browsers also clip to the sRGB gamut. This page converts through linear sRGB and reports the CSS form, so the value pastes into a stylesheet as written.
How does the image palette work?
The picture is drawn at a maximum of 240 pixels on the long edge, its pixels are grouped by median cut into five buckets, and each bucket's average becomes a colour. Transparent pixels and near-identical colours are dropped first. A picture with fewer than five distinct colours returns fewer swatches.
Can I copy the palette into a project?
Yes. Every panel has a copy button for CSS custom properties, a Tailwind theme object, a JSON file or a plain list of hex values. Nothing is added to the values beyond the names colour-1 to colour-5.
Made by one person, free to use