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，本地打包。