2c:null 2d:["$","title",null,{"children":"A Quantitative Approach to Colour Palette Selection | Sébastien Pierre | Observable"}] 32:T9d6,PALETTES = map({ Main:["#ED145B", "#6B2A7F", "#0081BF", "#1C635C", "#83B8AD", "#CE731E", "#F2CC28", "#B49374"], // FROM: https://github.com/karthik/wesanderson/blob/master/R/colors.R BottleRocket1 : ["#A42820", "#5F5647", "#9B110E", "#3F5151", "#4E2A1E", "#550307", "#0C1707"], BottleRocket2 : ["#FAD510", "#CB2314", "#273046", "#354823", "#1E1E1E"], Rushmore1 : ["#E1BD6D", "#EABE94", "#0B775E", "#35274A" ,"#F2300F"], Rushmore : ["#E1BD6D", "#EABE94", "#0B775E", "#35274A" ,"#F2300F"], Royal1 : ["#899DA4", "#C93312", "#FAEFD1", "#DC863B"], Royal2 : ["#9A8822", "#F5CDB4", "#F8AFA8", "#FDDDA0", "#74A089"], Zissou1 : ["#3B9AB2", "#78B7C5", "#EBCC2A", "#E1AF00", "#F21A00"], Darjeeling1 : ["#FF0000", "#00A08A", "#F2AD00", "#F98400", "#5BBCD6"], Darjeeling2 : ["#ECCBAE", "#046C9A", "#D69C4E", "#ABDDDE", "#000000"], Chevalier1 : ["#446455", "#FDD262", "#D3DDDC", "#C7B19C"], FantasticFox1 : ["#DD8D29", "#E2D200", "#46ACC8", "#E58601", "#B40F20"], Moonrise1 : ["#F3DF6C", "#CEAB07", "#D5D5D3", "#24281A"], Moonrise2 : ["#798E87", "#C27D38", "#CCC591", "#29211F"], Moonrise3 : ["#85D4E3", "#F4B5BD", "#9C964A", "#CDC08C", "#FAD77B"], Cavalcanti1 : ["#D8B70A", "#02401B", "#A2A475", "#81A88D", "#972D15"], GrandBudapest1 : ["#F1BB7B", "#FD6467", "#5B1A18", "#D67236"], GrandBudapest2 : ["#E6A0C4", "#C6CDF7", "#D8A499", "#7294D4"], IsleofDogs1 : ["#9986A5", "#79402E", "#CCBA72", "#0F0D0E", "#D9D0D3", "#8D8680"], IsleofDogs2 : ["#EAD3BF", "#AA9486", "#B6854D", "#39312F", "#1C1718"], Reds : ["#700700", "#B00C00", "#D60E00", "#F01100", "#FC1100"], Banks : values({ bank_anz_blue : "#007DBA", bank_asb_orange : "#F3C325", bank_bnz_blue : "#002F6B", bank_westpac_red : "#E41B13", bank_kiwibank_green : "#76C801", bank_rabobank_blue : "#000099", //bank_tsb_blue : "#1A124D", //bank_tsb_green_lt : "#00B18F", bank_tsb_green_dk : "#007C4E", bank_sbs_orange : "#FF6900", //bank_heartland_green_lt : "#00C9C1", bank_heartland_green : "#03848B", //bank_heartland_green_dk : "#10334D", bank_coop_green : "#00B752", bank_icbc_red : "#CF0003", bank_boc_red : "#A71E32", bank_ccb_blue : "#005BAA", bank_bob_orange : "#F25901", bank_boi_blue : "#0872BA"}), }, _ => _.map(_ => hex(_)))33:[] 30:{"id":"c6d8c2bb5cabfcaa","slug":"a-quantitative-approach-to-colour-palette-selection","title":"A Quantitative Approach to Colour Palette Selection","thumbnail":"0551447bd6cca42bb8bf080cd88da470e199befa58462be166552b18cf022063","access_level":"public","create_time":"$D2020-08-31T02:51:20.446Z","update_time":"$D2022-11-20T05:13:11.149Z","view_time":null,"first_public_time":"$D2020-09-06T21:22:40.454Z","fork":false,"stars":58,"starred":false,"owner":{"type":"team","id":"cc0ce9489265b441","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":"starter_2024"},"version":1276,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null}],"members":[{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null,"role":"editor"}],"comments":[{"id":"2b03a3aacf40433b","reply_to_id":null,"content":"Hi Sebastian, I’d like to talk to you about generating color palettes with less than 10 colors that have a specific contrast profile. How can we best get in touch? I’m martien@aardrock.com.","create_time":"$D2021-02-26T11:12:21.505Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}},{"id":"d87a996b87cee261","reply_to_id":"2b03a3aacf40433b","content":"Hi Martien, sorry just saw your message (more than one year after!), did you work this out?","create_time":"$D2022-04-22T20:46:46.985Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"7083c0770e4c8937","login":"sebastien","name":"Sébastien Pierre","avatar_url":"https://avatars-next.observableusercontent.com/e328f33fe583d34ba96f68fa91d451af121df97e58a4f7b231c86f5293028a53","tier":null}},{"id":"ecb77b56a63e7bca","reply_to_id":"2b03a3aacf40433b","content":"I did not, unfortunately.","create_time":"$D2022-04-29T13:45:19.373Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"A Quantitative Approach to Colour Palette Selection","cells":[{"id":0,"value":"md`# A Quantitative Approach to Colour Palette Selection\n\nChoosing the right colours for information graphics and data visualisation is easier said than done. People with colour perception deficiencies or colour blindness may have trouble seeing the distinction between some of your colours, or your colour palette might not work best for the data you're trying to display.\n\nThis notebook introduces a few metrics that quantify properties of a colour palette so that given a set of palettes, it is possible to pick the \"best fit\" for the job. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"md`## Luminance Distribution\n\nA palette with good luminance distribution ensures an even luminance contrast between all the colours of the palette. The luminance distribution score will show how much a given palette aligns with the ideal luminance distribution, and is computed the following way:\n\n- The gradients of luminance are extracted from the palette sorted by luminance. This gives an idea of the luminance distance between each color in ascending luminance order.\n- The ideal luminance gradient is the extent of the luminance range divided by the number of steps, in other words, an even gradient between color luminances.\n- The score is calculated as the % of gradients that are close to the ideal with a 25% tolerance.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"distributionScore = (palette, criteria, distance=reldist) => {\n // We get the sorted measure for our N colours\n const dist = sorted(map(palette, criteria))\n // The ideal luminance delta is the luminance range of the palette / (N - 1)\n const ideal = extent(dist)/((len(dist) - 1)||1);\n // The score is the relative distance to our ideal, 0=FAIL 1=SUCCESS\n // where a FAIL means we have exceeded have a delta more than 1x the ideal\n const scoring = _ => clamp(1 - distance(_, ideal), 0, 1);\n // We get the mean scoring\n return mean(map(gradients(dist),scoring))\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"luminanceDistributionScore = palette => {\n const lum_pal = sorted(map(palette, luminance));\n const lum_grd = gradients(lum_pal);\n const lum_grd_target =\n (lum_pal[lum_pal.length - 1] - lum_pal[0]) / len(palette);\n const [ok, not_ok] = partition(\n lum_grd,\n _ => reldist(_, lum_grd_target) <= 0.25\n );\n return len(ok) / len(palette);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":601,"value":"md`

The *luminance distribution score* defines how evenly distributed the luminance is across the luminance range of the palette. A score of 100% means that the lumiance difference between each colour of the palette is ideal for the palette's luminance range. A lower score means that the luminance contrast is not even across the palette and that some colours will be harder to distinguish.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":499,"value":"Scoring(luminanceDistributionScore)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"md`The main limintation of this indicator is that **it tolerates colours with low luminance contrast**. For instance the *Darjeeling2* palette has a score of ${Score(luminanceDistributionScore(PALETTES.Darjeeling2))} despite having two colours with low luminance contrast.\n\nAlso, a **low luminance range with low luminance contrast** might still receive a high score. For instance, the *BottleRocket2* without the red and the yellow has a score of ${Score(luminanceDistributionScore(PALETTES.BottleRocket2.slice(2)))}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":663,"value":"md`\n## Luminance Range\n\nIdeally, a palette should cover the largest spectrum of luminance. Intuitively, the luminance range is simply the difference between the minimum and the maximum luminance of the palette.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":825,"value":"rangeScore = (palette, criteria) =>\n extent(map(palette, criteria))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":665,"value":"luminanceRangeScore = palette =>\n rangeScore(palette, luminance)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"md`

The *luminance range score* defines the extent of the luminance coverage. A score of 100% is for the full range (0-1) while `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":669,"value":"Scoring(luminanceRangeScore)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":272,"value":"md`\n## Luminance Contrast\n\nA palette with good luminance contrast should not have any pair of colour with a luminance so low that it cannot be distinguished, we set that threshold to *ΔL=0.05*.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"luminanceContrastScore = palette => {\n // The minimum luminance difference is 0.05\n const threshold = 0.05;\n const lum = map(palette, luminance)\n // We partition based on the satisfaction of the minimum luminance criteria\n const [ok, notok] = partition(combinations(lum, 2).map( ([a,b])=>Math.abs(b - a)), _ => _ >= threshold)\n // The ideal luminance difference is the extent of the luminance range divided by the number\n // of colours in the palette.\n const ideal = Math.max(threshold, extent(lum)/len(lum));\n // NOTE: If we put our ideal difference in absolute (ie. assuming a luminance range of 1.0),\n // we're going to have worse results. \n const [above, below] = partition(ok, _ => (_ - ideal) >= 0)\n return len(notok) ? 0 : len(above) / len(ok); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":794,"value":"md`

The *luminance contrast score* defines how well colours contrast with each other within their luminance range. The score is the number of pairs of colours that have an ideal contrast within the luminance range. The ideal luminance is defines as *min(lum)+(max(lum)-min(lum))/n*. A score of 0 means that there at least one pair of colour that fails to pass the luminance threshold.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":758,"value":"Scoring(luminanceContrastScore)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":816,"value":"md`## Hue Distribution\n\nLike the luminance distribution, the hue distribution indicates the ideal distribution of hue between colours.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"hueDistributionScore = palette =>\n // We reuse the distribution score, but this time with a different distance function,\n // as the hue is circular/periodic.\n distributionScore(palette, hue, (a,b) => circdist(a,b))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":992,"value":"md`

The *hue distribution score* defines how evenly the colours are distributed over the hue range.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":836,"value":"Scoring(hueDistributionScore, {\n Hues: _ => map(sorted(_, hue), _ => Swatch(rgb(255*gamma(hue(_))))),\n Score: (_,s) => Score(s),\n Rating: (_,s) => Rating(s),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"md`TODO: I don't think this metric is really that valuable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"md`## Hue Range\n\nThe hue range shows the span of the palette over the hue spectrum. A higher the score the more colors the palette contains. Note that the hue range filters out less saturated colours, so that faded colors or greys don't over contribute to the overall score.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":865,"value":"hueRangeScore = palette => \n // The hue range is trickier to calculate due to the periodic nature of the\n // hue, and that low-saturation colours (greys) might distort the hue components.\n // Imagine a palette of greys, each with a different hue, which would get a high\n // score, but in practice would be grey.\n max(map(combinations(map(filter(palette, _ => saturation(_) >= 0.25), hue)), ([a,b])=>circdist(a,b)))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":869,"value":"Scoring(hueRangeScore, {\n Hues: _ => map(sorted(filter(_, _=>saturation(_)>=0.25), hue), _ => Swatch(rgb(255*gamma(hue(_))))),\n Score: (_,s) => Score(s),\n Rating: (_,s) => Rating(s),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"md`Limitations:\n- OUTLIER: BottleRocket2\n- Mostly grey palettes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"md`### Hue Contrast Score`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"hueContrastScore = palette => {\n // The minimum hue difference is 0.05\n const threshold = 0.05;\n const hues = map(palette, hue);\n // We partition based on the satisfaction of the minimum luminance criteria\n const [ok, notok] = partition(combinations(hues, 2).map( ([a,b])=>Math.abs(circdist(a,b))), _ => _ >= threshold);\n // The ideal hue difference is the extent of the hue range divided by the number\n // of colours in the palette.\n // FIXME: This is quite costly\n const huedists = map(combinations(hues, 2), _ => circdist(_[0], _[1]));\n const [minhue, maxhue] = minmax(huedists);\n const ideal = Math.max(threshold, (maxhue-minhue)/len(palette));\n // NOTE: If we put our ideal difference in absolute (ie. assuming a luminance range of 1.0),\n // we're going to have worse results. \n const [above, below] = partition(ok, _ => dist(ideal, _) >= 0)\n return len(above) / (len(ok)||1); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1189,"value":"Scoring(hueContrastScore, {\n Hues: _ => map(sorted(filter(_, _=>saturation(_)>=0.25), hue), _ => Swatch(rgb(255*gamma(hue(_))))),\n Score: (_,s) => Score(s),\n Rating: (_,s) => Rating(s),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1009,"value":"md`\n## Hue Clusters\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1021,"value":"hueClusters = (palette, threshold=0.20) => {\n const byhue = sorted(palette, hue)\n const hues = byhue.map(hue);\n return hues.reduce((r,v,i)=>{\n if (i === 0 || circdist(hues[i], hues[i-1]) > threshold) {\n r.push([]);\n } \n r[r.length - 1].push(byhue[i]);\n return r;\n }, []);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"hueClustersScore = palette => len(hueClusters(palette))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1036,"value":"Scoring(hueClustersScore, {\n Clusters: _ => H.span(map(hueClusters(_), _ => H.span({style:\"margin-right:10px;\"}, map(sorted(_, lightness), Swatch)))),\n Count: (_,s) => H.em(s),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## Colour Accessibility\n\nThe [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) define key desireable characteristics for different media, including colour.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`### Hue contrast\n\nFrom the [WCAG21](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) Understanding Minimum Contrast:\n

Some people with cognitive disabilities *require color combinations or hues that have low contrast*, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content.

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`### Luminance contrast\n\nFrom the [NASA Luminance Contrast](https://colorusage.arc.nasa.gov/guidelines_lum_cont.php) colour guidelines:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"md`## Appendix` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"import {rgb,hex,hue,saturation,luminance,luminosity,gamma,contrast,lightness,Swatch} from \"@sebastien/color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"import {extent, midpoint, min, max, partition, reldist,mul, subdivide, nth, gradients, keys, pipe, sprintf, range, combinations, values, sorted, reduce, filter, first, sqdist, circdist, dist, sum, minmax, sub, len, rmsd, clamp, pick, map, each, list, wrap, str, itemize, slot, lerp, smootherstep, mean, html as H, svg as S, stylesheet} from \"@sebastien/boilerplate\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":531,"value":"md`### Palettes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"palette = (n) => n ? PALETTES[wrap(n,len(PALETTES))] : pick(PALETTES)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"md`### Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"Distribution = value => \n H.div({_:\"Distribution\"},\n pipe(minmax(value), ([min,max])=>H.div({_:\"Distribution-range\", \n style:`width:${sprintf(\"%0.2f%%\", lerp(0,100,max-min))};left:${sprintf(\"%0.2f%%\", lerp(0,100,min))};`})),\n value.map( _ => H.div({_:\"Distribution-value\",title:str(_), style:`left: ${Math.round(_ * 100)}%`}, sprintf(\"%d%%\", Math.round(100 * _)))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"Palette = palette => \n H.span({_:\"Palette\"}, palette.map(Swatch))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"PaletteSelector = view => {\n const palettes = itemize(PALETTES)\n const paletteId = slot(pick(keys(PALETTES)))\n const palette = slot(_ => PALETTES[_]).reduce(paletteId)\n return H.div( \n H.select({onchange:_ => paletteId.set(_.target.value)},\n palettes.map(_ => H.option({value:_.key}, _.label))),\n H.div(\n paletteId.view( _ => map(PALETTES[_], Swatch))),\n H.div(\n palette.view(view)),\n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"Scoring = (score, template={\n Luminance: _ => H.div(map(sorted(map(_, luminance)), _ => Swatch(rgb(255*gamma(_))))),\n Score: ((_,s) => H.em(sprintf(\"%d%%\",100*s))),\n Rating: (_,s) => Rating(s),\n}, palettes=PALETTES) =>\n H.table(\n H.tr(H.th(\"Palette\"), H.th(\"Colours\"), map(keys(template), _ => H.th(_))),\n sorted(Object.entries(palettes).map( ([k,v])=>[k,v,score(v)]), _ => _[2], -1).map( ([k,v,s])=>\n H.tr({_:`.rating-${rating(s)}`},\n H.td(k),\n H.td(v.map(Swatch)),\n reduce(template, (r,t,tk)=> {r.push(H.td(t(v,s)))}, []))))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"Score = score => H.em(sprintf(\"%0.2f%%\", score*100))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1040,"value":"Rating = score => nth([\n \"✘\",\n \"☆\",\n \"★\",\n \"★★\",\n \"★★★\",\n \"★★★★\",\n \"★★★★★\",\n], rating(score))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1098,"value":"rating = score => {\n if (score >= 1.0) {return 6}\n else if (score > 0.90) {return 5}\n else if (score > 0.75) {return 4}\n else if (score > 0.50) {return 3}\n else if (score > 0.25) {return 2}\n else if (score === 0) {return 0}\n else {return 1}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"stylesheet({\n \".metric\":{\n \"max-width\":\"600px\",\n \"padding\":\"15px\",\n \"background-color\":\"#FFF0E0\",\n },\n \".numeric\":{\n \"display\":\"block\",\n \"width\":\"100%\",\n \"text-align\":\"right\",\n },\n \"th.rating-0\":{\n \"text-decoration\":\"line-through\",\n },\n \".Distribution\":{\n width:\"400px\",\n \"padding\":\"10px 0px 10px\",\n \"position\":\"relative\",\n \"border-top\":\"1px solid #A0A0A0\",\n },\n \".Distribution-range\":{\n \"background-color\":\"#E0E0E0\",\n \"position\":\"absolute\",\n \"top\":\"0px\",\n \"height\":\"10px\",\n },\n \".Distribution-value\":{\n \"display\":\"block\",\n \"position\":\"absolute\",\n \"top\":\"0px\",\n \"height\":\"10px\",\n \"border-left\":\"1px solid #808080\",\n \"font-family\":\"Arial,Helvetica,sans-serif\",\n \"color\":\"#808080\",\n \"padding-left\":\"5px\",\n \"font-size\":\"8px\",\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## References\n\n- [Web Content Accessibility Group](https://www.w3.org/TR/WCAG21/), defines of accessibility requirements for colours on the Web.\n- [NASA Color Guidelines](https://colorusage.arc.nasa.gov/guidelines.php), has useful information about luminance and luminance contrast.\n- ʘ [Color functions](https://observablehq.com/@sebastien/color) used in this notebook\n- ʘ [sRGB, RGB & Gamma](https://observablehq.com/@sebastien/srgb-rgb-gamma), presents some of the key notions used in this notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"