Check contrast ratio of any element on website by hovering over it

Latest Version

Version

0.0.1

Update

November 18, 2022

Size

13.16KiB

Developer

Contrast Ratio Dropper Extension

The Contrast Ratio Dropper is the easiest and fastest way to see if an element on your website has enough contrast. Just open the extension, then click on the text you want to check, it instantly calculates contrast ratio using background color of element and color of text.

Contrast ratio makes impact on SEO and Accessibility and it’s very important for every website. The contrast ratio is a measure of how different the luminance of an element is compared to its background.

Ideal contrast ratio should be > 4.5 extension will detect and shows contrast ratio of element hovered on.

Usage :-
* Click on the extension and hover on any text to see contrast ratio
* Click on page or extension again to deactivate

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Contrast Ratio Dropper", "description": "Check contrast ratio of any element on website by hovering over it", "version": "0.0.1", "manifest_version": 3, "icons": { "16": "img/logo-16.png", "32": "img/logo-34.png", "48": "img/logo-48.png", "128": "img/logo-128.png" }, "action": {}, "background": { "service_worker": "service-worker-loader.js", "type": "module" }, "content_scripts": [ { "js": [ "assets/content-script-loader.chunk-96ad4b5b.d4f928c0.js" ], "matches": [ "http://*/*", "https://*/*" ] } ], "web_accessible_resources": [ { "matches": [], "resources": [ "img/logo-16.png", "img/logo-34.png", "img/logo-48.png", "img/logo-128.png" ], "use_dynamic_url": false }, { "matches": [ "http://*/*", "https://*/*" ], "resources": [ "assets/chunk-96ad4b5b.js" ], "use_dynamic_url": true } ], "permissions": [ "activeTab" ]}

Download CRX(13.16KiB)