2e:null 2f:["$","title",null,{"children":"Generating Random Contrasting Colors Is Harder than It Looks | Christian Scott | Observable"}] 34:[] 32:{"id":"9195c512a85ada0d","slug":"generating-random-contrasting-colors-is-harder-than-it-loo","title":"Generating Random Contrasting Colors Is Harder than It Looks","thumbnail":"1dc3b0851056daeaa116d51ea81541d1d9e3239147308a6a0fbde464d8188fa3","access_level":"public","create_time":"$D2018-03-13T00:08:22.161Z","update_time":"$D2018-03-13T09:24:14.560Z","view_time":null,"first_public_time":"$D2018-03-13T02:16:37.368Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3451ebdb3d99abe8","login":"chrfrasco","name":"Christian Scott","avatar_url":"https://avatars-next.observableusercontent.com/19e5d37ae76048149365b962b023e1ba61eb8ebfaee278e97e165823a19dde54","tier":"starter_2024"},"version":216,"publish_version":216,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bbe7559cf6878e3","login":"chrfrasco","name":"Christian Scott","avatar_url":"https://avatars-next.observableusercontent.com/19e5d37ae76048149365b962b023e1ba61eb8ebfaee278e97e165823a19dde54","tier":null}],"members":[{"type":"individual","id":"2bbe7559cf6878e3","login":"chrfrasco","name":"Christian Scott","avatar_url":"https://avatars-next.observableusercontent.com/19e5d37ae76048149365b962b023e1ba61eb8ebfaee278e97e165823a19dde54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Generating Random Contrasting Colors Is Harder than It Looks","cells":[{"id":0,"value":"md`# Generating Random Contrasting Colors Is Harder than It Looks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`I want to generate random colors that will be used for the background color behind text on my website. Generating a random color on the web is simple enough - just pull a random number from between \\`0x0\\` and \\`0xFFFFFF\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"function unif({ min = 0, max = 1 }) {\n return Math.floor(Math.random() * max) + min\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"function randomUniformColor() {\n return numberToHexString(unif({ max: 0xFFFFFF }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"uniformColors = {\n while (true) {\n await delay(667)\n yield randomUniformColor()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`\nColor from uniform distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`This is a simple solution, but more often than not the text is unreadable due to low contrast. The next step is to find some way to measure the contrast between the text and then reject colors until a sufficiently contrast-y one is found.\n\nAccording to the top answer on [this stackoverflow question](https://ux.stackexchange.com/questions/82056/how-to-measure-the-contrast-between-any-given-color-and-white), the way to do this is to calculate the _relative luminance_ ${tex`L`} for each of the colors, and then compare them to get the _contrast ratio_.\n\n_Relative luminance_ ${tex`L`} is calculated as follows:\n\n${tex`L = 0.2126 * Rg + 0.7152 * Gg + 0.0722 * Bg`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`where color ${tex`C \\in \\{R, G, B\\}`} is transformed to ${tex`Cg`} as follows:\n\n${tex`\\text{if } C \\leq 10 \\text{ then } Cg = \\frac{C}{3294} \\text{, else } Cg = (\\frac{C}{269} + 0.0513)^{2.4}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"function transformColor(c) {\n if (c <= 10) {\n return c / 3294\n } else {\n return Math.pow((c / 269) + 0.0513, 2.4)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"function rgbRelativeLuminance(rgb) {\n const [rg, gg, bg] = rgb.map(transformColor)\n return 0.2126 * rg + 0.7152 * gg + 0.0722 * bg\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`[W3](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef) defines contrast ratio to be:\n\n${tex`\\frac{(L1 + 0.05)}{(L2 + 0.05)}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`where ${tex`L1`} is the lighter of the colors, and ${tex`L2`} is the darker.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"function rgbContrastRatio(firstRgb, secondRgb) {\n const l1 = rgbRelativeLuminance(firstRgb)\n const l2 = rgbRelativeLuminance(secondRgb)\n if (l1 > l2) {\n return (l1 + 0.05) / (l2 + 0.05)\n } else {\n return (l2 + 0.05) / (l1 + 0.05)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"html`\nColor from uniform distribution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"ratio = {\n const textRgb = hexToRgb('#333333')\n const backgroundRgb = hexToRgb(uniformColors)\n return rgbContrastRatio(backgroundRgb, textRgb)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`Higher numbers mean more contrast. Eyeballing it, I would say that a contrast ratio of about 8 is quite readable. Let's create a wrapper around \\`randomUniformColor\\` that only returns a color when a sufficiently contrast-y color is generated.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"function sufficientContrastAgainstText(color, textColor='#333333', threshold=8) {\n const textRgb = hexToRgb(textColor)\n const backgroundRgb = hexToRgb(color)\n return rgbContrastRatio(backgroundRgb, textRgb) > threshold\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function randomContrastingColor() {\n let color = randomUniformColor()\n while (!sufficientContrastAgainstText(color)) {\n \tcolor = randomUniformColor()\n }\n return color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"contrastingColors = {\n while (true) {\n await delay(667)\n yield randomContrastingColor()\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"html`\nContrasting colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`This is much better, but still unsatisfying for a couple of reasons. First, it appears that many more yellows and greens are being generated than otherwise. Secondly, there is no limit on how long this function will take to find a color that satisfies the requirements. This is slightly less pressing than the first issue as it's extremely unlikely that it will take a noticeable amount of time.\n\nLet's visualise a sample of these random colors.\n\n_(side note - it would be great to calulate the probability that any RGB color has sufficient contrast c.f. another)_` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"contrastingColorSample = new Array(1024).fill().map(randomContrastingColor)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"chart = {\n const height = 500\n const context = DOM.context2d(width, height)\n context.clearRect(0, 0, width, height);\n\n const w = width / 32\n const h = height / 32\n \n let i = 0;\n for (let y = 0; y < height; y += h) {\n for (let x = 0; x < width; x += w) {\n context.beginPath()\n context.fillStyle = contrastingColorSample[i++]\n context.rect(x, y, w, h)\n context.fill()\n }\n }\n\n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`This makes it super clear that most of our colors are in the yellow/green/blue part of the spectrum.\n\nThis means that although any color has the same chance of being generated by \\`randomUniformColor\\`, the chance of having sufficent contrast is non-uniform accross the color spectrum.\n\nThe next step explore how ${tex`P(acceptance)`} varies at each point on the spectrum, and use this to create a new distribution from which to draw colors.\n\nA way of doing this could be to divide the spectrum into \"bins\" of color, calculate the percentage of colors in that \"bin\" that are accepted`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"function delay(ms) {\n return new Promise(resolve => setTimeout(resolve, ms))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function numberToHexString(n, length=6) {\n const limit = parseInt(new Array(length + 1).join('F'), 16)\n if (n > limit) {\n throw new Error(`Too large - must be less than ${limit}`)\n }\n \n let hex = n.toString(16)\n while (hex.length < length) {\n \thex = '0' + hex \n }\n return `#${hex}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"function hexToRgb(hex) {\n assert(hex.length === 7, 'hex string should be length 7')\n\n const digitRegex = /#(..)(..)(..)/\n const [_, r, g, b] = digitRegex.exec(hex)\n \n return [r, g, b].map(c => parseInt(c, 16))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"function assert(assertion, message) {\n if (!assertion) {\n throw new Error(message)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"