{"_id":"contrast-ratio-checker","_rev":"17-dc8a07844f16f4c2af3c8e1df5f3ba45","time":{"created":"2023-10-09T00:16:24.919Z","0.0.1":"2023-10-07T23:21:14.134Z","modified":"2023-10-21T15:25:58.423Z","1.0.0":"2023-10-09T00:16:25.141Z","1.1.0":"2023-10-12T04:27:14.579Z","1.1.1":"2023-10-21T00:53:06.537Z","1.1.2":"2023-10-21T13:30:18.051Z","1.1.3":"2023-10-21T13:41:47.292Z","1.1.4":"2023-10-21T13:44:10.291Z","1.1.5":"2023-10-21T13:46:53.273Z","1.1.6":"2023-10-21T13:55:56.290Z","1.1.7":"2023-10-21T15:25:58.219Z"},"name":"contrast-ratio-checker","dist-tags":{"latest":"1.1.7"},"versions":{"1.0.0":{"name":"contrast-ratio-checker","version":"1.0.0","description":"A package based on WCAG 2.0 to easily check contrast ratio.","scripts":{"example":"ts-node examples/index.ts"},"repository":{"type":"git","url":"git+https://github.com/viniciusrvieira/contrast-ratio-checker.git"},"keywords":["constrast-ratio","wcag","luminance","color"],"author":{"name":"Vinícius R. Vieira"},"license":"MIT","bugs":{"url":"https://github.com/viniciusrvieira/contrast-ratio-checker/issues"},"homepage":"https://github.com/viniciusrvieira/contrast-ratio-checker#readme","devDependencies":{"ts-node":"^10.9.1","typescript":"^5.2.2"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"64baa26a6a6fd4812f7739dda1e75071cc59b722","_id":"contrast-ratio-checker@1.0.0","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-hO2infWaXqJArpvC8iaxjB5vP65cRnYw+9FILAX2AhHf/vKuapTbYqMPT3+E1kh3o5G29zBpKmvSiMeBDVYp3Q==","shasum":"0792687363eff4260ad9fb43fba5e10d64746c1d","tarball":"https://registry.npmjs.org/contrast-ratio-checker/-/contrast-ratio-checker-1.0.0.tgz","fileCount":7,"unpackedSize":11729,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwt2KtH3g07domolWFWRMoIqiCwm2FQpzDgXOYWlPzHgIgB6wFeCbf7p45dBToprmDEy3L6bqZHDYG8i/mtNUAliY="}]},"_npmUser":{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"},"directories":{},"maintainers":[{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-ratio-checker_1.0.0_1696810584920_0.3087041646834976"},"_hasShrinkwrap":false},"1.1.1":{"name":"contrast-ratio-checker","version":"1.1.1","description":"A package based on WCAG 2.0 to easily check contrast ratio.","scripts":{"example1":"ts-node examples/example1.ts","example2":"ts-node examples/example2.ts"},"repository":{"type":"git","url":"git+https://github.com/viniciusrvieira/contrast-ratio-checker.git"},"keywords":["constrast-ratio","wcag","luminance","color"],"author":{"name":"Vinícius R. Vieira"},"license":"MIT","bugs":{"url":"https://github.com/viniciusrvieira/contrast-ratio-checker/issues"},"homepage":"https://github.com/viniciusrvieira/contrast-ratio-checker#readme","devDependencies":{"ts-node":"^10.9.1","typescript":"^5.2.2"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"4443095a075e5fdcfad3b749a0475b7e6ca4ac20","_id":"contrast-ratio-checker@1.1.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-WZdxCVXP+84LUL10SFydGiiJbcBLScKY3lg7Knr3fQjDRp3MMbTukRHDh1xoIv+illHInt8PQTyZVI6FCdMRTg==","shasum":"76a09eb4066033060338ea9291b385cf030686c0","tarball":"https://registry.npmjs.org/contrast-ratio-checker/-/contrast-ratio-checker-1.1.1.tgz","fileCount":7,"unpackedSize":19451,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAguKOfhhPBf+22cASymZNjGMPyMXFR4Pm3wCIyRHiDaAiAvCL/+MBMDUzDEw2h9FC2peyRITVXR7RtLfc5sQ2D3Tw=="}]},"_npmUser":{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"},"directories":{},"maintainers":[{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-ratio-checker_1.1.1_1697849586286_0.6755455917217015"},"_hasShrinkwrap":false},"1.1.7":{"name":"contrast-ratio-checker","version":"1.1.7","description":"A package based on WCAG 2.0 to easily check contrast ratio.","scripts":{"example1":"ts-node examples/example1.ts","example2":"ts-node examples/example2.ts"},"repository":{"type":"git","url":"git+https://github.com/viniciusrvieira/contrast-ratio-checker.git"},"keywords":["constrast-ratio","wcag","luminance","color"],"author":{"name":"Vinícius R. Vieira"},"license":"MIT","bugs":{"url":"https://github.com/viniciusrvieira/contrast-ratio-checker/issues"},"homepage":"https://github.com/viniciusrvieira/contrast-ratio-checker#readme","devDependencies":{"ts-node":"^10.9.1","typescript":"^5.2.2","webpack":"^5.89.0","webpack-cli":"^5.1.4"},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"91deb9f4c1568b14051c83e6198323350b8bb1d2","_id":"contrast-ratio-checker@1.1.7","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-uTWkg4c2XKuHS+wpcdvCltwV9pGVD+jTNBxzehzIbs/h9hAFHMXm/BXacgOieYoOfLstGqsJishdfjJmgTso0A==","shasum":"37e4f6f9a04571b5b49f362ec512abeb269b3828","tarball":"https://registry.npmjs.org/contrast-ratio-checker/-/contrast-ratio-checker-1.1.7.tgz","fileCount":8,"unpackedSize":17415,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSlPfMzWXU7QHQjQ1tEQtsTL8lJBkXMoyq/BRQfevNFAiEA67BiX9GiSH6o+dA1AeCsANphcGPEZI9cXwKeiakJeok="}]},"_npmUser":{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"},"directories":{},"maintainers":[{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-ratio-checker_1.1.7_1697901958051_0.2984724393518081"},"_hasShrinkwrap":false}},"maintainers":[{"name":"viniciusrvieira","email":"viniciusr.vieira@hotmail.com"}],"description":"A package based on WCAG 2.0 to easily check contrast ratio.","homepage":"https://github.com/viniciusrvieira/contrast-ratio-checker#readme","keywords":["constrast-ratio","wcag","luminance","color"],"repository":{"type":"git","url":"git+https://github.com/viniciusrvieira/contrast-ratio-checker.git"},"author":{"name":"Vinícius R. Vieira"},"bugs":{"url":"https://github.com/viniciusrvieira/contrast-ratio-checker/issues"},"license":"MIT","readme":"# Contrast Ratio Checker\r\n\r\nA package based on WCAG 2.0 to easily check contrast ratio.\r\n\r\nThe equations for luminance and contrast ratio are based on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) as shown below:\r\n\r\nhttps://www.w3.org/TR/WCAG20/#relativeluminancedef\r\n\r\nhttp://www.w3.org/TR/WCAG20/#contrast-ratiodef\r\n\r\n## Installation:\r\n\r\n```\r\nnpm install contrast-ratio-checker\r\n```\r\n\r\n## Usage:\r\n\r\nTo calculate `luminance`:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst rgb = { red: 255, green: 129, blue: 0 }\r\n\r\ncrc.getLuminance(rgb) // result: 0.36960513804637335\r\n```\r\n\r\nTo calculate `contrast ratio by luminance`:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst rgb1 = { red: 255, green: 129, blue: 0 }\r\nconst rgb2 = { red: 100, green: 0, blue: 58 }\r\n\r\nconst l1 = crc.getLuminance(rgb1)\r\nconst l2 = crc.getLuminance(rgb2)\r\n\r\n//luminance order doesnt matter\r\ncrc.getContrastRatioByLuminance(l1, l2) // result: 5.235369975583679\r\n```\r\n\r\nTo calculate `contrast ratio by RGB Object`:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst rgb1 = { red: 255, green: 129, blue: 0 }\r\nconst rgb2 = { red: 100, green: 0, blue: 58 }\r\n\r\ncrc.getContrastRatioByRgb(rgb1, rgb2) // result: 5.235369975583679\r\n```\r\n\r\nTo calculate `contrast ratio by HEX string`:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst hex1 = \"#e5e5e5\"\r\nconst hex2 = \"#ab0\" //shorthands are accepted\r\n\r\ncrc.getContrastRatioByHex(hex1, hex2) // result: 1.698093107780376\r\n```\r\n\r\n### Validation\r\n\r\n---\r\n\r\n> WCAG 2.0 says that to a text be considered large, it needs 18pt or 14pt bold.\r\n>\r\n> `level AA (minimum)` says that if text is large, ratio needs to be `>= 3, otherwise >= 4.5`.\r\n>\r\n> `level AAA (enhanced)` says that if text is large, ratio needs to be `>= 4.5, otherwise >= 7`.\r\n>\r\n> **Source**:\r\n>\r\n> https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html\r\n>\r\n> https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html\r\n\r\nTo get validation using `contrast ratio` as input:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst ratio = 4.7\r\n\r\ncrc.getWcagRatioValidation(ratio) // result: { WCAG_AA: true, WCAG_AAA: false }\r\n\r\n//accepts as args: ratio, font size in px and bold (boolean)\r\n\r\ncrc.getWcagRatioValidation(ratio, 30) // result: { WCAG_AA: true, WCAG_AAA: true }\r\n```\r\n\r\nTo get validation using `hex string` as input:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst hex1 = \"#e5e5e5\"\r\nconst hex2 = \"#555\" //shorthands are accepted\r\n\r\n// ratio ~5.91\r\n\r\ncrc.getRatioValidationByHex(hex1, hex2) // result: { WCAG_AA: true, WCAG_AAA: false }\r\n\r\ncrc.getRatioValidationByHex(hex1, hex2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }\r\n\r\n// using custom ratios:\r\n\r\ncrc.getRatioValidationByHex(hex1, hex2, {\r\n    fontSizePx: 19,\r\n    bold: true,\r\n    custom: 6,\r\n}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: false }\r\n```\r\n\r\nTo get validation using `RGB Object` as input:\r\n\r\n```js\r\nconst crc = new ContrastRatioChecker()\r\n\r\nconst rgb1 = { red: 255, green: 184, blue: 202 }\r\nconst rgb2 = { red: 120, green: 0, blue: 122 }\r\n\r\n// ratio ~6.23\r\n\r\ncrc.getRatioValidationByRgb(rgb1, rgb2) // result: { WCAG_AA: true, WCAG_AAA: false }\r\n\r\ncrc.getRatioValidationByRgb(rgb1, rgb2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }\r\n\r\n// using custom ratios:\r\n\r\ncrc.getRatioValidationByRgb(rgb1, rgb2, {\r\n    fontSizePx: 19,\r\n    bold: true,\r\n    custom: 6,\r\n}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: true }\r\n```\r\n\r\n### License\r\n\r\nCopyright © 2023, [Vinícius R. Vieira](https://github.com/viniciusrvieira). Released under the [MIT License](/LICENSE).\r\n","readmeFilename":"README.md"}