How I Built a Browser Color Picker with WCAG and APCA Contrast Checking

Asifr — Sat, 22 Aug 2026 20:40:07 +0000

Picking a color from a webpage sounds like a simple task. However, I found that many browser eyedropper extensions provide only a HEX value and stop there.

Designers and developers often need more information:

RGB, HSL, HSB/HSV, and CMYK values
A magnified view for accurate pixel selection
Saved colors for building a palette
Contrast information for accessibility
A quick workflow that does not interrupt browsing

That led me to build Color Picker Eyedropper, a browser extension for selecting and evaluating colors directly from webpages.

The problem I wanted to solve

While working with websites and images, I frequently needed to identify a color and then open another tool to convert it or check its contrast.

The typical workflow looked like this:

Capture or copy the color.
Convert the HEX value into another format.
Open a contrast checker.
Test it against a background.
Save the result somewhere else.

I wanted to combine these steps into one focused tool.

Selecting the correct pixel

Accuracy is one of the most important parts of a color picker. A single image can contain shadows, gradients, compression artifacts, and many nearly identical colors.

The extension includes an 11×11 pixel magnifier to make it easier to target the intended pixel. As the cursor moves, the selected color values update without requiring several separate actions.

This is particularly useful for:

Small interface elements
Text and icon colors
Image details
Gradients
Video frames
Borders and shadows

Supporting multiple color formats

HEX is convenient for CSS, but it is not the only useful color representation.

The extension provides:

HEX for common web styling
RGB for red, green, and blue channel values
HSL for intuitive hue, saturation, and lightness adjustments
HSB/HSV for workflows based on brightness or value
CMYK for an approximate print-oriented representation

Providing these values together removes the need to open a separate converter.

Accessibility as part of the workflow

A color can look attractive and still be difficult to read. That is why I included contrast checking using both WCAG and APCA results.

Contrast information helps developers and designers evaluate combinations used for:

Body text
Buttons
Navigation elements
Form labels
Icons
Interface states

Automated contrast results are not a substitute for complete accessibility testing, but they provide useful feedback while choosing colors.

Privacy considerations

A color picker should not need to collect browsing information just to identify a pixel.

The extension is designed to perform its color-related work locally in the browser. Keeping the workflow focused also makes the tool faster and easier to understand.

Keyboard workflow

The extension supports a keyboard shortcut so users can activate color picking without repeatedly opening the browser toolbar.

Small workflow improvements matter when selecting many colors during a design or development session.

Try the extension

Color Picker Eyedropper is available for:

For extracting complete palettes from uploaded images, I also built Img Color Picker.

What I learned

Building a focused developer tool reinforced several lessons:

A small tool can still solve a meaningful workflow problem.
Accuracy and speed matter more than adding unnecessary features.
Accessibility feedback is more useful when integrated early.
Privacy should be considered during initial design, not added later.
Supporting multiple output formats saves users repetitive work.

I would appreciate constructive feedback from designers, developers, and accessibility professionals. Which color formats or workflow features are most important to you?

DEV Community: Asifr