{"id":20879927,"url":"https://github.com/mirayatech/color-contrast-checker","last_synced_at":"2025-05-12T16:32:03.144Z","repository":{"id":216836626,"uuid":"741592129","full_name":"mirayatech/color-contrast-checker","owner":"mirayatech","description":null,"archived":false,"fork":false,"pushed_at":"2024-01-12T15:26:31.000Z","size":163,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-01-13T06:22:42.000Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://color-contrast-checker-amber.vercel.app","language":"TypeScript","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/mirayatech.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2024-01-10T17:59:28.000Z","updated_at":"2024-01-13T06:23:00.012Z","dependencies_parsed_at":"2024-01-13T06:22:50.612Z","dependency_job_id":"c91a167b-2b67-4f54-97af-6cd659f21921","html_url":"https://github.com/mirayatech/color-contrast-checker","commit_stats":null,"previous_names":["mirayatech/color-contrast-checker"],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fcolor-contrast-checker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fcolor-contrast-checker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fcolor-contrast-checker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fcolor-contrast-checker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirayatech","download_url":"https://codeload.github.com/mirayatech/color-contrast-checker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225142274,"owners_count":17427405,"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":[],"created_at":"2024-11-18T07:18:19.887Z","updated_at":"2024-11-18T07:18:20.358Z","avatar_url":"https://github.com/mirayatech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Color Contrast Checker ♿\n\nI've created a color contrast checker using React and TypeScript. The purpose of it was to understand how contrast ratios are calculated and to learn more about color luminance, which measures color brightness. I followed the [Venngage accessibility guidelines](https://venngage.com/blog/accessible) while building this project, and I got inspiration from the UI at [coolors.co](https://coolors.co/).The app is not responsive. I mainly focused on the functionalities since I already have plenty of projects that are responsive.\n\n## 📦 Technologies\n\n- `Vite`\n- `React.js`\n- `TypeScript`\n- `CSS`\n\n## 💭 The Idea\n\nThe main idea behind this project was my desire to gain a deeper understanding of how contrast ratios work by exploring luminance, which quantifies color brightness.\n\nLuminance is calculated by converting a color from its hexadecimal representation to RGB values and then applying the sRGB gamma correction.\n\nBy the way, sRGB gamma correction means adjusting colors on your screen to look right. It's like making sure the colors on your screen match the real world, so they don't appear too bright or too dark.\n\nThe [formula](https://stackoverflow-com.translate.goog/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color?_x_tr_sl=en\u0026_x_tr_tl=sv\u0026_x_tr_hl=sv\u0026_x_tr_pto=sc) for luminance is: `0.2126 * R + 0.7152 * G + 0.0722 * B`.\n\n```javascript\nexport const getLuminance = (hex: string): number =\u003e {\n  const rgb = parseInt(hex.slice(1), 16);\n  const r = (rgb \u003e\u003e 16) \u0026 0xff;\n  const g = (rgb \u003e\u003e 8) \u0026 0xff;\n  const b = (rgb \u003e\u003e 0) \u0026 0xff;\n\n  const sRGB = [r, g, b].map((value) =\u003e {\n    value /= 255;\n    return value \u003c= 0.03928\n      ? value / 12.92\n      : Math.pow((value + 0.055) / 1.055, 2.4);\n  });\n\n  return 0.2126 * sRGB[0] + 0.7152 * sRGB[1] + 0.0722 * sRGB[2];\n};\n```\n\nTo calculate the contrast ratio, I needed to determine the luminance of both the foreground and background colors.\n\nThe contrast ratio is then calculated by dividing the luminance of the brighter color by the luminance of the darker color. I use the following [formula](https://stackoverflow.com/questions/596216/formula-to-determine-perceived-brightness-of-rgb-color) for this calculation: `(brighter + 0.05) / (darker + 0.05)`.\n\n```javascript\nexport const getContrastRatio = (\n  foreground: string,\n  background: string\n): number =\u003e {\n  const lum1 = getLuminance(foreground);\n  const lum2 = getLuminance(background);\n  const brightest = Math.max(lum1, lum2);\n  const darkest = Math.min(lum1, lum2);\n  return (brightest + 0.05) / (darkest + 0.05);\n};\n```\n\n## 🚦 Running the Project\n\nTo run the project in your local environment, follow these steps:\n\n1. Clone the repository to your local machine.\n2. Run `npm install` or `yarn` in the project directory to install the required dependencies.\n3. Run `npm run start` or `yarn start` to get the project started.\n4. Open [http://localhost:5173](http://localhost:5173) (or the address shown in your console) in your web browser to view the app.\n\n## 🎬 Video\n\n\nhttps://github.com/mirayatech/color-contrast-checker/assets/71933266/4185451f-9b1c-4164-ad59-aec38f43fc08\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fcolor-contrast-checker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirayatech%2Fcolor-contrast-checker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fcolor-contrast-checker/lists"}