C3 - Color Contrast Checker

Status

Table of contents

1. 👀Description
2. ⚙️ Setup - local
   • Prerequisites
   • Technologies
   • Installation
3. 🚀 How to use

👀 Description

Calculate the contrast ratio of text and background colors. This project follows the Web Content Accessibility Guidelines (WCAG).

🔝

⚙️ Setup - local

Prerequisites

• node.js - nvm is recommended to manage node versions
• pnpm - recommended
• vscode
  • eslint (required)
  • prettier (required)
  • code spell checker (recommended)
• git

Technologies

• Astro
• react
• typescript
• tailwindcss
• commitlint
• eslint
• prettier
• husky
• lint-staged

Installation

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

🔝

🚀 How to use

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.

🔝