Auric Artisan Browser Extension User Guide

Auric Artisan is a browser extension for color, accessibility and front-end work. One interface, the extension page popup.html, appears in three places: the toolbar popup, the side panel in Chromium browsers (the sidebar in Firefox), and a separate window. It acts on the tab you are on only when you use a tool, and everything it saves stays in your browser.

• Version: 1.0.2, dated 2026-09-23, is the latest release. The number comes from extension/version.json; the release notes are in extension/CHANGELOG.md.
• One product ships: the suite, named Auric Artisan, with all 18 tools. The repository can also build three focused apps (Auric Color, Auric Accessibility and Auric Developer) for development, but they are not published.
• Spaces: Home, Colour, Check, Code and Saved.
• On websites: the element inspector, the audit overlay and vision filters, plus two features that stay off until you turn them on: Auric pickers for form controls and a custom right-click menu.
• Languages: English and हिन्दी (Hindi).

About the newest layout. The source also contains work that the changelog still lists under Unreleased: the side panel as the home base with a rail of spaces, the popup as a quick launcher, audit findings drawn over the page as numbered pins with a finding card and a page dock, and an inspector that hands its details to the side panel, with Inspect in side panel in the custom right-click menu. This guide describes the extension as it builds from source today. The 1.0.2 ZIP packages offered on the extension page include this work; the same page notes that the store listings serve the previous release, so a store install can still show the earlier layout.

The source tree holds no manifest. extension/build/build.mjs copies the packages, generates each manifest.json and writes one loadable folder per app and browser to extension/dist/<target>/<app>/. That folder is not committed, so build before you load. You need Node.js 18 or later; run the commands from the repository root.

Chrome, Edge, Brave, Opera and Vivaldi

1. Run npm run extension:build. To build only what you need, add -- --app suite --target chrome.
2. Open chrome://extensions, edge://extensions or the equivalent extensions page of your browser.
3. Turn on Developer mode.
4. Choose Load unpacked and select extension/dist/chrome/suite/.

Firefox 115 or later

1. Run npm run extension:build (or add -- --app suite --target firefox).
2. Open about:debugging#/runtime/this-firefox.
3. Choose Load Temporary Add-on and select extension/dist/firefox/suite/manifest.json.
4. A temporary add-on is removed when Firefox closes; load it again next time.

Safari is not built by this repository. On macOS, Apple's converter can wrap the Chromium build: xcrun safari-web-extension-converter extension/dist/chrome/suite, then build and sign the generated Xcode project. Safari has neither a side panel nor a sidebar, so there is no docked workspace there.

npm run extension:build:zip writes the store packages for the suite to extension/dist/: auric-suite-chrome-1.0.2.zip, byte-identical -edge- and -opera- copies, and auric-suite-firefox-1.0.2.zip.

The header holds the Auric Artisan wordmark (it opens auricartisan.com), the search field and the side panel, window, theme and Settings buttons. Beside the spaces sit a chip naming the tab the page tools act on (No page where extensions cannot run) and the Take the tour button. In the side panel, the theme and Settings buttons move to the foot of the rail.

• Home in the popup: four actions (Pick a colour, Contrast with its shortcut when one is set, Inspect and Audit this page), the Last pair from Contrast with its ratio, Recent colors, quick buttons for Page palette, Vision and Search, and Open the side panel where the browser has one.
• Home in the side panel: the tab card (the linked site with Pick, Inspect, Audit and Vision; after an audit of that page it says when it ran and how many elements failed, with Show on page), Colour of the day, On this page (the page's own colors; a click opens one in the Picker), Recent, Continue (the last tool and what you were doing), Pinned (up to 8 tools, chosen with Edit) and On auricartisan.com.
• Search: press / or Ctrl K. It finds tools, auricartisan.com pages, actions and settings; every word you type must match, and an exact title comes first. Arrow keys move, Enter runs a result and Escape clears the search.
• Escape outside the search closes an open tool and returns to Home. Each space remembers the last tool you used in it.
• The tour: five steps (search, pick and convert, inspect, design tokens and accessibility checks). It opens on first run; replay it from the header or from Settings › Shortcuts › Replay the tour.

The Picker is the same color picker auricartisan.com uses. In the popup it is split: the spectrum, sliders and value field on the left, tabbed details on the right. In the side panel it becomes one column of collapsible sections and adds On this page and Recent.

• Formats: twelve, all editable: HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLAB, OKLCH, XYZ and P3. The copy button gives the ready-to-paste CSS value.
• Specs: luminance, contrast against white and black, WCAG pass levels, how much more saturated the color can go, and CSS values.
• Harmony: partner colors, with the hue rotated in HSL or in OKLCH.
• Scale: an 11-step OKLCH scale from 50 to 950, with the step nearest your color marked.
• Contrast: the WCAG 2 ratio and the APCA score as text on white, black or the page's own background; when it fails AA, the closest color that passes.
• Vision: the color as people with the four main color-vision deficiencies see it, with ΔE.
• Code: CSS, wide-gamut CSS, Tailwind v4, SwiftUI, Jetpack Compose and Android.

• Pick from page: uses the browser's EyeDropper API, first from the popup and then from the page. Where neither is available (Firefox, for one), a hint points you to Page palette, which reads every color the page uses.
• Save to library: the bookmark button next to Pick from page.
• Check as text and Check as background: send the color to Contrast.
• History: picked colors are added to History while Settings › Tools › Keep a colour history is on.

Read the page's colours checks up to 6,000 elements across 12 color properties: text, background, the four borders, outline, SVG fill and stroke, box shadow, caret and text decoration. Hex and rgb values held in CSS custom properties count three times. The 48 most used colors are kept and near-duplicates are merged.

• Modes: Most used, Dominant (k-means, eight colors), Sort by hue and Sort by lightness.
• View: a strip or a grid.
• Click a color for its name and values, then Pick, Contrast, Shades or Harmony.
• Copy: HEX, CSS, oklch() or JSON, to the clipboard.
• Framework: Tailwind config, Tailwind @theme, SCSS or W3C design tokens, to the clipboard.
• Export: SVG (copied), PNG (downloaded), ASE (downloaded), Save to the Library, where the newest 30 palettes are kept, or Open on auricartisan.com at /library/palette/ with the colors in the address.

Image reads colors from a picture instead: drop, paste or browse for a PNG, JPG, WebP or GIF, or choose Capture the visible tab. Choose 6, 8, 12 or 16 colors. The image is read on your device. Then Open in Page palette, Copy HEX or Save palette.

These three tools sit behind the Picker: each has a Picker back button, and each also opens from search.

• Harmony builder: complementary, split complement, analogous, triadic, tetradic, square, monochromatic, double split or compound, shown on a color wheel. Copy the list, Send it to Page palette, or Save it as a palette.
• Scale generator: Tailwind 50–950, Material 50–900, and Tints, Shades and Tones in 11 steps, built in OKLCH. Name the scale (it starts as brand), click a step for its details and Make base to rebuild around it. Copy as CSS, SCSS, oklch() or JSON; Tailwind, @theme or W3C tokens; export SVG (copied) or PNG (downloaded); Save keeps the scale CSS as a snippet.
• Converter: type into any of ten fields (HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLCH, HWB and Name) and the others follow. Random, Invert and Complement give you a new starting color.

• Gradient: linear, radial or conic, from two or more stops (+ Stop adds one), with an angle in degrees.
• Interpolation: sRGB, OKLCH or HSL. OKLCH and HSL write out 13 stops so the middle stays vivid; the OKLCH option currently mixes in OKLab, its rectangular form.
• Gradient actions: Copy the CSS, Save snippet, Random or Reverse.
• Mix: two colors, A and B, at any percentage, in sRGB, Linear RGB, LAB (the default), OKLAB or HSL, with the blend modes Normal, Multiply, Screen, Overlay, Darken and Lighten.
• Mix result: an 11-step strip shows the path between the two; click the result to copy it.

Contrast compares a Text color with a Background color. A live preview shows large text, a sentence, 14px body text, a button, a link and a chip, above a verdict and the WCAG ratio.

• APCA: the Lc score, the tiers Lc 90, 75, 60, 45 and 30, and APCA readable sizes. Settings › Tools › Show APCA beside WCAG turns them off.
• Colour-vision check: the ratio for normal, protan, deutan and tritan vision.
• Fix it: choose a target (AA 4.5:1, AA Large 3:1, AAA 7:1, APCA Lc 60 or APCA Lc 75), then Fix text or Fix background for the nearest passing color. Up to six same-hue suggestions appear for text and for background.
• Swap exchanges the two colors; Copy report copies a full contrast report.

Vision filters the live page in place. There are twelve simulations, each at any strength from 0 to 100 percent.

• Color vision: Protanopia, Deuteranopia, Tritanopia, Achromatopsia, Protanomaly, Deuteranomaly, Tritanomaly and Achromatomaly.
• Low vision: Cataracts, Low vision, Glaucoma and AMD.
• Side-by-side filters only half of the page so you can compare.
• Capture downloads the filtered visible tab as a PNG.
• Clear removes the filter. Filters stay on while you move around a single-page site.
• The same simulations are reachable from the right-click menus, and Alt+Shift+V toggles deuteranopia.

In Check › Audit, Run the audit runs two passes on the tab: a fast contrast scan of its text, and the accessibility rule engine at WCAG 2.2 level AA. The engine has 80 rules; the 78 at levels A and AA run here.

• The report: a score out of 100 from the rule engine, what was checked and when, a bar of failing, borderline, review and passed text, and the four counts.
• Each finding is a numbered row: the color pair, the text, the element and its size, and the ratio with what it needs (a borderline row says what it passes). Select a row to show it on the page; the selected row offers Fix in Contrast and Copy selector.
• Outline on the page draws a box and a numbered pin over every finding. Pin 2 is row 2, and selecting either selects both.
• On the page, the selected finding opens a card with the nearest passing text color, Try the fix (a preview you can undo), Copy CSS and Next. A page dock counts what failed, steps through the findings and closes with Done or Escape. The overlay is drawn over the site; nothing of the page's own markup changes.
• Run again, Export JSON or Export CSV (both copied to the clipboard).
• Deep page audit (Settings › Tools, on by default) lets the contrast scan check 3,500 elements and report 160 issues; turned off, it stops at 1,800 elements and 80 issues. The rule engine has its own limits: 25,000 elements and 250 issues per rule, and 30 seconds.
• Outline issues after an audit (off by default) outlines failing elements as soon as the audit finishes.

Findings (Check › Findings) pools the audit, the contrast scan and the element you inspected into one list ordered by severity, with Failing, Warnings and Total counts. Each finding offers the actions that fit it: Show on page, Copy selector, Inspect, Check contrast or Copy. Audit results are kept only while the popup or panel is open.

Start the inspector from Code › Inspect › Select element, from Home's Inspect, from the right-click menus, or with a shortcut you assign in the browser. Hover anything for a compact card with the element's name and size, contrast with AA and AAA, font, colors and padding. Click, or press P, to pin the full card; drag its grip to move it.

• Contrast first: an "Aa" sample in the element's own colors and font, the ratio, pass badges and, when AA fails, the nearest text color that passes.
• Seven sections on the pinned card: Box model, Colours, Layout, Typography, Effects, Accessibility and CSS. Click any value to copy it.
• Keys: Arrow Up and Down move to the parent and first child, Arrow Left and Right to the siblings, C copies CSS, S the selector, J JSON, Enter copies CSS, and Escape unpins, then stops.
• With the side panel open in that window, the pinned element keeps the compact card on the page, marked "Details in the side panel", and the panel shows Code › Inspect.

The Inspect tool shows the same element in depth in five tabs: Overview (box model, colors, typography, page metrics, Use text colour and Use background), Styles (filterable computed properties and matched rules), A11y (role, name, state, contrast and ARIA attributes), DOM (attributes, pseudo-elements and up to 12 KB of markup) and Live CSS, where Apply to page previews your CSS on that element only. Reset or Stop restores it. Parent, Child, Prev and Next move the selection.

• Tokens: Read the tokens checks up to 4,000 elements and lists the page's CSS custom properties (up to 240), its top fonts (up to 8) and its type scale (up to 16 sizes).
• Token exports: CSS vars, W3C tokens, Tailwind @theme or JSON; Save snippet keeps the CSS variables.
• Snippets: a store for code you want to keep, up to 200 snippets of up to 20,000 characters each. Gradient, Scale, Tokens and the inspector's Live CSS save here, and + New takes anything you paste or type.
• Finding and using snippets: search them, filter to This site, Copy all, Export file or Clear all (which asks first).

• Library: up to 500 saved colors and the newest 30 saved palettes. Click a color to copy it in your copy format; right-click it or press Delete to remove it. Click a palette to open it in Page palette. Export copies everything as JSON.
• Toolbar badge: the number of saved colors, shown as 99+ above 99.
• History: your last 50 picked colors. Click to copy, double-click to open in the Picker. Clear empties it at once.
• On the web: fourteen auricartisan.com tools and libraries, each opened in a new tab, including the Analyzer, Palettes, Ishihara plates, the Science lab and Learn.

Turn on Settings › Pickers › Auric pickers on websites and the form controls on web pages open Auric panels instead of the browser's own. The native control stays in the page, and the page still receives real input and change events, so forms and frameworks keep working.

• Types: Colour, Select, Multi-select, Suggestions (datalist), Date, Date & time, Month, Week, Time, Number, Range, File, and Checkbox & radio. Each has its own switch in Settings › Pickers.
• Dropdowns with more than seven options open with a search field that filters as you type. Multi-select shows chips, a count, Select all and Clear.
• The color picker on a page is a compact 296 px popover with five toggles: Shades, Harmony, Contrast, Vision and Page (or Recent).
• Theme: on Dark or Light every control uses that theme; on System they match the page they are on.
• Where pickers stay native: always on auricartisan.com, on sites in Never on, for types you switch off, and for controls the site already designed while Leave designed controls alone is on (the default).
• For site owners: data-aa-picker-skip on a control keeps it native; color inputs use data-cp-skip.

Open Settings with the gear in the header, or search for a setting by name. It is a two-pane view, and every change is saved as you make it.

A backup is a JSON file with your settings, history, library and snippets. Reset all settings keeps your history, library and snippets.

Change shortcuts on chrome://extensions/shortcuts in Chromium or from about:addons in Firefox; Settings › Shortcuts › Change them in the browser opens the right page.

The browser's own right-click menu gets these items while Settings › Right-click › Items in the browser's menu is on: Inspect element, Extract page palette, Audit contrast on page, Simulate · Protanopia, Simulate · Deuteranopia, Simulate · Tritanopia, Simulate · Achromatopsia and Clear vision filter.

The custom right-click menu (Settings › Right-click › Custom right-click menu) is built around what you clicked. A header names it, with an element's size and text contrast; a quick bar holds up to six one-click actions (Back, Forward, Reload, Copy URL and Capture to start with); a field filters every action; the clicked thing's own actions come next; and Auric tools, Page, Tab & window and View are one row each with a submenu.

• On an element the first action is Inspect in side panel in Chromium and Inspect element in Firefox, followed by Copy selector (CSS, JavaScript, Playwright or XPath), color picking, contrast and color-vision tools.
• Selections, links, images, media and text fields get their own actions, such as web search (press 1–6 to choose Google, Bing, DuckDuckGo, Wikipedia, YouTube or Google Images), QR codes, copy as Markdown and Save as.
• Stepping aside: with Step aside for a site's own menu on, a page that shows its own right-click menu keeps it. Shift + right-click is always the browser's menu, and auricartisan.com always keeps its own.
• Permissions: turning the menu on asks for three optional permissions. Actions that need one show an Allow chip until it is granted.

The extension makes no network requests of its own: no accounts, analytics or telemetry. What it keeps lives in the browser's extension storage and is not synced. It never writes to a website's own storage. Links to auricartisan.com, web search and translation open only when you choose them. The Firefox build declares that it collects no data. The full policy is the extension privacy policy.

• The tab chip says No page, or a page tool does nothing: browsers do not let extensions run on their own pages (chrome://, the web stores, about:). Open an ordinary web page.
• Load unpacked finds no manifest: select extension/dist/chrome/suite/ after running npm run extension:build; the extension/ folder itself has no manifest.
• Pick from page shows a hint instead of the eyedropper: the browser has no EyeDropper API (Firefox, for one). Use Page palette.
• Pickers do not appear on a site: check that Auric pickers on websites and that type are on, and that the site is not under Never on. On auricartisan.com they are always off, and designed controls are left alone while that setting is on.
• The custom right-click menu does not appear: turn it on and accept the permission prompt. With Step aside on, a page's own menu wins; Shift + right-click always reaches the browser's menu.
• The layout differs from this guide: a store install can serve the previous release. Build from source or use the 1.0.2 ZIP on the extension page.
• A shortcut does nothing: another extension or the browser may own it. Reassign it on the shortcuts page.
• Something broke after changing settings: Settings › Data › Reset all settings. It keeps your history, library and snippets.

For implementation details, see the Browser Extension Developer Reference.