2c:null 2d:["$","title",null,{"children":"Accessibility: Color-Contrast Models | Ian Lyttle | Observable"}] 32:[] 30:{"id":"e6db240b02861c9c","slug":"apca-w3-color-contrast","title":"Accessibility: Color-Contrast Models","thumbnail":"d69ddd94e28655c5ae7bb6b00c448ad5ca141ca2d959763710fa73aa3312b2bb","access_level":"public","create_time":"$D2022-01-14T17:00:24.302Z","update_time":"$D2023-07-28T18:30:49.834Z","view_time":null,"first_public_time":"$D2022-01-17T21:18:16.092Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":"starter_2024"},"version":505,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null}],"members":[{"type":"individual","id":"522327b52a854639","login":"ijlyttle","name":"Ian Lyttle","avatar_url":"https://avatars-next.observableusercontent.com/566ff16eaaa5c74f010ed857309e15b68a64d986603196c092593394954df702","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"a606fb025c1e70ce","slug":"color","title":"Computing on color","owner":{"id":"5c34077dfed9632a","login":"ijlyttle","name":"Ian Lyttle"}},"type":"notebook","body":{"titling":"auto","title":"Accessibility: Color-Contrast Models","cells":[{"id":0,"value":"# Accessibility: Color-Contrast Models\n\nThe purpose of this notebook is to make it a little easier to work with color-contrast models for web accessibility:\n\n- WCAG 2.0, using Tom MacWright's [`wcag-contrast` library](https://www.npmjs.com/package/wcag-contrast).\n- APCA, using Andrew Somers' [`apca-w3` library](https://www.npmjs.com/package/apca-w3).\n\nAPCA aims to improve on WCAG 2.0; Lisa Charlotte Muth has a great [article](https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/) at the Datawrapper blog.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"Inputs.table(cxData, {\n header: {\n colorText: \"text\",\n colorBg: \"background\",\n combination: \"example\",\n wcagContrast: \"WCAG contrast\",\n wcagScore: \"WCAG score\",\n apcaContrast: \"APCA contrast\",\n apcaScore: \"APCA score\"\n },\n format: {\n colorText: (x) => x.toUpperCase(),\n backgroundText: (x) => x.toUpperCase(),\n combination: examplebar,\n wcagContrast: (x) => contrastbar(x, \"steelblue\", 21),\n apcaContrast: (x) => contrastbar(x, \"steelblue\", 107.88)\n },\n width: {\n wcagContrast: \"25%\",\n apcaContrast: \"25%\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"You can change the colors used in the contrast calculations, by modifying `text` and `background`. For this tool, `text` is a string, `background` is an array of strings:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"viewof text = Inputs.color({ value: \"#FFFFFF\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"viewof backgroundCustom = Inputs.color({ value: \"#663399\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"background = [\"#000000\", \"#777777\", \"#333333\", \"#EA7439\", backgroundCustom]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"To simplify things, we use the absolute value of the APCA-contrast value. The scores for APCA are based on a rough correspondence with WCAG scores, suggested by this [APCA readme](https://github.com/Myndex/apca-w3):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"Inputs.table(\n [\n { score: \"Fail\", WCAG: \"x < 3.0\", APCA: \"x < 45\" },\n { score: \"AA Large\", WCAG: \"3.0 ≤ x < 4.5\", APCA: \"45 ≤ x < 60\" },\n { score: \"AA\", WCAG: \"4.5 ≤ x < 7.0\", APCA: \"60 ≤ x < 75\" },\n { score: \"AAA\", WCAG: \"7.0 ≤ x\", APCA: \"75 ≤ x\" }\n ],\n { width: 400 }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"Here are the intermediate calculations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"cxData = tidy.tidy(\n [],\n tidy.expand({\n colorText: [text],\n colorBg: background\n }),\n tidy.mutate({\n combination: (d) => ({ text: d.colorText, background: d.colorBg }),\n wcagContrast: (d) => wcag.hex(d.colorText, d.colorBg),\n wcagScore: (d) => wcag.score(d.wcagContrast),\n apcaContrast: (d) => Math.abs(apca.calcAPCA(d.colorText, d.colorBg)),\n apcaScore: (d) => apcaScore(d.apcaContrast)\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"Also, a function is provided here: given a background color, it returns the more-contrasting text color from `[\"#000000\", \"#FFFFFF\"`]:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"apcaTextColor(\"#FFFF00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"At the core of these calculations is the `apca-w3` function `apca.calcAPCA()`: given a text color and a background color, it returns the contrast value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":481,"value":"apca.calcAPCA(\"#FFFF00\", \"#000000\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"## Change log","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"changeTable([\n {\n date: new Date(\"2023-07-17\"),\n change: [\n \"- add change-log\",\n \"- update `apca-w3` version\",\n \"- use uppercase in table\",\n \"- use `tidyjs`\",\n \"- provide `apcaTextColor()`: given background color, return the more-contrasting of black or white\",\n \"- provide widgets for custom text-color and background-color\"\n ].join(\"\\n\")\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"### Imported libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"apca = import(\"https://cdn.skypack.dev/apca-w3@0.1.9\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"cp = import(\"https://cdn.skypack.dev/colorparsley@0.1.1?min\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"wcag = require(\"wcag-contrast@3.0.0/dist/index.umd.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"tidy = import(\"https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"import { changeTable } from \"@ijlyttle/change-log\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"### Local functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"// Number -> String\napcaScore = function (x) {\n // approximate the wcag.score() function\n\n const absX = Math.abs(x);\n\n if (absX >= 75) {\n return \"AAA\";\n }\n\n if (absX >= 60) {\n return \"AA\";\n }\n\n if (absX >= 45) {\n return \"AA Large\";\n }\n\n return \"Fail\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"// String -> String\napcaTextColor = function (hex) {\n // given a hex string for the background, return the more-contrasting text color: black or white\n\n const blackWhite = [\"#000000\", \"#FFFFFF\"];\n\n const contrast = blackWhite.map((x) => Math.abs(apca.calcAPCA(x, hex)));\n\n //return contrast;\n return contrast[1] > contrast[0] ? blackWhite[1] : blackWhite[0];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"apcaTextColor(\"#FFFF00\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"examplebar = function (x) {\n return htl.html`

example`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"`contrastbar()` is adapted from Mike Bostock's [Table examples](https://observablehq.com/@observablehq/input-table).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"// Number, String, Object -> HTML\ncontrastbar = function (value, color, max) {\n // determine max\n\n // build background divs\n const backgroundDiv = htl.html.fragment`

`;\n\n // build value div\n const valueDiv = htl.html.fragment`

`;\n\n // build text div\n const textDiv = htl.html.fragment`

${d3.format(\"0.1f\")(value)}`;\n\n return htl.html`

${backgroundDiv}${valueDiv}${textDiv}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"contrastbar(0.6, \"steelblue\", 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"