{"id":50788215,"url":"https://github.com/peterbenoit/contrast-check","last_synced_at":"2026-06-12T09:32:44.291Z","repository":{"id":351563792,"uuid":"1210612987","full_name":"peterbenoit/contrast-check","owner":"peterbenoit","description":"A lightweight Chrome extension that shows WCAG contrast ratios on hover. No panel to open, no full-page audit. Point at any text and see if it passes.","archived":false,"fork":false,"pushed_at":"2026-04-15T13:57:56.000Z","size":39,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-13T10:49:32.874Z","etag":null,"topics":["chrome-extension","contrast","wcag","wcag-contrast"],"latest_commit_sha":null,"homepage":"https://www.peterbenoit.com/extensions/contrast-check","language":"JavaScript","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/peterbenoit.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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-14T15:30:02.000Z","updated_at":"2026-04-15T13:57:59.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/peterbenoit/contrast-check","commit_stats":null,"previous_names":["peterbenoit/contrast-check"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/peterbenoit/contrast-check","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fcontrast-check","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fcontrast-check/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fcontrast-check/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fcontrast-check/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterbenoit","download_url":"https://codeload.github.com/peterbenoit/contrast-check/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterbenoit%2Fcontrast-check/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34238713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-12T02:00:06.859Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["chrome-extension","contrast","wcag","wcag-contrast"],"created_at":"2026-06-12T09:32:43.607Z","updated_at":"2026-06-12T09:32:44.279Z","avatar_url":"https://github.com/peterbenoit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contrast Check\n\nA lightweight Chrome extension that shows WCAG contrast ratios on hover. No panel to open, no full-page audit. Point at any text and see if it passes.\n\n## Features\n\n- **Hover to inspect**: Move your cursor over any text element to see its contrast ratio instantly\n- **WCAG 2.1 compliant**: Shows pass/fail for AA and AAA, with large text detection\n- **Background resolution**: Walks up the DOM to find the true effective background color, compositing semi-transparent layers\n- **Background image detection**: Flags elements over background images or gradients instead of giving a wrong answer\n- **Copy to clipboard**: Click any element to copy its foreground and background colors to clipboard\n- **Minimal permissions**: Only uses `activeTab` and `scripting`, no persistent access\n\n## How to use\n\n1. Click the Contrast Check icon in the toolbar to activate\n2. Hover over any text element to see the contrast tooltip\n3. Click an element to copy its colors to clipboard (format: `FG: #hex\\nBG: #hex`)\n4. Press **Escape** to deactivate, or click the toolbar icon again\n\n## Install from source\n\n1. Clone or download this repository\n2. Open `chrome://extensions/` in Chrome\n3. Enable **Developer mode** (top right)\n4. Click **Load unpacked** and select the `contrast-check` folder\n\n## How it works\n\nThe extension injects a content script that:\n\n1. Listens for mouse movement over the page\n2. For each text element, reads its computed `color` property\n3. Walks up the DOM tree to resolve the effective background color, compositing any semi-transparent `backgroundColor` layers\n4. Computes the WCAG 2.1 relative luminance and contrast ratio\n5. Evaluates pass/fail against AA (4.5:1 normal, 3:1 large) and AAA (7:1 normal, 4.5:1 large) thresholds\n6. Renders a tooltip with the results\n\n## Edge cases handled\n\n- Semi-transparent text colors composited against background\n- Semi-transparent background layers composited down to root\n- Large text detection (\u003e= 24px, or \u003e= 18.66px and bold)\n- Background images and gradients (flagged, not guessed)\n\n## License\n\nMIT\n\n## Author\n\n[Peter Benoit](https://www.peterbenoit.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fcontrast-check","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterbenoit%2Fcontrast-check","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterbenoit%2Fcontrast-check/lists"}