Now Playing Card

A CARD THAT STAYS READABLE ON ANY COVER
⚡ Most now playing cards take their colour from the average of the cover art and then put white text on it. Both steps are measurably wrong: averaging six saturated hues returns exactly grey, and white text clears the 4.5:1 readability threshold on only 36 % of colours. This one picks a colour the artwork actually contains, then picks the text colour by contrast — and shows you the ratio. Nothing is uploaded.
Drop the cover art here
or click to choose — JPG, PNG or WebP

The average of a cover is a colour the cover does not contain

Nearly every now playing card takes its background from the average of the artwork. It is one line of code and it is wrong in a way you can measure in about a second.

Average six equal bands of fully saturated hues and you get rgb(128, 128, 128) — saturation 0.0, exactly grey. Average half red over half blue and you get purple, which appears nowhere in the image. We checked three test covers and in every one the average colour was not present in the artwork at all:

CoverAverageSaturationIn the artwork?
Six saturated hues128, 128, 1280.0 %No
Half red, half blue128, 0, 128100 %No
Green over near-black27, 103, 5258.5 %No

The pattern is the problem: the more colourful the cover, the greyer its average, because opposing hues cancel. A bold sleeve gets a dull card and a monochrome sleeve gets a faithful one, which is precisely backwards. This tool instead quantises the artwork and picks a populous, saturated bucket — a colour that is genuinely in the picture. You can switch it to the average above and watch the card go grey.

White text fails on nearly two thirds of colours

The second habit is white text on whatever colour came out of step one. We sampled 636,056 colours across the sRGB cube and computed the WCAG contrast ratio against white and against black:

TextClears 4.5:1Clears 3.0:1
Always white36.4 %56.9 %
Always black65.3 %

So a card that always writes in white is below the readability threshold on 63.6 % of the colours it could land on. Not unreadable in a dramatic way — readable enough on your own screen, at full size, when you already know what it says.

Choosing per colour never fails, and that is provable

Here is the part worth knowing. We scanned all 16,777,216 sRGB colours — not a sample — and took, for each one, the better of its contrast against white and against black. The worst case in the entire colour space is 4.58:1.

That is above the 4.5:1 threshold, everywhere. There is no background colour on which both white and black text fail. The figure is not an artefact of the scan either; it matches the closed form exactly. The two curves cross at luminance √(1.05 × 0.05) − 0.05 = 0.1791, which gives 1.05 / 0.2291 = 4.5826.

So picking the text colour by contrast is not a heuristic that usually works. It is readable by construction, and it costs one comparison. The card reports the ratio it achieved so you can see it rather than trust it.

The scan, the closed form and the averaging measurements are written up in Why now playing cards come out grey, and why the text is hard to read.

What the card shows, and what it deliberately does not

The card carries your cover art, your text, a progress bar and the two times you type. It carries no service's logo, wordmark or brand colours, and it is not a screenshot of anything — it is a picture you made, out of a picture you had. Long titles are measured and ellipsised rather than allowed to run off the edge, which is the third small thing most generators get wrong.

Frequently asked questions

Is my cover art uploaded anywhere?

No. The file is read by your browser, drawn on a canvas in the page, and handed back to you as a download. It never reaches a server, which is also why it keeps working with the tab offline once the page has loaded.

Why is my card not the colour I expected?

Because it is a colour from the artwork rather than the average of the artwork. Those are usually different, and on a colourful cover very different — an average pulls toward grey as opposing hues cancel. Switch the card colour to "average of the artwork" to see the difference, or pick the colour yourself.

What does the contrast ratio mean?

It is the WCAG ratio between the text and the background behind it. 4.5:1 is the threshold for normal body text; below that, text is measurably hard to read for a lot of people and in a lot of lighting. Choosing between white and black per colour never drops below 4.58:1, which we verified over the whole sRGB colour space.

Can I use it for a Spotify or Apple Music screenshot?

It is not a screenshot and does not imitate one — no logos, no wordmarks, no brand colours. It makes a plain player card out of your own cover art and your own typing, which is yours to post anywhere.

Which export size should I pick?

1080 × 1920 for a full-screen story, 1080 × 1350 for a feed post, 1080 × 1080 if the feed crops to square. All three are above what any major platform displays, so they survive downscaling with detail to spare.

My track title is cut off. Why?

Because it does not fit, and the card measures it rather than letting it run past the edge. Titles are ellipsised at the width available; if you need the whole thing, shorten it or choose a taller export where the card is wider.

Does the progress bar have to be accurate?

No — it is drawn from the two times you type, so it is exactly as accurate as they are. If the elapsed time is longer than the length, the bar fills completely.

Does it work on a phone?

Yes. The drawing is done by the same canvas the desktop uses. Very large covers are limited by the browser's memory rather than by the tool; if a download comes back blank, resize the cover first.