2d:null 2e:["$","title",null,{"children":"WCAG Contrast Ratio | Mike Bostock | Observable"}] 33:[] 31:{"id":"50f544d08738c712","slug":"wcag-contrast-ratio","title":"WCAG Contrast Ratio","thumbnail":"daef19584af887e4b841d023fc51e061fde0704a8483e97adeb43dc7abcfdd9b","access_level":"public","create_time":"$D2019-11-19T23:24:43.134Z","update_time":"$D2019-11-21T22:09:10.110Z","view_time":null,"first_public_time":"$D2019-11-21T22:09:24.826Z","has_unpublished_edits":null,"fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":450,"publish_version":450,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"9b855a35df5fa1ff","slug":"color","title":"Color","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"type":"notebook","body":{"title":"WCAG Contrast Ratio","cells":[{"id":245,"value":"md`# WCAG Contrast Ratio\n\nThe [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) include convenient quantitative recommendations for making text and graphics accessible based on the minimum acceptable contrast of foreground against background.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`For example, black on yellow has a high contrast ratio (${contrast(\"yellow\", \"black\").toFixed(2)}) and therefore should be easier to read, whereas blue on blue is low contrast (${contrast(\"steelblue\", \"lightsteelblue\").toFixed(2)}) and harder to read.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`The *contrast ratio* ${tex`C`} of two colors is defined as\n\n${tex.block`C = \\frac{\\max(L_1, L_2) + 0.05}{\\min(L_1, L_2) + 0.05}`}\n\nwhere ${tex`L_1`} and ${tex`L_2`} are the [relative luminances](https://en.wikipedia.org/wiki/Relative_luminance),\n\n${tex.block`L = 0.2126R + 0.7152G + 0.0722B,`}\n\nand ${tex`RGB`} are respectively the red, green and blue color channel values in “linear-light” RGB space. Given an sRGB value ${tex`V \\in [0,1]`}, the corresponding linear-light RGB value ${tex`v \\in [0,1]`} is\n\n${tex.block`\nv = \\begin{cases}\nV/12.92 & \\text{if } V \\leq 0.04045 \\\\\n((V + 0.055)/1.055)^{2.4} & \\text{otherwise.}\n\\end{cases}\n`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`This notebook implements the WCAG contrast ratio so that you can see how it works, and also see if two given colors meet the WCAG success criteria.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof colors = {\n const form = html``;\n form.oninput = () => {\n form.value = {foreground: form.if.value, background: form.ib.value};\n form.of.value = form.if.value;\n form.ob.value = form.ib.value;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html`

\n This is large sample text.\n

\n And this is normal text.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"md`The contrast ratio ${tex`C = \\frac{${Math.max(l1, l2).toFixed(3)}\\,\\textcolor{${l1 > l2 ? colors.background : colors.foreground}}{\\rule{4px}{4px}}\\, + 0.05}{${Math.min(l1, l2).toFixed(3)}\\,\\textcolor{${l1 > l2 ? colors.foreground : colors.background}}{\\rule{4px}{4px}}\\, + 0.05} = ${c.toFixed(2)}`} for these two colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`\n \n \n \n \n \n \n \n \n \n ${criteria.map(test => html`\n \n \n \n \n `)}\n \n

	Level	Content	Threshold
= test.value ? \"\" : \"color: red;\"};\">${c >= test.value ? \"pass 👍\" : \"fail 👎\"}	${test.level}	${test.content}	${test.value.toFixed(1)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`---\n\n## Implementation\n\nFirst, convert the two colors from sRGB to linear-light RGB.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"c1 = rgb_lrgb(d3.rgb(colors.background))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"c2 = rgb_lrgb(d3.rgb(colors.foreground))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function rgb_lrgb({r, g, b}) {\n return [r / 255, g / 255, b / 255].map(rgb_lrgb1);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"function rgb_lrgb1(v) {\n return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"md`Next compute the relative luminances ${tex`L_1`} and ${tex`L_2`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"l1 = lrgb_luminance(c1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"l2 = lrgb_luminance(c2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"function lrgb_luminance([r, g, b]) {\n return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"md`And lastly, the contrast ratio ${tex`C`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"c = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"md`Here’s the whole thing as a function, for convenience.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"function contrast(c1, c2) {\n const l1 = lrgb_luminance(rgb_lrgb(d3.rgb(c1)));\n const l2 = lrgb_luminance(rgb_lrgb(d3.rgb(c2)));\n return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"contrast(\"yellow\", \"blue\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md`And here are the WCAG success criteria for contrast.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"criteria = [\n {level: \"AAA\", content: \"normal text\", value: 7.0},\n {level: \"AAA\", content: \"large text\", value: 4.5},\n {level: \"AA\", content: \"normal text\", value: 4.5},\n {level: \"AA\", content: \"large text\", value: 3.0},\n {level: \"AA\", content: \"graphics\", value: 3.0}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"md`---\n\n## Appendix\n\nWe use [d3-color](https://github.com/d3/d3-color) to parse colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"d3 = require(\"d3-color@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"