{"_id":"@americana/color-unclasher","name":"@americana/color-unclasher","dist-tags":{"alpha":"1.0.0-alpha.0","latest":"1.0.0-alpha.0"},"versions":{"1.0.0-alpha.0":{"name":"@americana/color-unclasher","version":"1.0.0-alpha.0","type":"module","description":"Help developers making their Maplibre style specifications more accessible to users with color blindness","main":"index.js","bin":{"color-unclasher":"src/index.js"},"scripts":{"test":"node --experimental-vm-modules node_modules/jest/bin/jest.js"},"jest":{"transform":{"^.+\\.js$":"babel-jest"},"verbose":true},"author":"","license":"ISC","dependencies":{"@maplibre/maplibre-gl-style-spec":"^20.2.0","chroma-js":"^2.4.2","color":"^4.2.3","color-blind":"^0.1.3","inquirer":"^9.2.23","prettier":"^3.3.2","tinycolor2":"^1.6.0","yargs":"^17.7.2"},"devDependencies":{"@babel/preset-env":"^7.24.7","@babel/preset-react":"^7.24.7","babel-jest":"^29.7.0","jest":"^29.7.0"},"_id":"@americana/color-unclasher@1.0.0-alpha.0","gitHead":"658c7fb1336b2fd5945f4b163631d8d931178da5","_nodeVersion":"22.4.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-D1cKURj3ktQTL5LS1nx6sWMno4S6HE2LouSKF41kTq6MnJB6hVhHAVawd8+cz07TakBFpK/GZqEO6VvSwYbarA==","shasum":"cb8739d8bb5f560f015815c378558ef2db666e12","tarball":"https://registry.npmjs.org/@americana/color-unclasher/-/color-unclasher-1.0.0-alpha.0.tgz","fileCount":32,"unpackedSize":686229,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGEk5CYGoyjHDxhECY6PLkCSxajV6wiAFYXThZYkG3W/AiEAks4CHyaGP4hbacBat9xvJuiymACiv12ua3BPlmwRMas="}]},"_npmUser":{"name":"ky233466","email":"katieyang233@gmail.com"},"directories":{},"maintainers":[{"name":"ky233466","email":"katieyang233@gmail.com"},{"name":"1ec5","email":"mxn@1ec5.org"},{"name":"zelonewolf","email":"zelonewolf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/color-unclasher_1.0.0-alpha.0_1723031339698_0.24268576406487408"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-07T11:48:59.565Z","1.0.0-alpha.0":"2024-08-07T11:48:59.951Z","modified":"2024-08-07T11:49:00.276Z"},"maintainers":[{"name":"ky233466","email":"katieyang233@gmail.com"},{"name":"1ec5","email":"mxn@1ec5.org"},{"name":"zelonewolf","email":"zelonewolf@gmail.com"}],"description":"Help developers making their Maplibre style specifications more accessible to users with color blindness","license":"ISC","readme":"# Color-Unclasher\n\nDesigned to help developers make their Maplibre styles more accessible to users with color blindness! This tool analyzes color combinations within a style specification and reports any non-compliant pairs. Compliance is determined by checking if the colors of two layers at the same zoom level, when transformed to simulate different types of color blindness, have a sufficient DeltaE difference.\n\nThe result could be in human readable format (written to terminal or a file) or just data structures exported to another file. \n\nThe exported file for non-compliant pairs in a specific data structure could be used to specify pairs to ignore in future analyses.\n\n# Background information\n\n`Color perceptions considered in the project`\n\n| Name | Type | Cause |\n| :------------ |:---------------| :---------------|\n| Normal Vision | No color blindness | Has all red, green, and blue cones |\n| Protanopia | Red-Green blindness | No red cone |\n| Deuteranopia | Red-Green blindness | No green cone |\n| Trianopia | Blue-Yellow blindness | No blue cone |\n\n\n\n`What is DeltaE?`\n\nDeltaE (CIE 2000) is a metric for how the human eye percieves color difference, with 0 being no difference and 100 being maximum difference. This package uses chroma.js's deltaE function, which is based on the formula from [Bruce Lindbloom](http://www.brucelindbloom.com/index.html?Eqn_DeltaE_CIE2000.html). \n\n`Why use DeltaE instead of color contrast ratio?`\n\nColor contrast ratio, based on the relative brightness of the RGB values, is mostly used for getting the contrast between a peice of text and its background color, which the former would hold significantly less space than a tile on a map.  `#475C5C` and  `#515062` would fail for color contrast, but they have enough difference for two adjacent tiles on a map. Read more about DeltaE [here](https://techkonusa.com/demystifying-the-cie-%CE%B4e-2000-formula/).\n\n# Supported and unsupported expressions\nSupports:\n- steps\n- stops\n- interpolate\n- interpolate with one layer of match\n- case\n\nNot supported:\n- nested match\n- in\n\n...\n \n# Recommendations\n\n1. Install extensions that would show colors specified in your document. For example, [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) in VS Code.\n\n2. If you want to experiement with what minimum DeltaE you want to use, or check the DeltaE, color contrast, and how two colors would look with different types of color blindness, go to https://leonardocolor.io/tools.html. You can use  `#475C5C` and  `#515062` as an example. They have DeltaE of 5.56 for Deuteranopia, 7.95 for Protanopia, and 6.46 for Tritanopia.\n\n3. To check how a group of color looks for people with different types of color-blindness, go to https://color.adobe.com/create/color-accessibility and select Color Blind Safe on the left column.\n\n# Installation, usage and flags\n\n```sh\nnpm install color-unclasher\n```\n\nIn terminal, provide the path to your style specification. If you would like to store the human readable analyzes result, enter a file path. Or else, result would be written to terminal.\n\n```sh\ncolor-unclasher styleSpecPath [analyzeResultFilePath]\n```\n\nTo override default values or declare path to export or import data from, use the following flags:\n\n| Flag | Default Value | Explanation |\n| :------------ |:---------------:| :-----:|\n| --export-pairs-path | null | The path the non-compliant pairs would be exported to |\n| --min-zoom | 0 | The minimum zoom level |\n| --max-zoom | 22 | The maximum zoom level |\n| --min-deltaE | 5.5 | The minimum DeltaE for a compliant pair |\n| --pairs-to-ignore-path| null | The path to import non-compliant pairs to ignore |\n| --get-suggest | false | Get suggested change of color for non-compliant pairs |\n\n# Build instructions\n\nAfter cloning the repository:\n\n```sh\nnpm install\nnpm link\ncd test\nnpm link color-unclasher\n```\n\nThen you can make changes to the code in src folder and test in test folder\n\n# Example workflow\n1. **Run analysis in terminal with the flag --export-pairs-path**: Result in human readable format would be written to result.txt. output.json would be created for non-compliant pairs stored in a specific data structure.\n\n```sh\ncolor-unclasher styles.json result.txt --export-pairs-path output.json\n```\n\nWhats written to result.txt\n\n![\"The](\"doc-image/r1.png\")
\n\nWhats written to output.json\n\n```js\n{\n \"normal\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {\n \"17\": [[[\"bus\"], [\"bike\"]]]\n }\n },\n \"deuteranopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {\n \"16\": [[[\"bus\"], [\"bike\"]]]\n }\n },\n \"protanopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {\n \"16\": [[[\"bus\"], [\"bike\"]]]\n }\n },\n \"tritanopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {\n \"11\": [[[\"bus\"], [\"bike\"]]]\n }\n }\n}\n```\n\n2. **Edit output.json to specify pairs to ignore in future analyses**: Let's say I am not worried about \"airport\" and \"grass\" having similar colors, then I would **leave** pairs with \"airport\" and \"grass\" in output.json, and delete the rest. output.json should now look like:\n\n```js\n{\n \"normal\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {}\n },\n \"deuteranopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {}\n },\n \"protanopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {}\n },\n \"tritanopia\": {\n \"fill\": {\n \"6\": [[[\"airport\"], [\"grass\"]]]\n },\n \"line\": {}\n }\n}\n```\n\n3. **Analyze again and with flag --pairs-to-ignore-path followed by output.json**:\n\n```sh\ncolor-unclasher style.json result.txt --pairs-to-ignore-path output.json\n```\n\nThen the result written to result.txt would no longer have the pairs configured to ignore\n\n![\"The](\"doc-image/r2.png\")
\n\n4. **Get suggested change of color for non-compliant pairs with --get-suggest**:\n\n```sh\ncolor-unclasher style.json result.txt --pairs-to-ignore-path output.json --get-suggest true\n```\n\n![\"Get](\"doc-image/r3.png\")
\n\nColor on the right hand side will be modified. Due to how suggested colors are \ngenerated, there is a bias for a increase in redness. Read the next section \nfor more information.\n\n# Get adjusted colors\n\nThe automatic suggestions mentioned in example workflow uses two underlying functions, \nadjustRGB and adjustHSL. They both suggest colors by increasing or decreasing red, \ngreen, or blue, or hue, saturation, and lightness at a time. The returned\nobject will contain suggestions that meet the min DeltaE threshold. \n\nIn automatic suggestions mentioned in example workflow, testing suggested colors\nwith other existing colors will start with the first color in result, which would\nbe color with red increase for RGB colors, and hue increase for HSL colors. Therefore,\nautomatic suggestions have a bias for these two kind of colors.\n\nThese two functions are also available to be used individually. If you would like to \nview all suggested colors to pick a color on your own, in a JS file, use it as the following.\n\n```js\nimport ColorUnclasher from \"color-unclasher\";\n\nconst color1 = \"#a4a95b\"; // wouldn't be modified\nconst color2 = \"#ff8375\"; // have a deltaE of 2.81 with color1\nconst mode = 'deuteranopia'; // one of protanopia, deuteranopia, and trianopia\nconst minDeltaE = 7; // defaulted to 7\n\nconst newColors = ColorUnclasher.adjustRGB(color1, color2, mode, minDeltaE); // result in an object\n```\n\ncolor1 = `#a4a95b`  color2 = `#ff8375` \n\nResult:\n\nred_increase: `----`,\n\nred_decrease: `#da8375` ,\n\ngreen_increase: `#ffa875` ,\n\ngreen_decrease: `#ff5e75` ,\n\nblue_increase: `#ff8387` ,\n\nblue_decrease: `#ff833a` \n","readmeFilename":"README.md"}