Table of contents
Calculate the contrast ratio of text and background colors. This project follows the Web Content Accessibility Guidelines (WCAG).
- node.js - nvm is recommended to manage node versions
- pnpm - recommended
- vscode
- eslint (required)
- prettier (required)
- code spell checker (recommended)
- git
To install the project, you need to clone the repository and install the dependencies.
# with ssh
git clone git@github.com:Proskynete/color-contrast-checker.git
# with https
git clone https://github.com/Proskynete/color-contrast-checker.git
# with GitHub CLI
gh repo clone Proskynete/color-contrast-checker
Go to the project folder and install the dependencies.
cd color-contrast-checker
pnpm install
Then you need the following script to run the project in localhost:4321
pnpm run dev
Once inside in the C3 site, we must paste the color of the text which we want to test inside the first input (or we can also select one from the same input). Then, we will have to do the same process, but now with the background color, within the second input. Once we have the two colors in the corresponding inputs, the application will tell us if the color contrast is accessible or not. We also have a section to preview the selected colors and how they look within a site. To do this, we can use the section next to the form. We can see it with dummy text.