{"id":17216256,"url":"https://github.com/exhuma/readable-color","last_synced_at":"2025-04-13T22:51:25.999Z","repository":{"id":208870460,"uuid":"722683356","full_name":"exhuma/readable-color","owner":"exhuma","description":"Generate a color that is readabe on a given background","archived":false,"fork":false,"pushed_at":"2024-05-20T11:11:12.000Z","size":161,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T13:07:04.862Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/exhuma.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-11-23T17:31:28.000Z","updated_at":"2024-05-20T11:08:43.000Z","dependencies_parsed_at":"2024-05-20T12:37:21.658Z","dependency_job_id":null,"html_url":"https://github.com/exhuma/readable-color","commit_stats":null,"previous_names":["exhuma/color-a11y"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exhuma%2Freadable-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exhuma%2Freadable-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exhuma%2Freadable-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/exhuma%2Freadable-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/exhuma","download_url":"https://codeload.github.com/exhuma/readable-color/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248794561,"owners_count":21162614,"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":[],"created_at":"2024-10-15T03:27:18.496Z","updated_at":"2025-04-13T22:51:25.966Z","avatar_url":"https://github.com/exhuma.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# readable-color\n\nThe project provides a function to determine a color that - according to\nestablished algorithms - should be easily readable on a given background.\n\nExample use-case: You want to display text on a GUI element with an unknown\nbackground color f.ex. if the user can pick the color or if the color is\ngenerated from other values.\n\nThe project exposes four algorithms/methods:\n\n- W3C (default if no method is specified): See\n  http://www.w3.org/TR/AERT#color-contrast\n- WCAG: See https://www.w3.org/WAI/WCAG22/Techniques/general/G18.html\n- Luminosity: Simple 10% luminosity difference between foreground and background\n- LuminosityContrast: See https://colorusage.arc.nasa.gov/luminance_cont.php\n\nSee demo at https://codepen.io/Michel-Albert/pen/eYxrXeG\n\nThe library shifts the \"lightness\" of the background-color until a readable\nvalue is found. If none is found, it will stop at either \"full-black\" or\n\"full-white\". This latter \"cutoff\" may lead to colors that are still unreadable\nin edge-cases, depending on the chosen method.\n\nNOTE: The best results have so far been achieved with the `W3C` and `WCAG`\nmethods. The others are still present for backwards-compatibility and\nreference.\n\nExample:\n\n```javascript\nimport { getReadableColor } from \"@exhuma/readable-color\";\n\n// Get a readable color with the default method.\nconst readableColor = getReadableColor(\"#123456\");\n\n// example using another method.\nconst anotherColor = getReadableColor(\"#123456\", \"WCAG\");\n\nconst theElement = document.getElementById(\"my-element\");\ntheElement.style.color = readableColor;\n```\n\n## Development\n\nTo install dependencies:\n\n```bash\nnpm install\n```\n\nTo build:\n\n```bash\nnpm run build\n```\n\nTo run a dev-server:\n\n```bash\nnpm run dev\n```\n\nThen access: http://localhost:5173/src/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexhuma%2Freadable-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fexhuma%2Freadable-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fexhuma%2Freadable-color/lists"}