32:T55f,getHclAdjuster = (startingLchCoords = [], targetInput) => { const [l, c, h] = startingLchCoords; const form = htl.html``; const inputs = [...form.querySelectorAll("input[type='number']")]; form.addEventListener("change", function (event) { const values = inputs.map((input) => +input.value); const hex = new Color("oklch", values) .to("srgb") .toString({ format: "hex" }); form.value = hex; form.dispatchEvent(new CustomEvent("input")); set(targetInput, hex); }); return form; }33:T45f,getColorInput = (label = "Enter a color", value = "#333") => { const inputId = DOM.uid("color"); const errorMsgId = DOM.uid("error"); let isInvalid = typeof value !== "string"; const input = htl.html`

${label}

`; input .querySelector("input[type='text']") .addEventListener("change", function (event) { input.value = event.target.value; input.dispatchEvent(new CustomEvent("input")); }); input.value = value; input.dispatchEvent(new CustomEvent("input")); return input; }34:[] 30:{"title":"OKLCH Color Contrast Evaluator","cells":[{"id":0,"value":"# OKLCH Color Contrast Evaluator\n\nEvaluate the color contrast of two colors using the [WCAG 2.1](https://webaim.org/resources/contrastchecker/) and [APCA](https://www.myndex.com/APCA/) color contrast algorithms. Adjust colors to improve their contrast using the [OKLCH color space](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch). Uses [ColorJS](https://colorjs.io/) to manipulate colors and evaluate their contrast.\n\n

Usage

\n Enter a text and background color in the text inputs below. These must be in a format that ColorJS understands such as hex, rgb, rgba, hsl, hsla, oklch, etc. You may adjust each color's lightness, chroma, and hue values using the `oklch` color space inputs that follow each color input.\n

\n The Color Contrast Analysis section states whether the color combination passes or fails the WCAG 2.1 and APCA minimum color contrast rules for normal or body text on a background color.\n

\n","pinned":false,"hidden":false,"mode":"md"},{"id":361,"value":"md`**Color Combination Preview:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"preview = htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"getSwatch(textColorDisplay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof textInputColor = getColorInput(\"Text Color:\", textColorMutable)","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof textColorHclAdjuster = getHclAdjuster(\n textColorLCH.coords,\n viewof textInputColor\n)\n// Inputs.bind(getHclAdjuster(textColorLCH.coords), viewof textColorSynchronized)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"getSwatch(bgColorDisplay)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof bgInputColor = getColorInput(\"Background Color:\", bgColorMutable)\n\n// Inputs.bind(\n// getColorInput(\"Background Color:\", bgColorSynchronized),\n// viewof bgColorSynchronized\n// )\n\n// Inputs.bind(\n// Inputs.color({\n// label: \"Background Color\"\n// }),\n// viewof bgColorSynchronized\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof bgColorHclAdjuster = getHclAdjuster(\n bgColorLCH.coords,\n viewof bgInputColor\n)\n// Inputs.bind(\n// getHclAdjuster(bgColorLCH.coords, viewof textInputColor),\n// viewof bgColorSynchronized\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Color Contrast Analysis\nFor the text color **`${textColorDisplay}`** and background color **`${bgColorDisplay}`**\n\n### ${contrastWcag >= 4.5 ? \"Passes\" : \"Fails\"} WCAG 2.1 level AA\n\nWCAG 2.1 color contrast value of **${contrastWcag.toFixed(2)}** ${contrastWcag >= 4.5 ? \"passes\" : \"fails\"} WCAG level AA color contrast for normal text and background color contrast.\n\n### ${Math.abs(contrastApca) >= 75 ? \"Passes\" : \"Fails\"} APCA\n\nAPCA color contrast value of **`${contrastApca.toFixed(2)}`** ${Math.abs(contrastApca) >= 75 ? \"passes\" : \"fails\"} APCA minimum color contrast for body text and background colors. ","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"## Shareable URL\n\nUse the following URL to share this notebook with the currently selected colors:\n\n[${shareUrl}](${shareUrl})","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":408,"value":"queryParams = queryString.parse(window.location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"colorsQueryString = queryString.stringify({\n backgroundColor: bgColorDisplay,\n textColor: textColorDisplay\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"shareUrl = {\n const urlParsed = queryString.parseUrl(document.baseURI);\n return `${urlParsed.url}/?${colorsQueryString}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"DEFAULT_TEXT_COLOR = \"#F58069\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"DEFAULT_BG_COLOR = \"#144C70\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"contrastWcag = textColorJs.contrastWCAG21(bgColorJs)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"// NOTE: order is important with APCA, background then text color must be used in that order\n// see: https://colorjs.io/docs/contrast#accessible-perceptual-contrast-algorithm-apca\ncontrastApca = bgColorJs.contrastAPCA(textColorJs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"mutable textColorMutable = queryParams.textColor || DEFAULT_TEXT_COLOR","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"mutable bgColorMutable = queryParams.backgroundColor || DEFAULT_BG_COLOR","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"{\n // syncs the text color input with text hcl adjuster\n if (\n typeof textInputColor === \"string\" &&\n textInputColor.toLowerCase() !== textColorMutable.toLowerCase()\n ) {\n mutable textColorMutable = textInputColor;\n }\n\n // syncs the background color input with background hcl adjuster\n if (\n typeof bgInputColor === \"string\" &&\n bgInputColor.toLowerCase() !== bgColorMutable.toLowerCase()\n ) {\n mutable bgColorMutable = bgInputColor;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"// used to sync the text color's color picker and LCH inputs\n// viewof textColorSynchronized = Inputs.input(DEFAULT_TEXT_COLOR)","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"// used to sync the background color's color picker and LCH inputs\n// viewof bgColorSynchronized = Inputs.input(DEFAULT_BG_COLOR)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"textColorJs = new Color(textInputColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"textColorLCH = textColorJs.to(\"oklch\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"textColorDisplay = textColorJs.toString({ format: \"hex\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"bgColorJs = new Color(bgInputColor)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"bgColorLCH = bgColorJs.to(\"oklch\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"bgColorDisplay = bgColorJs.toString({ format: \"hex\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof customColorInputTest = getColorInput(\"Enter color\", textColorMutable)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"getSwatch = (\n colorString\n) => htl.svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"linkStyles","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"Color = (await import(\"https://unpkg.com/colorjs.io@0.5.0/dist/color.js\"))\n .default","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"queryString = (await import(\"https://cdn.skypack.dev/query-string@9.1.0?min\"))\n .default","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"import { linkStyles } from \"@clhenrick/improve-link-styles-in-observable\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}