31:[] 2f:{"title":"Color contrast checker","cells":[{"id":0,"value":"md`# Color contrast checker\nUsing [chroma.js](https://github.com/gka/chroma.js/) to check color choices against [Section 508 accessibility guidelines](https://www.section508.gov/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof foreground = color({\n value: \"#c34c6f\",\n title: \"Foreground\"\n // , description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof background = color({\n value: \"#dafff5\",\n title: \"Background\"\n // , description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"html`

Sample body text

Sample display text

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"html`

Contrast ratio = ~${Math.round(ratio * 10) / 10}

Body text

\n 4.5 ? \"green\" : \"red\"};\">${ratio > 4.5 ? \"✓\" : \"✗\"} WCAG AA (4.5)
\n 7 ? \"green\" : \"red\"};\">${ratio > 7 ? \"✓\" : \"✗\"} WCAG AAA (7)\n

Display text

\n 3 ? \"green\" : \"red\"};\">${ratio > 3 ? \"✓\" : \"✗\"} WCAG AAA (3)
\n 4.5 ? \"green\" : \"red\"};\">${ratio > 4.5 ? \"✓\" : \"✗\"} WCAG AAA (4.5)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"ratio = chroma.contrast(foreground, background)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}