Vesper Colors for Chrome

Vesper Colors for Chrome reads the colors a website actually uses, checks them against WCAG contrast requirements, and assembles them into a shareable Vesper Colors palette link. It lives in a Chrome side panel: pick colors from individual elements, scan a whole page, check the contrast of everything on it, build your palette, and open it at vespercolors.com.

Vesper Colors for Chrome is live on the Chrome Web Store - install it there, or see the Vesper Colors for Chrome page for an overview.

It reads the code, not the screen

Screen color pickers - including the browser's built-in eyedropper - sample rendered pixels. Those pixels are distorted by display color profiles, anti-aliasing, and layer compositing, so the value they return is not the value the site's developer wrote. Vesper Colors reads the page's computed CSS styles instead. Every hex it collects is exactly what the stylesheet authored, which is what belongs in a brand or client palette.

The trade for that accuracy: colors inside raster images and logos are out of scope. Image pixels are not authored CSS values, so the extension cannot extract them - deliberately.

Opening the panel

Click the Vesper Colors icon in the Chrome toolbar to open the side panel. Everything lives there: the capture actions, contrast results, your collected palette, and the palette link.

The panel belongs to the tab you opened it in. Switching tabs puts it away; switching back brings it up again with your palette intact. To use it in a different tab, click the toolbar icon there. Your collection is shared across every tab, so nothing is lost by moving.

Pick from page

Pick mode captures colors from a specific element:

  1. Click Pick from page. Hovering the page now outlines the element under your cursor.
  2. Click an element to lock it. The click is intercepted, so links and buttons do not fire while picking.
  3. The locked element's contrast is reported immediately, and its color roles appear below - text, background, backdrop, border, outline, SVG fill and stroke, and gradient stops - each with its exact hex.
  4. Click a role to add that color to your palette. Click another element to re-lock, or press Esc to stop.

Roles are listed separately because an element's own background often computes to transparent while the visible fill comes from an ancestor or a gradient. You pick the color that is actually there. The backdrop role is that resolved color - what is really behind the element once every semi-transparent layer above it has been composited.

Contrast on click

There is no pair to select. When you lock an element, the panel already knows its text color, the color behind it, and the font metrics that decide which threshold applies - so it just shows you the answer:

Because the extension can read font-size and font-weight, it applies WCAG's large-text exception itself - text is large at 24px, or at 18.66px when bold - rather than asking you which threshold you meant.

The color really behind the text

An element's own background-color is transparent more often than not; the color you see comes from an ancestor, sometimes through several partly transparent layers. Measuring against the element's own background would be wrong in the common case, so Vesper Colors walks up the tree and composites every visible layer down to the first opaque one.

Semi-transparent text is composited over that backdrop too, which matters more than it sounds: text set in rgba(0, 0, 0, 0.5) on white measures 3.98:1. Ignoring the alpha reports 21:1 - turning a failure into a perfect score.

Where the backdrop cannot be reduced to one flat color - a gradient, or an opacity value in the stack - the reading is marked as approximate rather than presented as exact.

Check page contrast

One action walks every element that paints its own text, measures each against its real backdrop at its correct threshold, and lists what it finds:

Text that is deliberately hidden - the screen-reader-only pattern, zero-size boxes, clipped elements - is excluded, since flagging it would bury the real failures. Very large pages stop after the first 6,000 text elements and say so.

This runs against the live page rather than fetched stylesheets, which is the point: it sees styles applied by JavaScript, whichever theme is currently active, and pages you have to be signed in to reach.

Compare two colors

Compare in the palette header opens a two-slot panel - a foreground and a background. Tap any color in your palette, any role on a picked element, any scan result, or any contrast finding to fill the highlighted slot; tap a slot to choose which one fills next. You get the ratio, all four badges, a swap button, and normal and large text samples drawn in the pair.

Check all pairs expands that to your whole palette at once: a grid of every combination, where each cell is drawn in the pair it reports - the row color as text on the column color as background - with a dot marking the level it clears. Click any cell to load that pair into compare.

Opening a pair in Vesper Colors Web

Every contrast surface has an Open in Colors button that carries the two colors into the web contrast checker with both preloaded. The extension and the web checker run the same contrast module, so the numbers agree exactly.

Scan whole page

One click walks every element's computed styles, normalizes each color to hex, merges duplicates (#fff, white, and rgb(255,255,255) collapse to one swatch), and ranks the results by how many times each color occurs. Brand backgrounds and body text typically float to the top. Where a color traces back to a same-origin CSS custom property, the token name (like --brand-primary) is shown next to the swatch. Tick the colors you want and add them to your palette.

Your palette

Collected colors render as full-width bands, each showing a large hex (click to copy), an editable label, and an automatic color name - the same Name That Color dataset the web palette viewer uses. Reorder and remove controls appear on hover; the band order sets the swatch order in the final palette.

The collection is stored locally in your browser and persists as you navigate, so you can gather colors from several pages of the same site into one palette. Clear it any time with clear all.

The palette link

Once you have collected at least one color, the footer shows a live vespercolors.com link carrying your colors and labels. Copy puts it on the clipboard; Open loads it in a new tab, ready for WCAG contrast checking, previews, and sharing. Palettes cap at 24 colors.

Privacy

All extraction happens locally in your browser. The extension does not collect or transmit anything - not the pages you visit, not the colors you pick, not usage data. See the privacy policy.

Known limitations