2e:null 2f:["$","title",null,{"children":"Section Cuts for Color Contrast | Spencer | Observable"}] 34:[] 32:{"id":"cbb78d63114e218a","slug":"section-cuts-for-color-contrast","title":"Section Cuts for Color Contrast","thumbnail":"50fb510cbe8a429460a17ec4aedf02688b58202689a376e5dd2ec2764e49d56c","access_level":"public","create_time":"$D2021-04-08T21:26:11.798Z","update_time":"$D2025-09-11T21:07:35.425Z","view_time":null,"first_public_time":"$D2021-04-08T21:51:06.939Z","has_unpublished_edits":null,"fork":{"id":"0440a68d8d06658b","slug":"contrast-studies","title":"Contrast Studies","owner":{"id":"176964fb427d7dd9","login":"spensaur","name":"Spencer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"176964fb427d7dd9","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":"starter_2024"},"version":2294,"publish_version":2294,"role":null,"authored":false,"authors":[{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null}],"members":[{"type":"individual","id":"a43e64cfd8083fa1","login":"spensaur","name":"Spencer","avatar_url":"https://avatars-next.observableusercontent.com/c3e71f997a9979069c2283d021568ef874ec5d04e8caff8abe675bb6b9892eca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ee010a6856c038fb","slug":"web-accessibility","title":"Web Accessibility","owner":{"id":"176964fb427d7dd9","login":"spensaur","name":"Spencer"}},"type":"notebook","body":{"title":"Section Cuts for Color Contrast","cells":[{"id":0,"value":"title = md`# Section Cuts for Color Contrast\n> In this example, imagine taking a \"cut\" through the image horizontally and vertically in order to measure all the color values along each. Use the crosshair below to move the cursor point across the image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"html`${viewof imageSelector}${viewof image}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md`Click around (or click and drag the crosshair) to adjust where we're slicing the image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof xy = xySlider({\n min: 0,\n step: 1,\n xmax: imageData.width,\n ymax: imageData.height,\n theme:\n theme_default +\n `:scope {\n width: ${Math.min(width, imageData.width)}px;\n height: ${imageData.height}px;\n color: #3b99fc;\n --thumb-size: 15px;\n padding: .5em;\n}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1857,"value":"abstract = html`

${image2canvas(renderCrosshair(imageData))}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"Top to Bottom in `RGBA`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2272,"value":"colView = {\n const tickInterval =\n Math.round(Math.floor(d3.max(colPlotData, (d) => d.index) / 20) / 5) * 5;\n\n return html`${Plot.plot({\n width,\n height: 150,\n color: {\n domain: [\"alpha\", \"red\", \"green\", \"blue\"],\n range: [\"lightgrey\", \"red\", \"green\", \"blue\"],\n legend: true\n },\n y: {\n ticks: 5\n },\n x: {\n label: \"pixel offset\",\n tickFormat: (d) => (d % tickInterval === 0 ? d : null)\n },\n marks: [\n Plot.barY(colPlotData, { x: \"index\", y: \"value\", fill: \"channel\" }),\n Plot.ruleY([0])\n ]\n })}${colorBand(crosshair.columnColors)}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1882,"value":"md`When viewed like this, the \"contrast\" here is simply the different in height between two columns in the graph – the greater the difference, the more contrast.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1948,"value":"md`You can also see how gradients and aliasing affect color contrast in the color band, by \"ramping\" the peak from one value to another. Left to right in \\`RGBA\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2160,"value":"rowView={\n const tickInterval =\n Math.round(Math.floor(d3.max(rowPlotData, (d) => d.index) / 20) / 5) * 5;\n\n return html`${Plot.plot({\n width,\n height: 150,\n color: {\n domain: [\"alpha\", \"red\", \"green\", \"blue\"],\n range: [\"lightgrey\", \"red\", \"green\", \"blue\"],\n legend: true\n },\n y: {\n ticks: 5\n },\n x: {\n label: \"pixel offset\",\n tickFormat: (d) => (d % tickInterval === 0 ? d : null)\n },\n marks: [\n Plot.barY(rowPlotData, { x: \"index\", y: \"value\", fill: \"channel\" }),\n Plot.ruleY([0])\n ]\n })}${colorBand(crosshair.rowColors)}\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"value":"md`### under the hood`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2086,"value":"imageData = getImageData(image)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1895,"value":"mdPlus`This can be made way more efficient by dealing with the raw ImageData.data collection natively.\n\n- [ ] convert the crosshair to a .reduce() on the imagedata and cut out redundant function calls`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"crosshair = ({\n rowColors: colorsForRow(imageData, xy[1]),\n columnColors: colorsForColumn(imageData, xy[0]),\n pointColor: colorAtPoint(imageData, xy[0], xy[1])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"renderCrosshair = img => {\n return new ImageData(\n img.data.map((v, i, arr) => {\n if ((i + 1) % 4 === 0) return 255; // alpha channel: always opaque\n\n const px = Math.floor(i / 4);\n const row = Math.floor(px / img.width);\n const col = Math.floor(px % img.width);\n // black tick for the row/col\n if (col === 0 && Math.abs(row - xy[1]) <= 1) {\n return 0;\n } else if (row === 0 && Math.abs(col - xy[0]) <= 1) {\n return 0;\n }\n\n return Math.abs(row - xy[1]) > 0 && Math.abs(col - xy[0]) > 0 ? 255 : v;\n }),\n img.width\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"rowColorData = {\n let d = crosshair.rowColors.map(([red, green, blue, alpha], i) => ({\n name: i,\n red,\n green,\n blue,\n alpha,\n total: red + green + blue + alpha\n }));\n d.columns = ['name', 'alpha', 'red', 'green', 'blue'];\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2176,"value":"rowPlotData = crosshair.rowColors.reduce(crosshairToPlotData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"crosshairToPlotData = (records, [r, g, b, a], i) => {\n return records.concat([\n { index: i, channel: \"red\", value: r },\n { index: i, channel: \"green\", value: g },\n { index: i, channel: \"blue\", value: b },\n { index: i, channel: \"alpha\", value: a }\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"colColorData = {\n let d = crosshair.columnColors.map(([red, green, blue, alpha], i) => ({\n name: i,\n red,\n green,\n blue,\n alpha,\n total: red + green + blue + alpha\n }));\n d.columns = ['name', 'alpha', 'red', 'green', 'blue'];\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"colPlotData = crosshair.columnColors.reduce(crosshairToPlotData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"color = d3.scaleOrdinal(\n [\"red\", \"green\", \"blue\", \"alpha\"],\n ['red', \"green\", \"blue\", \"lightgrey\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"// combine RGB pixel values\ncolorBand = colors =>\n html`

${colors\n .map(\n ([r, g, b, a]) =>\n `

`\n )\n .join(\"\")}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"sectionHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import { xySlider, theme_default } from \"@mootari/2d-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"colorsForRow = (image, row) =>\n Array.from(new Array(image.width), (e, col) => colorAtPoint(image, col, row))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"colorsForColumn = (imagedata, col) =>\n Array.from(new Array(imagedata.height), (e, row) =>\n colorAtPoint(imagedata, col, row)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2137,"value":"// get placeholder data\nimport { viewof imageSelector, viewof image } from \"@sgregson/a11y-utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2076,"value":"image2canvas = (imageData, width) => {\n const context = DOM.context2d(imageData.width, imageData.height, 1);\n context.putImageData(imageData, 0, 0);\n if (!width || imageData.width <= width) return context.canvas;\n\n const height = (imageData.height * width) / imageData.width;\n const contextr = DOM.context2d(width, height, 1);\n contextr.drawImage(context.canvas, 0, 0, width, height);\n return contextr.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"colorAtPoint = (imagedata, x, y) =>\n getRGBAIndicesForCoord(x, y, imagedata.width).map(idx => imagedata.data[idx])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"getRGBAIndicesForCoord = (x, y, width) => {\n const red = y * (width * 4) + x * 4;\n return [red, red + 1, red + 2, red + 3];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { getImageData } from \"@ehouais/how-to-get-image-data-from-an-url-or-a-file\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"formatPercent = d3.format(\".2%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"_ = (await import(\"https://unpkg.com/underscore@1.10.1/modules/index-all.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"import { Select, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1539,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"import { styles, toc, mdPlus } from \"@sgregson/utils\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"styles","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"