{"id":23653529,"url":"https://github.com/techeng322/contrast","last_synced_at":"2025-11-19T08:30:19.483Z","repository":{"id":206809520,"uuid":"716276863","full_name":"techeng322/Contrast","owner":"techeng322","description":null,"archived":false,"fork":false,"pushed_at":"2023-11-12T12:36:39.000Z","size":575,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T17:54:14.647Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techeng322.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-11-08T19:54:37.000Z","updated_at":"2023-11-17T16:08:33.000Z","dependencies_parsed_at":"2023-11-12T14:48:49.994Z","dependency_job_id":null,"html_url":"https://github.com/techeng322/Contrast","commit_stats":null,"previous_names":["brittneytech818/contrast","paultech322/contrast","techeng322/contrast"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techeng322%2FContrast","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techeng322%2FContrast/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techeng322%2FContrast/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techeng322%2FContrast/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techeng322","download_url":"https://codeload.github.com/techeng322/Contrast/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239619570,"owners_count":19669447,"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-12-28T17:54:21.587Z","updated_at":"2025-11-19T08:30:19.415Z","avatar_url":"https://github.com/techeng322.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n   \u003cimg src=\"./assets/logo.png\" width=\"125\" /\u003e\n   \u003ch1 align=\"center\"\u003e\n      Contrast\n   \u003c/h1\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   Ensure colors pass WCAG color contrast guidelines \n   \n   Contrast allows you to quickly know if foreground and background colors pass accessibility guidelines defined by the W3C. It reports if the colors chosen pass normal text, large text, and UI component requirements as well as what level they pass (A, AA, or AAA). \n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"./assets/contrast.png\" width=\"450\" /\u003e\n\u003c/p\u003e\n\n## Usage\n\nContrast is available on the web: http://liamdebeasi.github.io/contrast/\n\nI recommend [installing Contrast as a Progressive Web App (PWA)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Installing#installing_pwas) for easier access. This will allow you to add a shortcut to your home screen or dock and run Contrast as a standalone application.\n\nContrast will automatically update when bug fixes and new features are available and can also be used offline.\n\n### Selecting Colors\n\n**Eye Dropper**\n\nThe eyedropper tool can be used to select a specific color anywhere on your screen, even if the color is displayed outside of Contrast. [^1]\n\n**Text Input**\n\nThe selected foreground and background colors are displayed in their respective inputs. However, these inputs can be edited to any valid hex color.\n\n**Color Palette**\n\nThe color palette tool can be used to bring up the browser's native color picker for more advanced color selection.\n\n### Copying Colors\n\nThe clipboard icon can be used to copy the foreground or background color to your clipboard for usage outside of the app.\n\n### Viewing Results\n\nThe color contrast ratio will be displayed at the top of the screen. The color contrast levels for each type of web content test will be displayed below that. The table below lists the possible results for each content type:\n\n| Content Type | Possible Values |\n| - | - |\n| Small Text | A/Fail, AA, AAA |\n| Large Text | A/Fail, AA, AAA |\n| UI Components | A/Fail, AA |\n\n## Browser Support\n\n| Browser | Version |\n| - | - |\n| Safari | 16+ [^1] |\n| Chrome/Edge | 100+ [^2] |\n| Firefox | 100+ [^1] |\n\nContrast likely works on older versions of these browsers. However, I work on this project in my free time, so I intentionally kept the browser support scope narrow.\n\n## Local Development\n\n### Install dependencies\n\n```shell\npnpm install\n```\n\n### Run dev server\n\n```shell\npnpm run dev\n```\n\n### Testing Changes\n\nContrast uses [Playwright](https://playwright.dev) and [Axe](https://github.com/dequelabs/axe-core) for testing.\n\n```shell\n# Installs the latest browsers if needed. \n# You only need to do this on first setup and\n# whenever the Playwright dependency is updated.\npnpm playwright install\n\n# Run tests\npnpm run test\n```\n\n## Contributing\n\nMy day job involves building [Ionic Framework](http://github.com/ionic-team/ionic-framework), so I will fix bugs, add new features, and respond to questions as time allows. If you see a bug, please feel free to submit a pull request!\n\n## Acknowledgments\n\nContrast was inspired by https://contrasteapp.com. Thanks for making such a great app!\n\n[^1]: As of November 2023, Safari and Firefox do not support the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper), so the eye dropper feature is not available in those browsers. However, using the color palette picker lets you access an eye dropper tool once the color palette picker menu appears.\n\n[^2]: As of November 2023, there is a known bug in Blink (the engine that powers Chrome and Edge) that causes the color palette picker to not appear when Contrast is installed on macOS. This issue should be resolved with the upcoming Chrome v121 release. See https://bugs.chromium.org/p/chromium/issues/detail?id=1488347 for more information.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftecheng322%2Fcontrast","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftecheng322%2Fcontrast","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftecheng322%2Fcontrast/lists"}