28:null 29:["$","title",null,{"children":"Contrast in sequential color scales | Jonatan Hildén | Observable"}] 2e:T4f2,{ let c_d = chroma.hex(c_darken[c_darken.length-1]) let ch = [chroma.hex(c_darken[c_darken.length-1])] let cContrast = [[c_d.hex(), wcag.hex(ch[0].hex(), '#fff')]] let counter for (let index = 0; index < 2; ++index) { c_d = ch[index] counter = 0 if(wcag.hex(ch[index].hex(), c_d.hex())<3){ while (counter<20 & (wcag.hex(ch[index].hex(), c_d.hex())<3) ) { c_d = c_d.darken(0.1) counter +=1 } ch.push(c_d) cContrast.push([c_d.hex(), wcag.hex(ch[index].hex(), c_d.hex())]) } } console.log(cContrast) const svg = d3.create('svg').attr('width', width).attr('height', 150); const group = svg.selectAll().data(cContrast).enter().append('g') group.append('rect') .attr('width', 60) .attr('height', 60) .attr('fill', function(d) { return d[0];}) .attr('x', function(d,i) { return 60*i; }) .attr('stroke','black') group.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 75) .attr('font-size', 14) .text(function(d) { return `${d[0]}`;}) group.append('text') .attr('x', function(d,i) { return 60*i; }) .attr('y', 95) .attr('font-size', 14) .text(function(d) { return `${d[1].toFixed(2)}`;}) return svg.node(); }2f:[] 2c:{"id":"5ebea98e762094b2","slug":null,"title":"Contrast in sequential color scales","thumbnail":"040b2f4b82891711bc755f2a1f84e2eabe92edc18ef3deb650b64e7aff66c0f2","access_level":"public","create_time":"$D2022-02-02T11:29:43.876Z","update_time":"$D2022-02-02T14:12:08.999Z","view_time":null,"first_public_time":"$D2022-11-24T09:09:28.727Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f68715fc404b4f1d","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":"starter_2024"},"version":224,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null}],"members":[{"type":"individual","id":"19f39c9c4d9fb475","login":"hjhilden","name":"Jonatan Hildén","avatar_url":"https://avatars-next.observableusercontent.com/af457924bfd3035b839251d8734a533c11ea8f05b54e2e971e892a1fbaf10992","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Contrast in sequential color scales","cells":[{"id":0,"value":"# Contrast in sequential color scales\nIs it possible to make a color scale with lightness variation, where each step satisfies the 3:1 WCAG contrast requirement relative to white *and* the preceding step?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"wcag = require('wcag-contrast')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"chroma = require('chroma-js')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"Adjust selected color with `color.darken` until it satisfies 3:1 contrast to white.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"viewof color = html ``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"c_darken = {let c = chroma.hex(color)\n let ch = [c.hex()]\n while (wcag.hex(c.hex(), '#fff')<3) {\n c = c.darken(0.1)\n ch.push(c.hex())\n }\n return ch}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{\n let c = chroma.hex(color)\n let ch = [c.hex()]\n while (wcag.hex(c.hex(), '#fff')<3) {\n c = c.darken(0.1)\n ch.push(c.hex())\n }\n\n const svg = d3.create('svg').attr('width', width).attr('height', 50); \n svg.selectAll().data(ch).enter().append('rect')\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', function(d) { return d;})\n .attr('x', function(d,i) { return 50*i; })\n .attr('stroke','black') \n return svg.node();\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"Took ${c_darken.length-1} steps to find darker outline color:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"{\n \n \n const svg = d3.create('svg').attr('width', width).attr('height', 58); \n svg.append('rect')\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', color)\n .attr('x', 4)\n .attr('y', 4)\n .attr('stroke',c_darken[c_darken.length-1])\n .attr('stroke-width','4px') \n\n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"html `

adjusted color:
${c_darken[c_darken.length-1]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"### Three-step lightness scale\n_hex value and contrast to preceding color_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1"}} 2d:"$2c:body"