Media
5 items
Description
Collect the colors a site really uses - from the CSS, not the screen - and check their WCAG contrast without leaving the tab. Vesper Colors reads the colors a website actually uses, checks them against WCAG contrast requirements, and assembles them into a shareable Vesper Colors palette. IT READS THE CODE, NOT THE SCREEN: Screen pickers (including the browser EyeDropper) sample rendered pixels, which are distorted by display color profiles, anti-aliasing, and layer compositing. This extension reads getComputedStyle() instead, so every hex is exactly what the site's CSS authored - the value that belongs in a client palette, and the value contrast should be measured on. CONTRAST, WITHOUT LEAVING THE PAGE: Click any element and its contrast is reported immediately - the ratio, the level it passes, and that element's own text rendered in its own colors at its own size. Because the extension can read the font size and weight, it applies WCAG's large-text exception correctly instead of asking you which threshold you meant. And because it resolves the background up the ancestor tree - compositing semi-transparent layers along the way - it measures against the color that is really behind the text, not the element's own transparent background. CHECK THE WHOLE PAGE: One action walks every piece of text on the page, measures each against its real backdrop at its correct threshold, and lists the failures worst-first, grouped so a page with hundreds of identical rows reports one finding rather than hundreds. Show me scrolls the page to an offending element and highlights it. This runs on the live page, so it sees styles applied by JavaScript, the theme currently in use, and pages you have to be signed in to reach. TWO CAPTURE MODES: Pick - hover to highlight any element, click to lock it, then choose from its color roles: text, background, resolved backdrop, border, outline, SVG fill and stroke, and gradient stops. Scan - one click walks the whole page, dedupes every color, and ranks the site's real palette by how heavily each color is used. CSS variable token names (like --brand-primary) are shown where they can be recovered. COMPARE AND CROSS-CHECK: Put any two colors side by side for a ratio and all four WCAG levels, or view every pair in your palette at once as a grid. Any pair opens straight into the Vesper Colors web contrast checker. YOUR COLLECTION, ACROSS PAGES: Collected colors persist as you browse a site - gather from the homepage, a catalog page, and a signup page, then build one palette. Each color is a full-width band showing its hex (click to copy), an editable label, and an automatic color name. All processing happens locally in your browser. Nothing about the pages you visit is collected or transmitted. Developed by Steven Trotter. Part of the Vesper accessibility suite.