{"id":17356570,"url":"https://github.com/emoore29/acpd","last_synced_at":"2026-01-22T17:02:22.315Z","repository":{"id":207743002,"uuid":"716995142","full_name":"emoore29/acpd","owner":"emoore29","description":"A tool to assist developers and designers in creating accessible colour palettes for their websites.","archived":false,"fork":false,"pushed_at":"2024-10-07T06:43:57.000Z","size":219,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T09:26:38.288Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://acpd.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emoore29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2023-11-10T10:16:45.000Z","updated_at":"2024-10-07T06:44:01.000Z","dependencies_parsed_at":"2024-08-07T12:06:42.973Z","dependency_job_id":"6cc8d35a-4cb4-4de6-8f69-1f932d90e5e7","html_url":"https://github.com/emoore29/acpd","commit_stats":null,"previous_names":["athenascode/accessible-colour-palette-designer","emoore29/accessible-colour-palette-designer","emoore29/acpd"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/emoore29/acpd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Facpd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Facpd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Facpd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Facpd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emoore29","download_url":"https://codeload.github.com/emoore29/acpd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emoore29%2Facpd/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28667308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T14:01:31.714Z","status":"ssl_error","status_checked_at":"2026-01-22T13:59:23.143Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-15T18:57:20.426Z","updated_at":"2026-01-22T17:02:22.284Z","avatar_url":"https://github.com/emoore29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessible Colour Palette Designer\n\n## About\n\nAs the title suggests, this is a tool intended to help designers and web developers create colour palettes that follow the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum) for colour contrast.\n\nUsers should be able to choose colours to include in their palette by either inputting a hex code or using a colour picker. They can also include black or white by checking the relevant checkboxes.\n\nColour contrast between each possible combination is then automatically calculated and the combinations are displayed for the following categories: AAA, AA, and Low Contrast.\n\nThis allows users to experiment with colour choices until they find a palette that provides suitably accessible colours.\n\nThis was heavily inspired by [a11y Rocks](http://a11yrocks.com/colorPalette); however, I wanted a tool that would allow me to select colours with a picker and see the contrast options update in real time. \n\nBelow are some other resources I've found helpful for generating colour palettes:\n\n* [Adobe Color](https://color.adobe.com/create/color-wheel)\n* [Canva Color Wheel](https://www.canva.com/colors/color-wheel/)\n* [Coolors](https://coolors.co/463f3a-8a817c-bcb8b1-f4f3ee-e0afa0)\n* [Encycolorpedia](https://encycolorpedia.com/eb667d)\n* [Accessible Palette](https://accessiblepalette.com/) and a [great resource for understanding colour theory](https://wildbit.com/blog/accessible-palette-stop-using-hsl-for-color-systems)\n\n## Tech\n\nBuilt with Next.js, TypeScript, and CSS Modules. I chose Next because it's the framework I was most familiar with after learning React. I had not used much TypeScript before starting this project, so I've used it here to learn.\n\n## Components\n\nNote: I found the way I structured this app quite confusing. I've tried to summarise the purpose of each component below. Ideally I would go back and consider a different structure, such as using Redux to avoid so much prop drilling.\n\n### ChosenColor\n\nA simple square for displaying a user's chosen color for any given color in the palette.\n\n### ColorPalette\n\nA set of six colors are displayed to the user (each as a ChosenColor component). The user can update any of the colors via the ColorPicker component which will trigger a useEffect, in which the contrasts between each color in the palette are calculated.\n\nThis produces an array of paired colors with their respective contrasts, and this array is then filtered to create three arrays: AAA, AA, and Low contrast pairings. \n\nThese three arrays are passed up to the Home component where the pairings are stored such that the CombinationsSection and therefore Combinations components can access them.\n\n### ColorPicker\n\nIncludes a form in which the user can input their preferred color as hex, or select one with a Sketch from [react-color](https://uiwjs.github.io/react-color/). Updating this triggers the calculation as above.\n\n### CombinationsSection\n\nA section for displaying AAA, AA, and Low contrast Combinations.\n\n### Combinations\n\nDisplays each color contrast pairing for a given contrast array (AAA, AA, or Low) as ColorCombo components.\n\n### ColorCombo\n\nDisplays a given color pairing and its contrast.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femoore29%2Facpd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femoore29%2Facpd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femoore29%2Facpd/lists"}