{"id":22542801,"url":"https://github.com/devonchurch/avocado","last_synced_at":"2026-04-19T04:33:42.396Z","repository":{"id":44850371,"uuid":"208414941","full_name":"devonChurch/avocado","owner":"devonChurch","description":"A React Application to create accessible color palettes that confirm to the WCAG Guidelines","archived":false,"fork":false,"pushed_at":"2022-01-22T00:22:09.000Z","size":1498,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T08:29:47.493Z","etag":null,"topics":["accessibility","color-palettes","color-swatches","drag-and-drop","reactjs","wcag-guidelines"],"latest_commit_sha":null,"homepage":"https://devonchurch.github.io/avocado/","language":"JavaScript","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/devonChurch.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}},"created_at":"2019-09-14T09:00:13.000Z","updated_at":"2023-10-20T03:46:31.000Z","dependencies_parsed_at":"2022-08-25T09:21:57.957Z","dependency_job_id":null,"html_url":"https://github.com/devonChurch/avocado","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Favocado","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Favocado/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Favocado/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devonChurch%2Favocado/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devonChurch","download_url":"https://codeload.github.com/devonChurch/avocado/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245991561,"owners_count":20706126,"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","color-palettes","color-swatches","drag-and-drop","reactjs","wcag-guidelines"],"created_at":"2024-12-07T13:12:47.002Z","updated_at":"2026-04-19T04:33:37.373Z","avatar_url":"https://github.com/devonChurch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Avocado 🥑😋\n\nA **React** Application to create _*accessible color palettes*_ that confirm to the [WCAG Guidelines](https://www.w3.org/TR/WCAG21/)\n\n---\n\n### ℹ️ ➡️ [**Try there application _here_**](https://devonchurch.github.io/avocado/) 📱 💻 🖥️\n\n---\n\n## 💡 Sharable URL's\n\nAs you create color palettes we automatically generate a corresponding URL that you can share with others.\n\n### Below are some example color palettes to start you off.\n\n[\u003cimg width=\"300\" alt=\"Purple palette\" src=\"https://user-images.githubusercontent.com/15273233/70855475-2b166280-1f30-11ea-9786-b640a9fb3a8f.png\"\u003e](https://devonchurch.github.io/avocado/?s%5B0%5D=%23e6d6d1\u0026s%5B1%5D=%23b0d1dc\u0026s%5B2%5D=%23ada0b2\u0026s%5B3%5D=%236b5a70\u0026s%5B4%5D=%23532e39\u0026c%5B0%5D%5B0%5D=1\u0026c%5B0%5D%5B1%5D=4\u0026c%5B1%5D%5B0%5D=0\u0026c%5B1%5D%5B1%5D=2)\n[\u003cimg width=\"300\" alt=\"Bright palette\" src=\"https://user-images.githubusercontent.com/15273233/70855476-2b166280-1f30-11ea-9e88-393d3d770cd6.png\"\u003e](https://devonchurch.github.io/avocado/?s%5B0%5D=%23202e42\u0026s%5B1%5D=%2338a8b7\u0026s%5B2%5D=%23f4ebd7\u0026s%5B3%5D=%23f0a06d\u0026s%5B4%5D=%23d65c5b\u0026c%5B0%5D%5B0%5D=1\u0026c%5B0%5D%5B1%5D=0\u0026c%5B1%5D%5B0%5D=0\u0026c%5B1%5D%5B1%5D=3)\n[\u003cimg width=\"300\" alt=\"Green palette\" src=\"https://user-images.githubusercontent.com/15273233/70855477-2b166280-1f30-11ea-9cc9-9eae3b06bfd2.png\"\u003e](https://devonchurch.github.io/avocado/?s%5B0%5D=%23ddf4a1\u0026s%5B1%5D=%239fd250\u0026s%5B2%5D=%237c8369\u0026s%5B3%5D=%236c695d\u0026s%5B4%5D=%2368444d\u0026c%5B0%5D%5B0%5D=4\u0026c%5B0%5D%5B1%5D=0\u0026c%5B1%5D%5B0%5D=0\u0026c%5B1%5D%5B1%5D=3)\n\n---\n\n## 💡 Reorder colors palette\n\nYou can drag individual color swatches to re-order their sequence.\n\n![Reorder swatch example](https://user-images.githubusercontent.com/15273233/72674067-55cb7c00-3ad7-11ea-9885-18b295e49c63.gif)\n\nColor swatches are presented flush with one another to better portray any incremental color differences.\n\n\u003cimg width=\"521\" alt=\"color increment example\" src=\"https://user-images.githubusercontent.com/15273233/70855515-cf000e00-1f30-11ea-8e07-b1dd70868207.png\"\u003e\n\n---\n\n## 💡 Updating a color swatch\n\nYou can update a swatch reference and have _*all*_ of its inherited references reflect the color change. This feature allows for great flexibility to try new color combinations with little effort.\n\n![updating color swatch example](https://user-images.githubusercontent.com/15273233/70855526-15556d00-1f31-11ea-839c-3c4a284a59ca.gif)\n\n---\n\n## 💡 Accessibility reference\n\nColor combinations show the accessibility of their combined contrast via the following three identifiers.\n\n- ❌ `---` = **Poor** contrast ratio\n\n- ✅ `AA-` = **Acceptable** contrast ratio\n\n- ✅ `AAA` = **Excellent** contest ratio\n\n![accessibility reference example](https://user-images.githubusercontent.com/15273233/70855555-7bda8b00-1f31-11ea-8fe4-98642491a073.gif)\n\n---\n\n## 💡 Reveal color combinations\n\nHovering over a color combination reveals its corresponding color swatches.\n\n![reveal color combinations example](https://user-images.githubusercontent.com/15273233/70855561-a9273900-1f31-11ea-86da-f4d14b1145a7.gif)\n\n---\n\n## 💡 Delete color assets\n\nToggling on _**delete mode**_ allows you to remove color swatches and combinations from your palette.\n\n![delete example](https://user-images.githubusercontent.com/15273233/70855571-c9ef8e80-1f31-11ea-9d6c-0864c9f4120a.gif)\n\nWe make sure to **not** allow users to delete color swatches that are currently associated with a color combination to avoid accidental removals 👏\n\n---\n\n## 💡 Create new color swatches\n\nYou can duplicate the last color swatch in your list by _clicking_ the _(add swatch)_ ➕ button.\n\nAlternatively, you can duplicate _any_ existing color swatch by dropping it onto the _(add swatch)_ ➕ button.\n\n![create color swatch example](https://user-images.githubusercontent.com/15273233/70855521-ee973680-1f30-11ea-882b-c7c8f5c1fd1c.gif)\n\n---\n\n## 💡 Create new color combinations\n\nYou can duplicate the last color combination in your list by _clicking_ the _(add combination)_ ➕ button.\n\nAlternatively, you can drop a color swatch onto the _(add combination)_ ➕ button to create a new combination. The top _slot_ represents the **foreground** color with the bottom assigned to the **background**.\n\n![create new combination example](https://user-images.githubusercontent.com/15273233/70855578-07541c00-1f32-11ea-8d2d-d20bdd92ca3e.gif)\n\nWhen dropping a color swatch onto a new combination _slot_ we automatically choose the best contrasting color from your list of color swatches as a starting point 👍\n\n---\n\n## 💡 Updating a color combination\n\nYou can drop existing color swatches onto any existing color combination _slot_ to update its palette reference.\n\n![update combination example](https://user-images.githubusercontent.com/15273233/70855588-323e7000-1f32-11ea-8b99-4051532538d1.gif)\n\n---\n\n## 💡 Dynamic UI color\n\nUI states like `:focus` and `:hover` get unique color blends based on their base color.\n\nIf a color is very light, a border will appear around the swatch to differentiate it from the background.\n\nLight and Dark colors also inherit inverted interaction states to create better contrast for our users.\n\n![dynamic ui example](https://user-images.githubusercontent.com/15273233/70855594-51d59880-1f32-11ea-87b0-010308e96b9b.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Favocado","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevonchurch%2Favocado","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevonchurch%2Favocado/lists"}