2d:null 2e:["$","title",null,{"children":"Color study: Contrast | Juan Emilio Miralles | Observable"}] 33:T7af,displayColorsObjGo = (colors_raw = [], method, bg, fg) => { let colors = colors_raw.slice(0, randomPaletteNumber); if(method == "palette") { return svg`${colors.map((color, i) => svg`` )}` } else if(method == "palettetext") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${print_ratio(color.code, bg, 2)} `, svg` ${print_ratio(fg, color.code, 2)} ` ]}` )}` } else if(method == "palettecodes") { return svg`${colors.map((color, i) => svg`${[ svg``, svg` ${color.code} ` ]}` )}` } else if(method == "moon") { return svg`${colors.map((color, i) => svg`` )}` } else if(method == "text") { return svg`${[ svg``, svg`${print_ratio(colors[0].code, colors[1].code)}` ]}` } else if(method == "textmoon") { return svg`${[ svg`${colors.map((color, i) => svg`` )}`, svg` ${print_ratio(colors[0].code, colors[1].code)} ` ]}` } }34:T7f1,plotRed = (display_mode = "none", pWidth = plotWidth) => { if (display_mode == "contrast ratios") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(redSpread(spreadRange), { x: "g", y: "b", fill: d => toColorCodeString([form3.r, d.g, d.b]) }), Plot.text(redSpread(spreadRange), { x: "g", y: "b", text: "cr", fill: form3.bg }) ] }); } else if (display_mode == "color codes") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(redSpread(spreadRange), { x: "g", y: "b", fill: d => toColorCodeString([form3.r, d.g, d.b]) }), Plot.text(redSpread(spreadRange), { x: "g", y: "b", text: d => toColorCodeString([form3.r, d.g, d.b]), fill: form3.bg }) ] }); } else { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, label: null, marks: [ Plot.axisX({ticks: []}), Plot.axisY({ticks: []}), Plot.cell(redSpread(spreadRange), { x: "g", y: "b", fill: d => toColorCodeString([form3.r, d.g, d.b]) }), ] }); } }35:T7fd,plotGreen = (display_mode = "none", pWidth = plotWidth) => { if (display_mode == "contrast ratios") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(greenSpread(spreadRange), { x: "r", y: "b", fill: d => toColorCodeString([d.r, form3.g, d.b]) }), Plot.text(greenSpread(spreadRange), { x: "r", y: "b", text: "cr", fill: form3.bg }) ] }); } else if (display_mode == "color codes") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(greenSpread(spreadRange), { x: "r", y: "b", fill: d => toColorCodeString([d.r, form3.g, d.b]) }), Plot.text(greenSpread(spreadRange), { x: "r", y: "b", text: d => toColorCodeString([d.r, form3.g, d.b]), fill: form3.bg }) ] }); } else { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, label: null, marks: [ Plot.axisX({ticks: []}), Plot.axisY({ticks: []}), Plot.cell(greenSpread(spreadRange), { x: "r", y: "b", fill: d => toColorCodeString([d.r, form3.g, d.b]) }), ] }); } }36:T7f7,plotBlue = (display_mode = "none", pWidth = plotWidth) => { if (display_mode == "contrast ratios") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(blueSpread(spreadRange), { x: "r", y: "g", fill: d => toColorCodeString([d.r, d.g, form3.b]) }), Plot.text(blueSpread(spreadRange), { x: "r", y: "g", text: "cr", fill: form3.bg }) ] }); } else if (display_mode == "color codes") { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, marks: [ Plot.axisX({ticks: [], anchor: "top", labelAnchor: "right"}), Plot.axisY({ticks: [], anchor: "left", labelAnchor: "bottom"}), Plot.cell(blueSpread(spreadRange), { x: "r", y: "g", fill: d => toColorCodeString([d.r, d.g, form3.b]) }), Plot.text(blueSpread(spreadRange), { x: "r", y: "g", text: d => toColorCodeString([d.r, d.g, form3.b]), fill: form3.bg }) ] }); } else { return Plot.plot({ width: pWidth, height: pWidth, marginTop: plotMarginTop, marginRight: plotMarginRight, marginBottom: plotMarginBottom, marginLeft: plotMarginLeft, label: null, marks: [ Plot.axisX({ticks: []}), Plot.axisY({ticks: []}), Plot.cell(blueSpread(spreadRange), { x: "r", y: "g", fill: d => toColorCodeString([d.r, d.g, form3.b]) }), ] }); } }37:[] 31:{"id":"5f1934e44a5d5fcd","slug":"color-study-i","title":"Color study: Contrast","thumbnail":"5d3dbf728197211a3e4d0b18c31af361cbb2cc84acf1c8ad926aee1b97a4b8d3","access_level":"public","create_time":"$D2023-04-27T08:15:21.984Z","update_time":"$D2023-08-12T11:21:32.664Z","view_time":null,"first_public_time":"$D2023-04-27T08:15:21.984Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":"starter_2024"},"version":2984,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null}],"members":[{"type":"individual","id":"6efa64c483b8aa94","login":"je-miralles","name":"Juan Emilio Miralles","avatar_url":"https://avatars-next.observableusercontent.com/ec2feb60ea833ea7d71ae9033ac5ff5eca3417341ffc2be8d3a9a9cf4243b33d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"21e13771adf6078e","slug":"finished-ish","title":"finished(ish)","owner":{"id":"6031f6f711e0c46c","login":"je-miralles","name":"Juan Emilio Miralles"}},"type":"notebook","body":{"title":"Color study: Contrast","cells":[{"id":0,"value":"# Color study: Contrast\n\nSee also\n* [Color randomizer](https://observablehq.com/@je-miralles/color-randomizer)\n* [Color study: Hue, saturation, lightness](https://observablehq.com/@je-miralles/color-study-ii)\n* [Color study: Interpolation](https://observablehq.com/@je-miralles/color-interpolation)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"displayColors(bloodmoon)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"Contrast, a ratio of scaled luminances.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"Bloodmoon ratio: (${bmNum()} + 0.05) / (${bmDen()} + 0.05)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"displayColors([bloodmoon[form2.bloodD], bloodmoon[form2.bloodL]], \"textmoon\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"viewof form2 = Inputs.form({\n bloodD: Inputs.range([0, bloodmoon.length-1], {label: \"background index\", step: 1, value: \"3\"}),\n bloodL: Inputs.range([0, bloodmoon.length-1], {label: \"foreground index\", step: 1, value: \"14\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"It ranges between 1 and 21. To see things against each other easily they should have a ratio of [more than 4.5](https://wcag.com/designers/1-4-3-color-contrast/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"displayColors([form3.bg, toColorCodeString([form3.r, form3.g, form3.b])], \"textmoon\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"viewof form3 = Inputs.form({\n bg: Inputs.color({label: \"background color\", value: bloodmoon[3]}),\n r: Inputs.range([0, 255], {label: \"r\", step: 1, value: [toRGBarray(bloodmoon[3])[0]]}),\n g: Inputs.range([0, 255], {label: \"g\", step: 1, value: [toRGBarray(bloodmoon[3])[1]]}),\n b: Inputs.range([0, 255], {label: \"b\", step: 1, value: [toRGBarray(bloodmoon[3])[2]]}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"none\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1124,"value":"For each color channel chosen above, we map the orthogonal colorspaces.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":841,"value":"viewof numSpreadDivs = {\n if (form3.display_mode == \"contrast ratios\") {\n return Inputs.range([24, 256], {label: \"granularity\", step: 2, value: 36});\n } else if (form3.display_mode == \"color codes\") {\n return Inputs.range([34, 256], {label: \"granularity\", step: 2, value: 36});\n } else {\n return Inputs.range([4, 256], {label: \"granularity\", step: 2, value: 36})\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"plotColorSpreads(form3.display_mode)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"Luminance is most strongly affected by greens, then reds, then blues: \n> ${tex`L = 0.2126 R + 0.7152 G + 0.0722 B`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1356,"value":"## Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"A simple random palette with some adjustable parameters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1782,"value":"viewof randomPicker = Inputs.form({\n min: Inputs.range([0, 255], {label: \"min\", step: 1, value:0}),\n max: Inputs.range([0, 255], {label: \"max\", step: 1, value:255}),\n rscale: Inputs.range([1, 100], {label: \"r scaling\", step: 0.1, value: 1}),\n gscale: Inputs.range([1, 100], {label: \"g scaling\", step: 0.1, value: 1}),\n bscale: Inputs.range([1, 100], {label: \"b scaling\", step: 0.1, value: 1}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2816,"value":"viewof randomPicker2 = Inputs.form({\n bg: Inputs.color({label: \"background color\", value: \"#000000\"}),\n fg: Inputs.color({label: \"foreground color\", value: \"#ffffff\"}),\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"none\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2937,"value":"viewof randomize = Inputs.button(\"randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"showRandom = {\n let method = \"palette\";\n if (randomPicker2.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (randomPicker2.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColorsObj(randomPalette, method, randomPicker2.bg, randomPicker2.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"displayColors([randomPicker2.bg, randomPicker2.fg], \"textmoon\", randomPicker2.bg, randomPicker2.fg)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"Out of ${nStat} samples:\n\nThe mean background contrast is ${d3.mean(paletteBgCrs(randomPalette)).toFixed(3)} with deviation ${d3.deviation(paletteBgCrs(randomPalette)).toFixed(3)}. Pass rate: ${(checkRule(paletteBgCrs(randomPalette)).filter(Boolean).length / nStat * 100).toFixed(2)}%\n\nThe mean foreground contrast is ${d3.mean(paletteFgCrs(randomPalette)).toFixed(3)} with deviation ${d3.deviation(paletteFgCrs(randomPalette)).toFixed(3)}. Pass rate: ${(checkRule(paletteFgCrs(randomPalette)).filter(Boolean).length / nStat * 100).toFixed(2)}%","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"### Math\n\n> ${tex`Cr = \\frac{Ll + 0.05}{Dl + 0.05}`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1148,"value":"Plot.plot({\n width: 400,\n height: 400,\n marks: [\n Plot.lineY(cr, {x: \"luminance\", y: \"contrast ratio\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"viewof lum = Inputs.range([0, 1], {label: \"\\'other\\' luminance\", step: 0.01, value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2093,"value":"Starting from maximum contrast, as we increase the \"dark\" luminance the contrast ratio falls off quickly.\n\nStarting from zero contrast, as we increase the \"light\" luminance the contrast ratio increases linearly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":548,"value":"What if we fix the ${tex`Cr`} at our minimum desired ratio, 4.5?\n\n> ${tex`\n L_l = Cr(D_l + 0.05) - 0.05 \\\\\n L_l = 4.5D_l + ${(4.5*0.05-0.05).toFixed(3)} \\\\\n`}\n\n> ${tex`\n D_l = (L_l + 0.05)/Cr - 0.05 \\\\\n D_l = L_l/4.5 ${(0.05/4.5 - 0.05).toFixed(3)}\n`}\n\nwe have simple equations for our nearest available luminance for both the lighter and darker shades.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1159,"value":"cr = range(0, 1, 0.01).map((v) => ({\n \"luminance\": v,\n \"contrast ratio\": c_ratio(lum, v)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1358,"value":"### Randomization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1784,"value":"randomColor = (min = 5, max = 110, rscale = 1, gscale = 1, bscale = 1, randFunc) => {\n const randVal = (scale) => Math.abs(Math.floor(scale * randFunc() * (max - min) + min));\n let r = randVal(rscale);\n let g = randVal(gscale);\n let b = randVal(bscale);\n if (r > max) { r = max; }\n if (r < min) { r = min; }\n if (g > max) { g = max; }\n if (g < min) { g = min; }\n if (b > max) { b = max; }\n if (b < min) { b = min; }\n return toColorCodeString([r, g, b]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"makeColor = (min, max, rscale, gscale, bscale, bg, fg, randFunc) => {\n let color = randomColor(min, max, rscale, gscale, bscale, randFunc);\n return ({\n code: color,\n r: toRGBarray(color)[0],\n g: toRGBarray(color)[1],\n b: toRGBarray(color)[2],\n bgcr: print_ratio(bg, color, 2),\n fgcr: print_ratio(fg, color, 2)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"makePalette = (number=16, min=0, max=255, rscale=1, gscale=1, bscale=1, bg=bloodmoon[1], fg=bloodmoon[3], randFunc=Math.random) => {\n return Array.from({ length: number }, () => makeColor(min, max, rscale, gscale, bscale, bg, fg, randFunc));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2066,"value":"randNorm = d3.randomNormal(0.5, 0.25)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"nStat = 10000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1497,"value":"randomPalette = {\n randomize;\n return makePalette(nStat, randomPicker.min ,randomPicker.max, randomPicker.rscale, randomPicker.gscale, randomPicker.bscale, randomPicker2.bg, randomPicker2.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"### Conversions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"toRGBarray = (colorCodeString) => {\n let r = colorCodeString.slice(1,3);\n let g = colorCodeString.slice(3,5);\n let b = colorCodeString.slice(5,7);\n return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"toColorCodeString = (rgb = []) => {\n return \"#\" + rgb[0].toString(16).padStart(2, '0') + rgb[1].toString(16).padStart(2, '0') + rgb[2].toString(16).padStart(2, '0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"getColorsObjArr = (colors = [], bg=bloodmoon[3], fg=bloodmoon[1]) => {\n return colors.map((d) => getColorObj(d, bg, fg));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"getColorObj = (code, bg=bloodmoon[3], fg=bloodmoon[1]) => {\n return {\n code: code,\n r: toRGBarray(code)[0],\n g: toRGBarray(code)[1],\n b: toRGBarray(code)[2],\n bgcr: print_ratio(bg, code, 2),\n fgcr: print_ratio(fg, code, 2)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"### Contrast and luminance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"c_ratio = (L1, L2) => {\n return L1 > L2 ? (L1 + 0.05) / (L2 + 0.05) : (L2 + 0.05) / (L1 + 0.05);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"luminance = (rgb = []) => {\n const RsRGB = rgb[0]/255;\n const GsRGB = rgb[1]/255;\n const BsRGB = rgb[2]/255;\n const R = RsRGB <= 0.03928 ? RsRGB/12.92 : ((RsRGB+0.055)/1.055) ** 2.4;\n const G = GsRGB <= 0.03928 ? GsRGB/12.92 : ((GsRGB+0.055)/1.055) ** 2.4;\n const B = BsRGB <= 0.03928 ? BsRGB/12.92 : ((BsRGB+0.055)/1.055) ** 2.4;\n return 0.2126 * R + 0.7152 * G + 0.0722 * B;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"checkRule = (crs) => { return crs.map((cr) => { return cr >= 4.5 ? true : false }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"### Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1733,"value":"randomPaletteNumber = Math.floor(width / (w/2) - 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2560,"value":"bmDen = () => {\n if (bml1 < bml2) {\n return bml1;\n } else {\n return bml2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2583,"value":"bmNum = () => {\n if (bml1 >= bml2) {\n return bml1;\n } else {\n return bml2;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2573,"value":"bml1 = luminance(toRGBarray(bloodmoon[form2.bloodD])).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2564,"value":"bml2 = luminance(toRGBarray(bloodmoon[form2.bloodL])).toFixed(3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"paletteBgCrs = (palette) => { return palette.map((d) => { return d.bgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"paletteFgCrs = (palette) => { return palette.map((d) => { return d.fgcr }) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2911,"value":"print_rgb = (code) => {\n const rgb = toRGBarray(code)\n return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"print_ratio = (color0, color1, width = 3) => {\n return c_ratio(luminance(toRGBarray(color0)), luminance(toRGBarray(color1))).toFixed(width);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"displayColors = (colors=[], method=\"palette\", bg=bloodmoon[3], fg=bloodmoon[1]) => {\n return displayColorsObj(getColorsObjArr(colors, bg, fg), method, bg, fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"displayColorsObj = (colors=[], method=\"palette\", bg=bloodmoon[3], fg=bloodmoon[1]) => {\n return svg`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1652,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"w = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"h = 75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"plotColorSpreads = (display_mode = \"none\") => {\n if (plotWidth > minPlotWidth) {\n return svg`\n `\n } else {\n return svg`\n `\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":833,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2151,"value":"minPlotWidth = 190","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"plotWidth = width/3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2411,"value":"plotMarginTop = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2436,"value":"plotMarginRight = 6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2351,"value":"plotMarginBottom = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2333,"value":"plotMarginLeft = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2974,"value":"drawGreenClean = () => {\n return Plot.plot({\n width: 500,\n height: 500,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0,\n marginLeft: 0,\n label: null,\n marks: [\n Plot.axisX({ticks: []}),\n Plot.axisY({ticks: []}),\n Plot.cell(greenSpread(spreadRange), {\n x: \"r\",\n y: \"b\",\n fill: d => toColorCodeString([d.r, form3.g, d.b])\n }),\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"### Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2545,"value":"bloodmoon = [\"#2f1627\", \"#3b2131\", \"#472c3b\", \"#533745\", \"#5f424f\", \"#6b4d59\", \"#775863\", \"#83636d\", \"#8f6e77\", \"#9b7981\", \"#a7848b\", \"#b38f95\", \"#bf9a9f\", \"#cba5a9\", \"#d7b0b3\", \"#e3bbbd\", \"#efc6c7\", \"#f4cfcf\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"spreadRange = d3.cross(range(0,255,numSpreadDivs), range(0,255,numSpreadDivs))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"redSpread = (spreadRange) => {\n return spreadRange.map((i, j) => ({\n g: i[0],\n b: i[1],\n cr: print_ratio(form3.bg, toColorCodeString([form3.r, i[0], i[1]]), 2)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"greenSpread = (spreadRange) => {\n return spreadRange.map((i, j) => ({\n r: i[0],\n b: i[1],\n cr: print_ratio(form3.bg, toColorCodeString([i[0], form3.g, i[1]]), 2)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"blueSpread = (spreadRange) => {\n return spreadRange.map((i, j) => ({\n r: i[0],\n g: i[1],\n cr: print_ratio(form3.bg, toColorCodeString([i[1], i[0], form3.b]), 2)\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"bwroygbiv = [\"#000000\", \"#FFFFFF\", \"#FF0000\", \"#FF8000\", \"#FFFF00\", \"#00FF00\", \"#0000FF\", \"#5040FF\", \"#8000FF\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2804,"value":"viewof aPicker = Inputs.form({\n display_mode: Inputs.radio([\"contrast ratios\", \"color codes\", \"none\"], {label: \"show\", value: \"none\"})\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"showRainbow = {\n let method = \"palette\";\n if (aPicker.display_mode == \"contrast ratios\") {\n method = \"palettetext\";\n } else if (aPicker.display_mode == \"color codes\") {\n method = \"palettecodes\";\n }\n return displayColors(bwroygbiv, method, randomPicker2.bg, randomPicker2.fg);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"## References\n\n* https://wcag.com/designers/1-4-3-color-contrast/\n* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"