31:[] 2f:{"title":"Color Contrast Bitmask","cells":[{"id":2053,"value":"title = md`# Color Contrast Bitmask\n> View the local contrast ratios of an image to see the maximum contrast between every pixel and its neighbor. Useful for determining whether text has enough contrast over a background image _(images stay on your computer - they are processed entirely clientside)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2128,"value":"html`${viewof imageSelector}${viewof image}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2210,"value":"{\n const data = image.height >= image.width ? d3.transpose(table) : table;\n\n return htl.html`

${data.map(\n (row) =>\n htl.html.fragment`${row.reduce((acc, el, i) => {\n const TAG =\n i === 0\n ? htl.html.fragment``\n : htl.html.fragment``;\n return htl.html.fragment`${acc} ${TAG}`;\n }, htl.html.fragment``)}`\n )}

${el}	${el}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2167,"value":"table = [\n [html`[contrast ratio]`, \"image\"],\n [\"Original\", md`![](${image.src})`],\n [\n md`**\\`>= 3:1\\` Non-text + Large text contrast minimum**
All interative elements (buttons, links, etc) and large text (headings) should be legible in this view of the image:`,\n thresholdImage(pixelContrast, contrastFilter(3))\n ],\n [\n md`**\\`>= 4.5:1\\` Text Contrast minimum**
all text should be legible in this view of the image:`,\n thresholdImage(pixelContrast, contrastFilter(4.5))\n ],\n [\n md`**\\`>= 7:1\\` AAA Text Contrast minimum**
all headings should be legible in this view of the image:`,\n thresholdImage(pixelContrast, contrastFilter(7))\n ]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":834,"value":"md`You may notice **missing edges** in places you'd expect a consistent border – this is generally due to a shadow or gradient. The contrast is still present, just spread over multiple pixels.\n\nTo compensate for that spread, adjust the slider below to increase the \"brush size\" of the contrast filter (try to make it as large as your gradient's spread) and you should see those edges fill in:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"viewof contrastBrushSize = Range([1, 8], {\n step: 1,\n value: 1,\n label: md`**Contrast brush px** (can be slow to update ⚠️ )`,\n description: \"Adj\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"md`The histogram chart below shows how many pixels (y-axis) are of a given contrast ratio (x-axis). Increasing the contrast brush size generally thickens higher-contrast areas of the chart, lowering it thins them out:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"viewof d = rangeSlider(pixelContrast, (e) => e, {\n height: 150,\n yTicks: 5,\n yScale: d3.scalePow().exponent(0.25),\n xScale: d3.scalePow().exponent(0.1)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"md`Drag across the chart below to select a **custom contrast range**. ${\n d3.extent(d.data).every((e, i) => e === d.range[i])\n ? `The image has contrast ranging from \\`${\n d3.extent(pixelContrast)[0]\n }:1\\` to \\`${d3.extent(pixelContrast)[1].toFixed(2)}:1\\``\n : `\\`${formatPercent(\n d.data.length / pixelContrast.length\n )}\\` of the image falls within contrast ratios \\`${d.range[0].toFixed(\n 2\n )}:1\\` to \\`${d.range[1].toFixed(2)}:1\\``\n}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"viewof c = {\n if (d3.extent(d.data).every((e, i) => e === d.range[i])) {\n return md``;\n }\n const contrastInRange = pixelContrast.map(contrastRatio => {\n if (d.range[0] <= contrastRatio && contrastRatio <= d.range[1]) {\n return [255, 0, 0, 255]; // red for selected portion of the range\n }\n return [255, 255, 255, 255]; // white: no contrast\n });\n\n const filteredLuminanceMask = new ImageData(\n new Uint8ClampedArray(contrastInRange.flat()),\n imageData.width\n );\n const ctx = DOM.context2d(imageData.width + 5, imageData.height + 5, 1);\n ctx.canvas.value = ctx;\n // ctx.canvas.style.cursor = \"crosshair\";\n // Draw the blank canvas background.\n ctx.fillStyle = \"white\";\n\n ctx.putImageData(filteredLuminanceMask, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"### under the hood","pinned":false,"hidden":false,"mode":"md"},{"id":1317,"value":"md`We start with the image data from the image above:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"imageData = getImageData(image)","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"md`expanding that ^ shows a \\`data\\` array with \\`${\n imageData.data.length\n}\\` entries – one each for the red, green, blue, and alpha channels of every pixel.\n\nThree pixels of data would look like: \\`[R,G,B,A,R,G,B,A,R,G,B,A]\\` great for computers but a little non-intuitive for humans. To make it a little more usable, we chunk it by pixel \\`${JSON.stringify(\n // prettier-ignore\n _.chunk([\"R\", \"G\", \"B\", \"A\", \"R\", \"G\", \"B\", \"A\", \"R\", \"G\", \"B\", \"A\"], 4)\n)}\\` as in:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"chunkedImgData = _.chunk(imageData.data, 4) // convert Uint8ClampedArray into array of [RGBA]","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`... and then convert every pixel to its lightness value, using the relative luminance function defined in \\`WCAG2.1\\`. [@sebastien](https://observablehq.com/@sebastien) already created a function we can conveniently import:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import { reluminance } from \"@sebastien/srgb-rgb-gamma\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":623,"value":"pixelLuminance = chunkedImgData.map(([r, g, b, a]) => {\n // transparent images seem to work - check the popcorn demo image\n // if (a !== 255) throw \"Convert transparent images to fully opaque\";\n\n // convert rgba to luminance\n return reluminance([r, g, b]);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1306,"value":"notice(\n md`click through to that module for an excellent deep dive into colorspace and its impact on perception. Highly recommended.`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"md`...with that, we can now determine the contrast between any two pixels in the image!\n\nHowever, selecting _which_ pixels to compare gets tricky - answering questions like \"is there enough contrast between the foreground and background?\" isnt always as simple as measuring pixels next to each other.\n\ncontext | problem\n---|---\ngradients | you'll need to measure contrast across the entire gradient in order to determine whether it's compliant.\nboundary conditions | which may be easy for us to see, can be difficult to define for a computer, but check out the next entry on [Cross Sections](#hSectionCutDiagrams) which tries to solve for that.\n\nUltimately, we use this \\`getAdjacentValues\\` function to find the luminance of every adjacent pixel, looking something like:\n\n~~~js\n// for a brush size of \"1\"\nx|1\n2|3\n\n// for a brush size of \"2\"\n x| 1| 2\n 3| 4| 5\n 6| 7| 8\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2287,"value":"getAdjacentValues = (i, arr, width, brushSize = contrastBrushSize) => {\n // given a flat array representing a 2d space of given width,\n // will yield the values of the \"box\", right and down, the `i`, provided a brushSize\n // x|1\n // 2|3\n\n // an array of indexes\n let targets = [];\n let iRow = Math.floor(i / width),\n iCol = i % width,\n rows = Math.floor(arr.length / width);\n\n const brushWidth = brushSize + 1;\n\n for (let row = iRow; row < Math.min(iRow + brushWidth, rows); row++) {\n for (let col = iCol; col < Math.min(iCol + brushWidth, width); col++) {\n targets.push(row * width + col);\n }\n }\n\n // return values which exist in `arr`\n return targets.map((index) => arr[index]); //.reduce((acc, el) => (arr[el] ? acc.concat(arr[el]) : acc), []);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"pixelContrast = {\n const contrasts = pixelLuminance.map((thisLum, i, arr) => {\n const vals = getAdjacentValues(i, arr, imageData.width);\n const darkest = Math.min(...vals);\n const lightest = Math.max(...vals);\n const delta =\n lightest - thisLum >= thisLum - darkest\n ? thisLum / lightest\n : darkest / thisLum;\n\n const contrastRatio = 1 / delta;\n\n return contrastRatio;\n });\n\n // preserve the width parameter for use in thresholdImage\n contrasts.width = imageData.width;\n contrasts.height = imageData.height;\n\n return contrasts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":657,"value":"// colorizedContrast = pixelContrast.map(contrastRatio => {\n// if (contrastRatio < 3) {\n// return [255, 255, 255, 255]; // white: no contrast\n// } else if (contrastRatio < 4.5) {\n// return [170, 170, 170, 255]; // ui contrast\n// } else if (contrastRatio < 7) {\n// return [85, 85, 85, 255]; // text contrast\n// } else {\n// return [0, 0, 0, 255]; // black: super contrast\n// }\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"// given a contrast range, return a map function which turns matching contrasts black\ncontrastFilter = (min = 1, max = Infinity) => r => {\n if (min <= r && r <= max) {\n return [0, 0, 0, 255]; // highlight with black\n }\n return [255, 255, 255, 255];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"thresholdImage = (pxContrast, filter) => {\n const ctx = DOM.context2d(pxContrast.width, pxContrast.height, 1);\n const mask = new ImageData(\n new Uint8ClampedArray(pxContrast.map(filter).flat()),\n pxContrast.width\n );\n\n return image2canvas(mask, pxContrast.width);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"// viewof unsplash = {\n// const i = FileAttachment(\"lance-anderson-NrDYqseeAxk-unsplash.jpg\");\n// const r = html`${await i.image()}Photo by Lance Anderson on Unsplash\n// `;\n// r.value = getImageData(await i.blob());\n// return r;\n// }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1100,"value":"getPixelContrast = img => {\n const chunks = _.chunk(img.data, 4) // convert Uint8ClampedArray into array of [RGBA]\n .map(([r, g, b, a], i, arr) => {\n // convert rgba to luminance\n if (a !== 255) throw \"Convert transparent images to fully opaque\";\n\n const thisLum = reluminance([r, g, b]);\n const vals = getAdjacentValues(i, arr, img.width);\n const darkest = Math.min(...vals);\n const lightest = Math.max(...vals);\n const delta =\n lightest - thisLum >= thisLum - darkest\n ? thisLum / lightest\n : darkest / thisLum;\n\n const contrastRatio = 1 / delta;\n\n return contrastRatio;\n });\n\n chunks.width = img.width;\n chunks.height = img.height;\n\n return chunks;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":782,"value":"// a fork of @bumbeishvili/utils stripped of console logs and an additional xScale parameter\nimport { rangeSlider } from \"@sgregson/data-driven-range-sliders\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`## Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2262,"value":"import { notice } from \"@sgregson/components\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2141,"value":"// get placeholder data\nimport { viewof imageSelector, viewof image } from \"@sgregson/a11y-utils\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1496,"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"},{"id":1424,"value":"formatPercent = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"_ = (await import(\"https://unpkg.com/underscore@1.10.1/modules/index-all.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { getImageData } from \"@ehouais/how-to-get-image-data-from-an-url-or-a-file\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"import { Select, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1539,"value":"import { imageInput } from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"import { styles, toc } from \"@sgregson/utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":984,"value":"styles","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}