Color Picker & Eyedropper: Contrast Checker 作成者: Tech Internal

Most color pickers hand you a hex code and stop there. This one also answers the
question you actually had: can anyone read text in that color?

Every pick comes back with a contrast verdict against the background the color is
sitting on, scored two ways. WCAG 2 is the standard written into accessibility
law. APCA is the perceptual model drafted for WCAG 3, and unlike WCAG 2 it
accounts for text size and weight. The two disagree often enough that seeing only
one of them is how bad color decisions get signed off.

Picking

• An 11x11 pixel magnifier follows your cursor, so you see the exact pixel before
  you commit to it
• Works on anything the page can render — photographs, logos, gradients, a paused
  video frame
• Live values as you move, then copy as HEX, RGB, HSL, HSB or CMYK
• Alt+Shift+C starts a pick without opening the panel

Contrast

• WCAG 2 ratio, with AA and AAA results for normal and large text
• APCA Lc score, put into words rather than left as a bare number — "Larger text,
  18px+ bold or 24px"
• Both judged against the real background behind what you picked, not an assumption

Palettes

• Reads a palette off the page in OKLab, a perceptually uniform color space.
  Quantising in raw RGB, which most tools do, collapses distinct blues into one
  swatch
• Exports as CSS custom properties, JSON, PNG, or .ase — the Adobe Swatch
  Exchange format that opens directly in Photoshop, Illustrator and InDesign

Auditing a whole page

• One click lists every text-and-background pair on the page that fails WCAG or
  APCA — grouped, counted, and matched to the CSS selectors responsible
• Plus an inventory of every color the page uses, not only the broken ones
• Text sitting on an image or a gradient is counted and skipped rather than
  guessed at. A contrast tool that invents numbers is worse than no tool

Useful for a quick accessibility check before you ship, or for working out how
much colour accessibility debt a site you have just inherited is carrying.

A note for Firefox users

Firefox does not give extensions the EyeDropper API. Color pickers built around
that API lose their magnifier when they are ported here, which is why several of
them feel worse on Firefox than they do elsewhere. This one never used it. The
magnifier reads from a capture of the tab, so picking behaves identically on
Firefox to anywhere else.

Permissions, briefly

It asks for activeTab rather than access to all websites, so it can read only the
tab you invoke it on, only at the moment you invoke it. Nothing is injected when
a page loads. Saving files is an optional permission, asked for the first time you
export a palette and declinable without losing anything else.

No network requests. No analytics. No account. Nothing you pick leaves your
browser.

Where it cannot run

Firefox blocks extensions on its internal about: pages and on addons.mozilla.org
itself. This one tells you that instead of failing silently.

Also spelled colour — colour picker, colour contrast checker, same tool either way.

Made by Tech Interval LLC. The same tools run in the browser at
imgcolorpicker.org, alongside a reference for 4,336 named colors and typographic
metrics measured from 54 open-source font binaries.