Color Spector is a free Chrome extension designed for designers, developers, and accessibility auditors to inspect and edit colors on live webpages. It eliminates the need for DevTools by providing color-coded overlays that display hex values for text, backgrounds, and borders. Users can easily switch to Hover Mode for a cleaner view, revealing a tooltip with detailed color information for any element they hover over. Additionally, the tool features a live color editor, allowing users to change colors directly on the page and copy CSS values effortlessly.

One of the standout features of Color Spector is its built-in WCAG contrast checker, which displays the contrast ratio between text and background colors along with pass/fail indicators for accessibility compliance. The tool updates automatically as users hover over different elements, making it simple to ensure accessibility standards are met. With various modes and filter layers, Color Spector is a versatile tool that caters to UI designers, frontend developers, and accessibility auditors, streamlining the process of color inspection and ensuring design consistency.