Integration · Setup
Browser extension Contrast, color and an accessibility audit on any page you open
Auric Artisan for the browser puts the color picker, the contrast checker and an accessibility audit on the page you are viewing. This guide is the shortest path from installing it to fixing a first contrast failure; the extension’s own page describes every tool.
- Version
- 1.0.2
- Needs
- Chromium browsers, Firefox 115+
- Cost
- Free, no account
- Checked
Before you start
What you need
- A Chromium browser (Chrome, Edge, Brave, Opera, Vivaldi or Arc) or Firefox 115 or later.
- No account: there is no sign-in anywhere in the extension.
- For Safari only: a Mac with Xcode, to convert the package.
Setup
Step by step
-
Install it from your browser’s store
Every Chromium browser installs from the Chrome Web Store listing; Firefox has its own. Both serve version 1.0.2, and both update themselves.
-
Pin it to the toolbar
Open the browser’s extensions menu and pin Auric Artisan, so its icon stays beside the address bar.
-
Open it on a page
Go to the page you want to check, then click the icon or press Alt + Shift + A.
You should see: Home, with one-click actions for the page: Pick a colour, Contrast, Inspect and Audit this page.
-
Dock it beside the page, if you like
Chromium opens the same workspace in the side panel and Firefox in the sidebar, where it stays open while you browse.
-
Give the inspector and the audit a shortcut
Two commands ship without a key. Set one in the browser’s shortcut editor: paste the address below into the address bar in Chromium; in Firefox, open the add-ons page, choose the gear menu, then Manage Extension Shortcuts.
chrome://extensions/shortcuts
A first task
Find and fix a contrast failure
On any page of your own, this finds what fails and gives you a color that passes.
- Open the page and press Alt + Shift + A, then choose Audit this page.
- Read the findings. They are sorted by severity, from critical to minor, and each names the rule, the WCAG success criterion and the element. The audit runs off the main thread, so a large page stays responsive.
- Click a finding to outline its element; the numbered pins on the page match the list.
- For a contrast finding, take the nearest passing color it offers, or press Alt + Shift + C to check the pair with WCAG 2.2 and APCA and move to the nearest passing color in one click.
- Put the new color in your stylesheet, reload the page and run the audit again to confirm the finding is gone.
Keyboard shortcuts
| Action | Shortcut |
|---|---|
| Open Auric Artisan on the active tab | Alt + Shift + A |
| Open the contrast checker | Alt + Shift + C |
| Extract the page palette | Alt + Shift + E |
| Toggle the deuteranopia simulation | Alt + Shift + V |
| Inspect an element on the page | Not assigned |
| Run a full accessibility audit | Not assigned |
Limits
What it does not do
- Browsers keep extensions off their own pages, such as settings pages, the add-on stores and Firefox’s about: pages, so the tools cannot run there.
- An audit is a starting point. Some WCAG criteria need a person, such as whether a text alternative actually describes its image.
- Safari has no store listing. The package converts with Apple’s tool on a Mac, and you build it yourself in Xcode.
- A ZIP loaded by hand does not update itself, and in Firefox it lasts only until you quit. The store listings do both.
Privacy and access
What it can reach, and why
These are the permissions in the 1.0.2 package. Firefox’s package declares no data collection.
| Permission | Why it is needed |
|---|---|
<all_urls> | The tools work on whatever page you open, which cannot be known ahead of time. A script loads on each page and stays inert until you use a tool. |
activeTab | Act on the tab you open it from. |
scripting | Run a tool, such as the inspector or the audit, inside the page. |
storage | Keep settings, saved colors and palettes in the browser. |
clipboardWrite | Copy values and code when you ask it to. |
contextMenus | Add its entries to the right-click menu. |
sidePanel | Dock the workspace beside the page (Chromium only). |
Asked for only when you use a feature that needs it: clipboardRead, downloads, sessions.
Go further
The full reference
- Every tool in the extension
- ZIP packages, loading by hand, and Safari
- Privacy on the extension’s page
- The extension’s user guide
- The contrast checker on the site, with the same engine
- Accessible color and WCAG contrast, explained
Other integrations
- VS CodeUnderline low contrast in your stylesheets and fix it in place.
- REST APIConvert colors and check pairs from a server or a script.
- Design tokensExport one token system to Tailwind, CSS or Figma.
- Contrast embedPut a contrast checker on your own page.
- Tailwind themeStart a Tailwind v4 project with accessible components.
- React tokensTheme a React app from the token export.
- Figma variablesTurn Figma variables into CSS tokens.
- Contrast in CICheck your color pairs on every pull request.
Checked against
Where these facts come from
Versions, requirements and examples on this page were checked on . The store versions were read from the Chrome Web Store and the Firefox Add-ons API, and the permissions and shortcuts from the 1.0.2 release ZIP.
- Chrome Web Store: Auric Artisanchromewebstore.google.com
- Firefox Add-ons: Auric Artisanaddons.mozilla.org
- Chrome for Developers: chrome.commands (keyboard shortcuts)developer.chrome.com
- Mozilla Support: Manage extension shortcuts in Firefoxsupport.mozilla.org
- Apple Developer: Packaging a web extension for Safarideveloper.apple.com
Found a mistake? Write to us and we will correct it.