The gap
Checking contrast usually means copying hex codes into a website, reading a ratio and then guessing a darker shade by hand until it passes, over and over for every pair.
Developer tools
Swatchwell
A colour picker and WCAG 2.2 contrast checker in your browser toolbar that tells you which levels pass and suggests the nearest colour that does.
- Chrome (Manifest V3)
- Firefox (Manifest V3)
- JavaScript
- EyeDropper API
- Coming soon
Coming soon
Not published on its store yet, so there is no buy or download link. PN Scripts does not take payment for it here.
What it solves
What it is
Swatchwell picks colours straight from the screen, gives the WCAG 2.2 verdict instantly and computes the nearest passing colour, keeping the hue, so the fix is a click instead of trial and error.
How you use it
Get from a failing colour pair to a passing one in seconds, with the exact ratio and a value ready to paste into CSS.
For designers, front-end developers and accessibility reviewers, Swatchwell is a private, offline contrast checker that goes beyond the ratio and proposes a compliant colour.
Who it is for
Use it when
- Checking button and link colours against WCAG AA before a release
- Finding an accessible shade of a brand colour without losing its hue
- Reviewing a live site for contrast problems during an accessibility audit
Built for
- Web designers and front-end developers
- Accessibility reviewers and QA testers
What is inside
Pick or type
Each row, text and background, has a pipette for any pixel on screen, a native colour picker and a field that accepts hex, rgb(), hsl(), oklch() and oklab() in old and new syntax. Translucent text is measured as it appears over the background.
The verdict
The ratio is shown truncated rather than rounded, as WCAG requires, with green or red badges for AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1) and interface parts (3:1), and a preview in 24px and 16px text.
The nearest passing colour
For every failing level Swatchwell searches OKLCH lightness in both directions and keeps the colour's hue and chroma where possible. Suggestions show the hex code and the exact ratio, and a background alternative appears when a nearby background passes.
Copy and keep
The selected colour copies as HEX, RGB, HSL or OKLCH, and the chosen format is remembered. Every picked, typed or applied colour goes to a palette of 24 that you can reuse with one click or clear.
Gallery
This file could not be loaded.
This file could not be loaded.
This file could not be loaded.
This file could not be loaded.
This file could not be loaded.
1 of 5
Specs
- Availability
- Coming soon
- Vendor
- PN Scripts
- Type
- Extension
- Platforms
- JavaScript
- Pricing
- One-time purchase Price to be announced.
- License
- Proprietary
- Deployment
- Download (ZIP with the unpacked extension for Chromium browsers and for Firefox)
- Maturity
- v1.0.0
Compatibility
| Platform or runtime | Supported versions | Tested up to |
|---|---|---|
| Google Chrome and Chromium browsers | 102 or newer | popup rendered in Chrome 155 (headless); not installed |
| Firefox | 115 or newer | not tested |
| Node.js (to run the tests) | 20 or newer | 22.23 |
Stack
- Chrome (Manifest V3)
- Firefox (Manifest V3)
- JavaScript
- EyeDropper API
Swatchwell is coming soon
It is finished and tested. It is not on sale yet; this page will say where to get it when it is.
Coming soon
Not published on its store yet, so there is no buy or download link. PN Scripts does not take payment for it here.
Questions
A browser extension for Chromium browsers and Firefox that picks colours, checks WCAG 2.2 contrast for text and interface parts, shows APCA as an extra readout and suggests the nearest colour that passes.
Chrome, Edge, Opera, Brave or another Chromium browser 102 or newer, or Firefox 115 or newer. Screen picking needs the EyeDropper API, which Chromium browsers have and Firefox does not. Installing means loading the unpacked folder in developer mode, or a temporary add-on in Firefox.
It does not scan whole pages, simulate colour blindness or check text over images and gradients. It is not published in a browser store. The packages were not installed in a real browser during testing, and the EyeDropper pick and the Firefox build were not exercised.
It is plain JavaScript with no dependencies: one module for colour maths, one for popup state and the popup itself. Created with AI assistance; the colour maths and popup logic were checked by PN Scripts with automated Node.js tests against published WCAG and APCA reference values, and the real popup was rendered in headless Google Chrome for every gallery image.
It is not on sale yet. When it is, this page will link to the store; PN Scripts does not take payment on this site.