2d:null 2e:["$","title",null,{"children":"Color contrast checker | Casey Labrack | Observable"}] 33:[] 31:{"id":"dcfe694eda4b304a","slug":"color-contrast-checker","title":"Color contrast checker","thumbnail":"d3318997e10d5e179760d6523a1697e22824e5a91dad9ea54d3d0ee40cd993b7","access_level":"public","create_time":"$D2019-03-13T20:57:29.614Z","update_time":"$D2021-10-21T16:32:31.453Z","view_time":null,"first_public_time":"$D2019-04-22T17:00:51.968Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7f0c6aa5c6a6ebf4","login":"shastabolicious","name":"Casey Labrack","avatar_url":"https://avatars-next.observableusercontent.com/4c4995b5579116e3f039770f0d48b4c098d7665d30c8fbd71d2ac2c25d2302e4","tier":"starter_2024"},"version":171,"publish_version":171,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc70235dc06675bb","login":"shastabolicious","name":"Casey Labrack","avatar_url":"https://avatars-next.observableusercontent.com/4c4995b5579116e3f039770f0d48b4c098d7665d30c8fbd71d2ac2c25d2302e4","tier":null}],"members":[{"type":"individual","id":"cc70235dc06675bb","login":"shastabolicious","name":"Casey Labrack","avatar_url":"https://avatars-next.observableusercontent.com/4c4995b5579116e3f039770f0d48b4c098d7665d30c8fbd71d2ac2c25d2302e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"html`

Sample body text

Sample display text

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"ratio = chroma.contrast(foreground, background)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"