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

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:

1. Capture or copy the color.
2. Convert the HEX value into another format.
3. Open a contrast checker.
4. Test it against a background.
5. 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:

• Google Chrome
• Microsoft Edge

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?