{"id":13553367,"url":"https://github.com/CoreyGinnivan/whocanuse","last_synced_at":"2025-04-03T05:30:45.761Z","repository":{"id":39601970,"uuid":"160623336","full_name":"CoreyGinnivan/whocanuse","owner":"CoreyGinnivan","description":"WhoCanUse is a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.","archived":false,"fork":false,"pushed_at":"2024-06-12T04:42:57.000Z","size":1720,"stargazers_count":457,"open_issues_count":11,"forks_count":48,"subscribers_count":11,"default_branch":"main","last_synced_at":"2024-11-04T01:30:37.553Z","etag":null,"topics":["a11y","accessibility","accessibility-service","color","contrast-ratio"],"latest_commit_sha":null,"homepage":"https://whocanuse.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CoreyGinnivan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":["coreyginnivan"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-12-06T05:27:05.000Z","updated_at":"2024-10-14T15:46:01.000Z","dependencies_parsed_at":"2024-08-01T12:22:45.698Z","dependency_job_id":"2e51e696-9c49-4316-9398-245cc69ac1b2","html_url":"https://github.com/CoreyGinnivan/whocanuse","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoreyGinnivan%2Fwhocanuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoreyGinnivan%2Fwhocanuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoreyGinnivan%2Fwhocanuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoreyGinnivan%2Fwhocanuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoreyGinnivan","download_url":"https://codeload.github.com/CoreyGinnivan/whocanuse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246944377,"owners_count":20858773,"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":["a11y","accessibility","accessibility-service","color","contrast-ratio"],"created_at":"2024-08-01T12:02:22.987Z","updated_at":"2025-04-03T05:30:45.395Z","avatar_url":"https://github.com/CoreyGinnivan.png","language":"JavaScript","funding_links":["https://github.com/sponsors/coreyginnivan"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"WhoCanUse Logo\" src=\"https://whocanuse.com/whocanuse_600.png\" width=\"100\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  WhoCanUse.com\n\u003c/h1\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)\n\n**What is WhoCanUse?**\n\u003cp\u003eIt's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.\u003c/p\u003e\n\n\u003cp\u003eThe \u003ca href=\"https://www.w3.org/TR/WCAG21/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eWeb Content Accessibility Guidelines (WCAG)\u003c/a\u003e covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision.\u003c/p\u003e\n\u003cp\u003eThe standard grading system is a great start, but I thought I'd try to humanize the people who are affected by the different grades.\u003c/p\u003e\n\n**What is WhoCanUse?**\n\u003cMediumText\u003eWhere did you get the info from?\u003c/MediumText\u003e\n\u003cp\u003eThe percentages are sourced from both \u003ca href=\"https://www.colour-blindness.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003ecolour-blindness.com\u003c/a\u003e and \u003ca href=\"https://www.visionaustralia.org/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eVision Australia\u003c/a\u003e. P.S. You're both the best, thankyou ✌️\u003c/Text\u003e\n\n**Your maths is off, it doesn't add up to 100%...?**\n\u003cp\u003eGood eyes! (haha) The population data provided are estimates for individual impairments, and don't cover the vast amount of visual impairments in the world. This is to give you not just an understanding of \u003cstrong\u003ehow\u003c/strong\u003e color contrast affects different people but also \u003cstrong\u003ewho\u003c/strong\u003e it can affect.\u003c/Text\u003e\n\n**I'm fascinated by how this works, can you tell me more?**\n\u003cp\u003eOf course! There's a few stages to get to this point. First we figure out the contrast between two HEX values. For this we're using a plugin called \u003ca href=\"https://vis4.net/chromajs/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003echroma.js\u003c/a\u003e - this does the heavy lifting for us. Once we have the ratio (and using font size and font weight) we can apply a grade to that specific color combo.\u003c/p\u003e\n\u003cp\u003eFor the color blindness options we're using another plugin aptly called \u003ca href=\"https://github.com/skratchdot/color-blind\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eColor-blind\u003c/a\u003e that converts our HEX codes in to ones that would be seen by people with the different impairments, then we can apply our same process to obtain the color ratios and determine their grade.\u003c/p\u003e\n\u003cp\u003eFor cataracts, glaucoma, low vision, and the situational events I've personally created simulations to help identify their rating.\u003c/p\u003e\n\n**What does a failing grade mean?**\n\u003cp\u003eThe grading uses a combination of color contrast, text size and text weight. A fail simply means that the color combination offers some visual strain to the person seeing it and should be avoided if possible.\u003c/p\u003e\n\n**Can I help contribute?**\n\nAbsolutely! This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!\n\nCheck out [CONTRIBUTING.md](CONTRIBUTING.md) for more info.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoreyGinnivan%2Fwhocanuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCoreyGinnivan%2Fwhocanuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoreyGinnivan%2Fwhocanuse/lists"}