Create accessible color palettes

---

Key features

• WCAG contrast validation
• Graph-based color relationships
• Save to localStorage
• Share with a link (soon)
• Download as: (soon)
  • JSON
  • tailwind css variables (tailwind 4.0)
• Figma integration (to be confirmed) (?)

>> For more items see: backlog

Description

This project was created to help designers and developers to create accessible color systems.

It use a graph data structure to elaborate intricate color relationships and validation between then to ensure minimal contrast ratios based on WCAG rules.

Many of the current validation tools are based on a single color contrast validation, but this project aims to create a more complex system that can validate multiple colors at once and also demonstrating graphically the relationships between them.

---

Contribute

dependencies

• docker
• docker-compose
• node
• pnpm
• gh-cli

setup

• clone the project

  git clone https://github.com/hgodinho/paletaaa.git

• run development mode

  docker compose up -d dev

• run production build

  docker compose up -d prod

commit

• commit to dev branch and use conventional commits

  git add <files>
  pnpm commit # and follow the instructions

• create a pull request to main branch

  pnpm pr:main

hooks

Created with husky, the following hooks are available:

• pre-commit: typecheck, test, lint and format staged code;
• commit-msg: ensure conventional-commits format.

actions

• release: semantic-release will be created on push to main branch, it will add a new tag and create a new release on github;
• deploy: on release event, the project will be deployed to github pages;