https://github.com/AlexGarrixen/Cool-Contrast
Inspect the contrast in color combinations, making sure to comply with the accessibility guidelines established by WCAG.
https://github.com/AlexGarrixen/Cool-Contrast
color-contrast color-contrast-checker color-tool contrast-tool nextjs panda-css pandacss react wcag-contrast
Last synced: 3 months ago
JSON representation
Inspect the contrast in color combinations, making sure to comply with the accessibility guidelines established by WCAG.
- Host: GitHub
- URL: https://github.com/AlexGarrixen/Cool-Contrast
- Owner: AlexGarrixen
- License: mit
- Created: 2023-12-04T16:25:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-23T17:50:54.000Z (12 months ago)
- Last Synced: 2024-06-24T17:42:49.637Z (12 months ago)
- Topics: color-contrast, color-contrast-checker, color-tool, contrast-tool, nextjs, panda-css, pandacss, react, wcag-contrast
- Language: TypeScript
- Homepage: https://coolcontrast.vercel.app
- Size: 2.39 MB
- Stars: 79
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Features
- 🔎 Feedback on contrast ratio and compliance levels.
- ⚡️ Suggestions to enhance your colors contrast.
- 👀 Preview the results with samples, such as a minimalistic page or a set of UI elements.
- 🎨 Editing in different color spaces.
## Install
Install packages
```bash
npm install
```
Run to generate panda-css output
```bash
npm run panda:prepare
```
Start the dev server
```bash
npm run dev
```
## Building
```bash
npm run panda:prepare && npm run build
```
## Testing
```bash
# execute test suites
npm run test
# generates code coverage reports
npm run test:coverage
```
## License
MIT License © 2023-2024-Present [Alex Garrixen](https://github.com/AlexGarrixen)