Vesper Colors for Mac

Vesper Colors for Mac is a lightweight menu bar app that brings WCAG 2.2 contrast checking into your design workflow without switching to a browser tab. Click the tray icon to open a compact popover, check your pair, and get back to work.

Installing

1. Download the DMG from vesperapps.com/colors.
2. Open the DMG and drag Vesper Colors to your Applications folder.
3. Launch Vesper Colors from Applications. The app hides from the Dock - look for the eye icon in your menu bar.

On first launch, macOS may ask you to confirm you want to open the app. Click Open to proceed.

Opening the app

Vesper Colors lives in the macOS menu bar. Click the eye icon to open the color checker popover. Click anywhere outside the popover to dismiss it.

Right-click the tray icon for additional options: About Vesper Colors for Mac and Quit. If an update has been downloaded and is ready to install, a Restart to Install Update option appears at the top of this menu.

Checking contrast

The popover shows two color rows - foreground (FG) and background (BG). Click either color chip to open the native macOS color picker, or type a hex value directly into the input field and press Enter to apply it.

The contrast ratio and WCAG badges update live as you change colors. The top strip of the popover renders in your chosen FG and BG colors, so poor contrast makes the strip itself hard to read - a direct demonstration of the problem.

Keyboard shortcuts

With focus in a hex input field:

• Up / Down arrow - nudges the color lighter or darker by 1% lightness
• Shift + Up / Down arrow - jumps to the next or previous suggested shade chip
• Enter - applies the typed hex value
• Escape - reverts to the previous value

Action bar

Four buttons sit between the contrast strip and the color inputs:

• Swap - swaps the foreground and background colors
• Save - saves the current pair to the Recently Saved section
• Preview - opens vesperapps.com/colors in your browser with the current pair pre-loaded
• Share - copies a shareable link for the current pair to your clipboard

Suggested Shades

Two rows of eight color chips, one for FG and one for BG. Each row shows hue-matched shades from dark to light, derived from the current color. Chips that achieve AA contrast (4.5:1 or better) against the opposite color are marked with a checkmark. Click any chip to apply that shade. The active shade is outlined in violet.

Common Background Colors

Seven grayscale chips for quick testing against the most common web background colors. Click any chip to set it as the background immediately.

Recently Saved

Twelve slots for saved color pairs, arranged in two rows of six. Click Save in the action bar to add the current pair. Click any saved pair chip to restore both colors. Up to 12 pairings are stored - saving a 13th removes the oldest.

The app ships with ten pre-loaded pairings matching the starter pairs in the web tool: Midnight, Ocean, Forest, Ember, Orchid, Slate, Gold, Rose, Storm, and Sage.

Auto-updates

Vesper Colors for Mac checks for updates automatically when you launch it. Updates download silently in the background. When an update is ready, a Restart to Install Update item appears in the right-click tray menu. The update installs the next time you quit and relaunch the app.

System requirements

• macOS (Apple Silicon recommended)
• No additional software required