// check the color contrast between two hex color values // // example usage: https://jxnblk-color_contrast.web.val.run/f0f/303 // // Shows the color contrast between #f0f and #303 as a shareable link // with OG image for URL unfurling // card image: https://jxnblk-png_card.web.val.run/?text=hello&bg=000&color=f00 import { Color } from "https://deno.land/x/color/mod.ts"; import badge from "https://esm.town/v/jxnblk/valTownBadgeMiddleware"; const HEXRE = /^[A-Fa-f0-9]{3,6}$/; const HASHRE = /^#[A-Fa-f0-9]{3,6}$/; const LARGE = 3; const AA = 4.5; const AAA = 7; const toHex = str => HEXRE.test(str) ? "#" + str : str; const stripHash = str => HASHRE.test(str) ? str.slice(1) : str; async function handler(req: Request): Promise { const path = new URL(req.url).pathname; const [ color = "#fff", bg = "#000", ] = path.split("/").filter(Boolean); const data = { color: Color.string(toHex(color)), bg: Color.string(toHex(bg)), }; const contrast = data.color.contrast(data.bg).toFixed(2); const level = getLevel(contrast); const title = `${contrast} ${level}`; const description = `${data.color.hex()} on ${data.bg.hex()}`; const image = `https://jxnblk-png_card.web.val.run/?color=${stripHash(data.color.hex())}&bg=${ stripHash(data.bg.hex()) }&text=${title}&fontSize=128`; const html = ` ${title}

${contrast}
${level}

${description}

`; return new Response(html, { headers: { "content-type": "text/html", }, }); } export default badge(handler, import.meta.url); const getCSS = (color, bg) => ` * { box-sizing: border-box } body { margin: 0; font-family: system-ui, sans-serif; background-color: ${bg}; color: ${color}; padding: 32px; text-align: center; min-height: 100vh; display: flex; align-items: center; justify-content: center; } h1 { font-size: 64px; line-height: 1; margin: 0; margin-bottom: 16px; } h1 div { font-size: 48px; } .badge { position: fixed; right: 0; bottom: 0; margin: 32px; } `; const getLevel = contrast => { if (contrast >= AAA) { return "AAA"; } else if (contrast >= AA) { return "AA"; } else if (contrast >= LARGE) { return "AA LARGE"; } else { return "FAIL"; } };

thierryc