2b:null 2c:["$","title",null,{"children":"Text color based on background color | Ariel Aizemberg | Observable"}] 31:T463,// Convierte hex a RGB function hexToRgb(hex) { const n = parseInt(hex.slice(1), 16); return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }; } // Luminancia relativa (WCAG 2.0) function relativeLuminance({r, g, b}) { const [R, G, B] = [r, g, b].map((c) => { const s = c / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); }); return 0.2126 * R + 0.7152 * G + 0.0722 * B; } const rgb = hexToRgb(bgColor); const luminance = relativeLuminance(rgb); // Contraste con blanco y negro (WCAG contrast ratio) function contrastRatio(L1, L2) { const [light, dark] = L1 > L2 ? [L1, L2] : [L2, L1]; return (light + 0.05) / (dark + 0.05); } const luminanceWhite = 1; const luminanceBlack = 0; const contrastWithWhite = contrastRatio(luminance, luminanceWhite); const contrastWithBlack = contrastRatio(luminance, luminanceBlack); const textColor = contrastWithWhite >= contrastWithBlack ? "white" : "black"; display({rgb, luminance: luminance.toFixed(3), contrastWithWhite: contrastWithWhite.toFixed(2), contrastWithBlack: contrastWithBlack.toFixed(2), textColor});32:[] 2f:{"id":"3ee800410095b2ad","slug":"text-color-based-on-background-color","title":"Text color based on background color","thumbnail":"55002b7c34f78599e147407d900b83b02b39fa089005a8395f1d6263d9432560","access_level":"public","create_time":"$D2026-09-07T12:14:57.535Z","update_time":"$D2026-09-07T20:11:22.264Z","view_time":null,"first_public_time":"$D2026-09-07T20:12:32.637Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"01e9dc629c9c51f6","login":"aaizemberg","name":"Ariel Aizemberg","avatar_url":"https://avatars-next.observableusercontent.com/ed6ddd5070826f572b9138f152d0a8186bfae935f311bbf11300e1fa71eae43c","tier":"starter_2024"},"version":32,"publish_version":32,"role":null,"authored":false,"authors":[{"type":"individual","id":"c03f1f47fba01d23","login":"aaizemberg","name":"Ariel Aizemberg","avatar_url":"https://avatars-next.observableusercontent.com/ed6ddd5070826f572b9138f152d0a8186bfae935f311bbf11300e1fa71eae43c","tier":null}],"members":[{"type":"team","id":"01e9dc629c9c51f6","login":"aaizemberg","name":"Ariel Aizemberg","avatar_url":"https://avatars-next.observableusercontent.com/ed6ddd5070826f572b9138f152d0a8186bfae935f311bbf11300e1fa71eae43c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Text color based on background color","cells":[{"id":1,"value":"# Text color based on background color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":5,"value":"display(bgColor);\ndisplay(hexToRgb(bgColor));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":3,"value":"const bgColor = view(Inputs.color({label: \"Color de fondo\", value: \"#3366cc\"}));","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"},{"id":6,"value":"const card = html`

\n Example text - Lorem Ipsum
\n Color del fondo: ${bgColor}
\n Luminancia: ${luminance.toFixed(3)}
\n Contraste blanco: ${contrastWithWhite.toFixed(2)} — Contraste negro: ${contrastWithBlack.toFixed(2)}
\n Color elegido: ${textColor}\n

`;\n\ndisplay(card);","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}} 30:"$2f:body"