← All docs

Contrast checker

The short version: Set a background and a foreground. Read the verdict. If it fails, click the “More actions” (…) menu next to a swatch and pick a target. Done.

Opening the checker

  • Press your Check Contrast hotkey.
  • Click the menu bar icon and choose Check Contrast….

The window remembers your last colors, so if you’re iterating on the same pair across sessions, you don’t have to set them up again.

Setting the colors

Each color (Background and Foreground) has a row of controls:

  • Labeled swatch button — the big colored button on the left. Click it to sample a color from anywhere on screen.
  • Text input — type or paste any color string ColorCopy can parse (hex, rgb(), hsl(), or a CSS color name). Live-commits as you type.
  • Inline color well — the small swatch inside the field. Opens a popover with saturation/brightness, hue, and Cancel/Done.
  • Copy — copies that color in your default format.
  • More actions (…) — opens a menu with Copy As (every supported format), Paste from Clipboard, and the auto-fix targets.

Swap Colors at the bottom flips foreground and background — handy for checking the dark-mode flip of a pair.

Reading the verdict (WCAG 2)

WCAG 2 is the contrast standard most projects target today. ColorCopy shows the contrast ratio (e.g. 4.50:1) as the headline number, plus per-row pass/fail pills next to two preview lines:

  • Normal text (16 pt regular) — AA needs 4.5:1, AAA needs 7:1.
  • Large text (24 pt semibold) — AA needs 3:1, AAA needs 4.5:1.

Each row gets a green check or grey × for AA and AAA. Hover a pill for the precise ratio and the threshold it’s being judged against.

Reading the verdict (APCA)

APCA is the perceptual contrast metric being evaluated for WCAG 3. It reports a single number called Lc — positive for dark text on light backgrounds, negative for light on dark.

Switch to APCA from the segmented picker at the top of the window. ColorCopy shows the headline Lc, plus per-row verdicts against the APCA Bronze Simple use-case targets:

  • Normal text — minimum Lc 75, the body-reading bar.
  • Large text — minimum Lc 45, headlines and large copy.
  • Graphics and UI — minimum Lc 30, icons, dividers, focus rings, non-text contrast.

The sample preview

The card at the top renders your chosen background with sample text in the foreground, sized at the recommended pt/weight for each tier. The text doubles as the row’s readability demo — if “Normal text” looks rough at 16 pt regular, you’ll see it.

Auto-fixing a failure

Click the More actions (…) button next to whichever swatch you want to change.

In WCAG mode, the menu offers exact targets:

  • Fix for Normal Text — AA (4.5:1) or AAA (7:1)
  • Fix for Large Text — AA (3:1) or AAA (4.5:1)

In APCA mode, the targets line up with the preview tiers:

  • Normal text (Lc 75)
  • Large text (Lc 45)
  • Graphics and UI (Lc 30)

Pick one and ColorCopy adjusts that color to the exact target, against the other one. It nudges luminance up or down (whichever brings the contrast in range) without changing the hue more than it has to. Your accent stays your accent — it just becomes more readable.

Items that already pass the threshold are disabled, so you can tell at a glance which targets you’ve already met.

Pasting a color

The same More actions (…) menu has a Paste from Clipboard entry — useful when the clipboard has a color string and you want to drop it straight onto either swatch.

Closing

Press Esc or Cmd-W, or click Done.

Free tier limits

Using the eyedropper from inside the contrast window counts as one pick against the monthly cap. The Copy button on each row, switching algorithms, swapping colors, and auto-fixing don’t.

Related