31:T5d9,hsl_display = { let aspect = 1 let s_limit = 20 let l_limit = 20 let size = Math.min(400, width) let side_padding = 30 let div = `

` div += `

` let h = hue let threshold = getThreshold(filter) let foreground_chroma = chroma(foreground) for (let i = 0; i < l_limit; i++) { let l = (l_limit - i)/(l_limit - 1) for (let j = 0; j < s_limit; j++) { let s = j/(s_limit - 1) let background = chroma.hsl(h,s,l) let contrast = getContrast(foreground_chroma, background) let title = Math.round(background.luminance() * 100)/100 if (contrast < threshold) { background = "transparent" title = "" } div += `

` } } div += `

` div += `

Lightness →

` div += `

Saturation →

` div += `

` return html`${div}` }32:[] 2f:{"title":"Accessible color contrast explorer","cells":[{"id":143,"value":"md`# Accessible color contrast explorer`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"md`This little tool helps you explore what color combinations meet the [web content accessibility guidelines](https://www.w3.org/TR/WCAG20/#visual-audio-contrast). Below you can select the mode (AA, or the stricter AAA) and then cycle through the hue to see which colors pass the contrast check. The contrast is measured against the foreground color which you can also set below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof filter = radio({\n title: 'Filter mode',\n options: [\n { label: 'None', value: 'none' },\n { label: 'AA (Contrast > 4.5)', value: 'aa' },\n { label: 'AAA (Contrast > 7)', value: 'aaa' },\n ],\n value: 'aa'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof hue = slider({\n min: 0, \n max: 360, \n step: 4, \n value: 180, \n title: \"Hue\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof foreground = color({\n value: \"#000000\",\n title: \"Foreground color\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"md`## Blocks\n\nTo get an idea of how these colors could play out in practice, I tried recreating [the front page of the now defunct Muxtape website](http://diagonalthoughts.com/wp-content/uploads/2008/04/muxtape.jpg). I always admired the rawness of the randomly selected background colors of Muxtape, but completely random selection does not always make for readable text. The blocks below use the contrast settings from above to make sure the text is readable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"{\n refreshColors\n return displayBricks(randomHex)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof refreshColors = button({value: \"Refresh colors\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`## Possible improvements\n\n### Beyond trial and error\nThe block backgrounds work by getting random hexes until one passes the contrast requirement. It would be nice to do this in a more systematic way.\n\n### Hue distribution\nI started working on this with just the blocks demo, and I noticed that with black text I was seeing lots of green background colors. The HSL explorer does a good job of showing why this is: for black text those are the hues where more shades pass the contrast threshold. To get the perfect random readable background color effect it would be nice to adjust the distribution of hues so it *feels* more random (less greens). I'm still thinking about how to do this systematically.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`## Inspiration\n\nThis demo was inspired by [Brent Jackson's Colorable](http://jxnblk.com/colorable/demos/text/). Colorable is great for checking predefined color combos, but I wanted to experiment with randomly selecting (accessible) background colors, and also try and get a more intuitive sense of how it restricts the color space.\n\nThe color comparisons are made using [chroma.js](https://gka.github.io/chroma.js/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"brick_names = {\n let names = []\n for (let i=0; i<40; i++) {\n names.push(makeName())\n }\n return names\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"function randomHex() {\n function _tryBackground() {\n let hex = chroma.random()\n if (getContrast(chroma(foreground), hex) >= getThreshold(filter)) {\n return hex\n } else {\n return _tryBackground()\n }\n }\n return _tryBackground()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"function displayBricks(colorMaker) {\n let div = `

`\n for (let name of brick_names) {\n let background = colorMaker()\n div += `

${name}

`\n }\n div += `

`\n return html`${div}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"function getThreshold(filter) {\n let threshold = 0;\n if (filter === 'aa') threshold = 4.5\n if (filter === 'aaa') threshold = 7\n return threshold\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"function getContrast(color1, color2) {\n let color1_lum = color1.luminance() + 0.05\n let color2_lum = color2.luminance() + 0.05\n if (color1_lum > color2_lum) {\n return color1_lum/color2_lum\n } else {\n return color2_lum/color1_lum\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"import {makeName} from \"@grantcuster/fake-username-generator\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"import {color, radio, slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}