Melt Point：对比度不合格的文字会融化

一个可运行的网页对比度检查器：配色达不到 WCAG 时，示例文字会真的融化。一打开就是不合格状态：浅橙色的超大粗体「Can you read this?」放在米白底上（2.01 : 1），几乎每个字母的底部都在往下滴，水珠落下，在示例区底部积成一摊。读数显示 2.01 : 1 和 Melting（融化中）。

左右拖动文字（或用方向键，示例区本身就是一个滑块）可以把文字调深或调浅。融化程度来自真实的 WCAG 2.2 对比度，同时有两条线：大号粗体 3 : 1 就凝固，18 px 正文要到 4.5 : 1。所以在两者之间，标题已经凝固，正文还在滴。一块文字达标时，滴痕缩回去，水洼干掉，一道高光扫过文字，然后画面完全静止。「Set it」会动画过渡到同色相下最近的 4.5 : 1 颜色，并写清楚改了什么（默认配色：#F29A52 改为 #B2570D，4.50 : 1）。「Set to AAA」对 7 : 1 做同样的事；如果这个色相怎么调明度都到不了，它会直说。读数向下取整，不合格永远不会显示成合格：白底上的 #777777 显示 4.47，而不是 4.5。

另外还有：十六进制输入（3 位或 6 位都可以；输错时在输入框下方用文字说明原因，带透明度的颜色会被明确拒绝，而不是悄悄当成不透明）、取色器、明度滑块、Swap（交换前景背景）、四个常见的不合格配色（占位符灰、橙底白字、暗色模式里的暗灰、薄荷色说明文字）、可编辑的标题、可复制的 CSS，以及保留当前配色的分享链接。减少动效时显示一帧静止的融化画面，读数相同。窄到 360 px 的手机也能用。不保存也不发送任何数据。

这是一个设计和网页原型。它只检查 WCAG 2.x 对比度（不含 APCA），融化是绘制效果，不是流体模拟。

在线试用：https://boloop-works.pages.dev/works/melt-point/

下载原型文件（zip，84 KB）：https://boloop-works.pages.dev/works/melt-point/melt-point.zip

实际设计 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.

来源与改编

灵感来自 @exteedesign 的 Venom 按钮：给界面元素一种活的、黏稠的材质，第一帧就在动，https://x.com/exteedesign/status/2113276327415758886。这里黏稠的是文字本身，由测量值驱动，而不是跟着鼠标。灵感来自 @lionel_mora 的加热与水实验：把一条标准做成可以玩的实验，有实时读数和越过阈值的瞬间，https://x.com/lionel_mora/status/2111156593693794386。这里的阈值是 3 : 1 和 4.5 : 1，奖励是文字凝固。部分参考：@ty_kra_lab 用提问做标题的方式，https://x.com/ty_kra_lab/status/2114286571968971257。没有使用这些帖子里的任何代码、图像或文案。

字体：Bricolage Grotesque 和 JetBrains Mono，SIL Open Font License 1.1，本地打包。