Melt Point — a contrast checker where failing text melts

A runnable web contrast checker where the specimen text physically melts when the colour pair fails WCAG. It opens already failing: a huge bold "Can you read this?" in light orange on cream (2.01 : 1) drips from the bottom of almost every letter, drops fall, and a puddle collects at the bottom of the specimen. The readout says 2.01 : 1 and Melting.

Drag the text sideways (or use the arrow keys: the specimen is a slider) to make the text darker or lighter. The melt comes from the real WCAG 2.2 ratio, with two thresholds at once: big bold text sets at 3 : 1, the 18 px paragraph only at 4.5 : 1. So between the two, the headline is solid while the body still drips. When a block passes, its drips pull back up, the puddle drains and one glint runs across the text, then everything stops moving. "Set it" animates to the nearest colour with the same hue that reaches 4.5 : 1, and says exactly what it changed (for the default pair: #F29A52 to #B2570D, 4.50 : 1). "Set to AAA" does the same for 7 : 1, and says so when no lightness of that hue can get there. The readout is rounded down, so a fail is never shown as a pass: #777777 on white reads 4.47, not 4.5.

Also: hex fields that take 3 or 6 digits and explain a mistake under the field (transparent colours are refused rather than silently made solid), colour pickers, lightness sliders, Swap, four common misses (placeholder grey, white on orange, dim dark mode, mint caption), an editable headline, copyable CSS and a shareable link that keeps the pair. Reduced motion shows one still melted frame with the same readout. Works down to 360 px phones. Nothing is stored or sent anywhere.

This is a design and web prototype. It checks the WCAG 2.x ratio only (no APCA), and the melt is a drawn effect, not a fluid simulation.

Try the live demo: https://boloop-works.pages.dev/works/melt-point/

Download the prototype files (zip, 84 KB): https://boloop-works.pages.dev/works/melt-point/melt-point.zip

Actual design brief

Design a small, genuinely useful colour-contrast checker where the specimen text physically melts when the pair fails WCAG, delivered as a runnable single-page web app (plain HTML/CSS/JS, no backend, no build step, English UI). The page must open already melting: a huge bold headline ("Can you read this?") in a failing default pair (#F29A52 on #FFF3E4, 2.01 : 1) drips from the bottom of every stroke, drops fall and pool at the bottom of the specimen. Melt amount comes from the real WCAG 2.2 ratio: big bold text sets at 3 : 1, 18 px body text at 4.5 : 1, so between the two the headline is solid while the body still drips. Drag the text sideways (or use arrow keys; the canvas is a slider) to change the text lightness; crossing the threshold retracts the drips, drains the puddle and sweeps one glint across the text. "Set it" animates to the nearest lightness that reaches 4.5 : 1 with the same hue; "Set to AAA" does 7 : 1 and says so honestly when it is impossible. Hex and colour inputs, lightness sliders, Swap, four common failing presets, editable headline, copyable CSS, shareable URL hash. Never round a fail up in the readout. Warm paper chrome with ink black, one heat red and one set green, all chrome text at least 4.5 : 1. Reduced motion draws one still melted frame with the same readout. Phones down to 360 px with no horizontal scroll.

Sources

Inspired by @exteedesign's Venom button, a UI element given a living, gooey material that moves from the first frame, https://x.com/exteedesign/status/2113276327415758886 — here the goo is the text itself, and it is driven by a measured value rather than by the cursor. Inspired by @lionel_mora's heat and water experiment, a standard made playable with a live readout and a threshold moment, https://x.com/lionel_mora/status/2111156593693794386 — here the threshold is 3 : 1 and 4.5 : 1, and the reward is the text setting solid. Partial reference: @ty_kra_lab's question headline, https://x.com/ty_kra_lab/status/2114286571968971257. No code, artwork or copy from any of these posts is used.

Fonts: Bricolage Grotesque and JetBrains Mono, SIL Open Font License 1.1, bundled locally.