{"id":18376814,"url":"https://github.com/bbc/color-contrast-checker","last_synced_at":"2025-09-02T18:30:36.719Z","repository":{"id":36227271,"uuid":"40531579","full_name":"bbc/color-contrast-checker","owner":"bbc","description":"An accessibility checker tool for validating the color contrast based on WCAG 2.0 and WCAG 2.1 standards.","archived":false,"fork":false,"pushed_at":"2024-06-26T11:10:40.000Z","size":288,"stargazers_count":95,"open_issues_count":12,"forks_count":17,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-15T21:06:44.354Z","etag":null,"topics":["accessibility-checker","color-contrast"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-08-11T08:51:30.000Z","updated_at":"2024-12-08T16:43:02.000Z","dependencies_parsed_at":"2024-06-18T13:58:34.683Z","dependency_job_id":"92c96db1-c4be-4a06-8350-97c11b3ab854","html_url":"https://github.com/bbc/color-contrast-checker","commit_stats":{"total_commits":40,"total_committers":7,"mean_commits":5.714285714285714,"dds":0.7,"last_synced_commit":"f5d1b29c5da5b6f8359d36d1826cbdae8380ca85"},"previous_names":["qambar/color-contrast-checker"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fcolor-contrast-checker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fcolor-contrast-checker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fcolor-contrast-checker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fcolor-contrast-checker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbc","download_url":"https://codeload.github.com/bbc/color-contrast-checker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230897251,"owners_count":18296903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility-checker","color-contrast"],"created_at":"2024-11-06T00:24:51.341Z","updated_at":"2024-12-23T00:09:54.580Z","avatar_url":"https://github.com/bbc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Contast Checker\n\nAn accessibility checker tool for validating the color contrast based on WCAG 2.0 and WCAG 2.1 standard.\n\nThe formula (L1/L2) for contrast is based on [ISO-9241-3] and [ANSI-HFES-100-1988] standards as described here :\n\nhttp://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\nhttp://www.w3.org/TR/WCAG20/#contrast-ratiodef\nhttps://www.w3.org/TR/WCAG21/#contrast-minimum\n\nIt also supports shorthand color codes e.g #FFF or #000 etc.\n\nhttps://www.w3.org/TR/2001/WD-css3-color-20010305#colorunits\n\nInstallation:\n------------\n\n```\nnpm install color-contrast-checker\n```\nor using package.json\n\n```\n{\n  \"name\": \"my-app\",\n  ..\n  \"devDependencies\": {\n    ..\n    \"color-contrast-checker\": \"2.1.0\"\n  }\n}\n```\nThen do `npm install`\n\nUsage:\n-----\n\nTo check specific WCAG levels\n```\nvar ccc = new ColorContrastChecker();\n\nvar color1 = \"#FFFFFF\";\nvar color2 = \"#000000;\n\nif (ccc.isLevelAA(color1, color2, 14)) {\n    alert(\"Valid Level AA\");\n} else {\n    alert(\"Invalid Contrast\");\n}\n\n```\n\nTo check custom ratios\n```\nvar ccc = new ColorContrastChecker();\n\nvar color1 = \"#FFFFFF\";\nvar color2 = \"#000000;\nvar customRatio = 5.7;\n\n// No need for font size, now that we are using a custom ratio.\n// This is because we are no longer checking against WCAG requirements.\nif (ccc.isLevelCustom(color1, color2, customRatio)) {\n    alert(\"Above given ratio\");\n} else {\n    alert(\"Invalid Contrast\");\n}\n\n```\n\nAdvanced Usage:\n--------------\n\nYou can pass pairs and get results:\n\n\n```\n    var pairs = [\n        {\n            'colorA': '#000000',\n            'colorB': '#000000',  // All should fail\n            'fontSize': 14\n        },\n        {\n            'colorA': '#000000',\n            'colorB': '#FFFFFF',  //All should pass\n            'fontSize': 14\n        },\n        {\n            'colorA': '#000000',\n            'colorB': '#848484',  //AAA should fail\n            'fontSize': 14\n        },\n        {\n            'colorA': '#000000',\n            'colorB': '#848484',  //All should pass (because of font)\n            'fontSize': 19\n        },\n        {\n            'colorA': '#000000',\n            'colorB': '#757575',  //AA should pass AAA should fail\n            'fontSize': 14\n        },\n        {\n            'colorA': '#000000',\n            'colorB': '#656565',  //All should fail\n            'fontSize': 14\n        }\n    ];\n\n    var results = ccc.checkPairs(pairs);\n\n```\n\nThe result will look like this:\n\n```\n[\n    {\n        'WCAG_AA' : false,\n        'WCAG_AAA': false\n    },\n    {\n        'WCAG_AA' : true,\n        'WCAG_AAA': true\n    },\n    {\n        'WCAG_AA' : true,\n        'WCAG_AAA': false\n    },\n    {\n        'WCAG_AA' : true,\n        'WCAG_AAA': true\n    },\n    {\n        'WCAG_AA' : true,\n        'WCAG_AAA': false\n    },\n    {\n        'WCAG_AA' : false,\n        'WCAG_AAA': false\n    }\n]\n```\n\n## Tests\n\n  `npm test`\n\n## Contributing\n\nIn lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fcolor-contrast-checker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbc%2Fcolor-contrast-checker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fcolor-contrast-checker/lists"}