Color Contrast Checker Chrome Extension

Color Contrast Checker Browser Extension

Inspect Real-World WCAG Contrast Ratios Without Leaving the Page.

The Color Contrast Checker turns any open tab into a live accessibility lab. Furthermore, it measures real text-against-background ratios directly on the page — therefore, you spot failing combinations instantly. Consequently, your designs ship with confident, WCAG-aligned readability instead of guesswork.

Get the extension: Add to Chrome

Built for Real Accessibility Reviews

01

On-Page Live Inspection

Hover any element and read its exact contrast ratio inline. Furthermore, the overlay updates as you scroll — therefore, you can audit headings, buttons, and body text without ever leaving the design you are reviewing.

02

WCAG Pass / Fail Verdicts

Each measured pair returns a clean AA and AAA verdict for normal and large text. Moreover, the badge highlights problem combinations instantly — consequently, accessibility decisions become objective rather than subjective debates.

03

Manual Color Picker

Test arbitrary foreground and background pairs from the popup using color inputs or hex codes. As a result, you can validate brand palettes and design system tokens long before pushing them into production layouts.

Your Audit, Without It vs With It

Without

Manual checks, missed failures

  • Copying hex codes into separate online contrast calculators.
  • Guessing whether muted gray text actually passes AA.
  • Re-running checks every time a designer tweaks a token.
With Contrast Checker

Live ratios on every element

  • Hover the element and read its true ratio instantly.
  • See AA and AAA pass or fail in a single glance.
  • Validate any custom color pair without leaving the tab.

Moments It Saves Your Day

Designer · Morning Review

Auditing a fresh marketing landing page

You open the new hero section and immediately see that the muted subtitle fails AA. Furthermore, the picker confirms the safe alternative — therefore, the fix lands in the design file before the standup ends.

Developer · Pull Request

Verifying a button state in code review

You hover the disabled button on the staging branch and read its contrast badge. Moreover, the failing variant is caught before merge — consequently, the accessibility ticket is closed inside the same review thread.

Accessibility Lead

Sweeping a public-facing dashboard

You walk through every chart label and form control with the overlay enabled. In addition, the picker confirms safe replacement palettes — therefore, the audit report becomes specific, defensible, and immediately actionable for the team.

Capabilities at a Glance

Live On-Page Overlay Hover Inspection WCAG AA & AAA Hex & RGB Input Manual Color Picker Pass / Fail Badges Normal & Large Text No Account Needed Works Offline Local Processing Lightweight Popup Keyboard Friendly

Technical Specifications

Supported Browsers
Chromium-based browsers including Chrome, Edge, Brave
Permissions
Active tab and local storage only
Standard
WCAG 2 contrast ratio formula
Processing
Runs entirely in your browser
Offline Capability
Fully functional without an internet connection
Account
None — installs and runs anonymously
Setup
None — install and use immediately
Update Channel
Automatic via the official browser web store

Frequently Asked Questions

The extension uses the standard WCAG relative luminance formula. Furthermore, it reads the computed foreground and background colors directly from the rendered DOM. Therefore, the result reflects what visitors actually see, including theme overrides and inherited values. Consequently, you avoid the false positives produced by checking raw design tokens in isolation.
AA is the widely adopted baseline for accessible body and large text, while AAA is the stricter target favoured by accessibility-first products. Moreover, the popup labels both verdicts side by side. Therefore, you can pick the level that matches your audience and compliance scope without memorising the underlying ratio thresholds for each text size.
Yes. Open the popup and use the manual picker or paste hex codes for both foreground and background. Furthermore, the verdict updates as you change the values. Consequently, you can validate brand palettes, theme tokens, or proposed redesigns long before they reach a real component, screen, or production deployment.
Yes. Because measurements come from the rendered DOM, the extension reads whatever colors the page is currently displaying. Therefore, dark mode, light mode, and high-contrast themes are evaluated identically. Moreover, you can flip a site between modes and re-hover to confirm that both palettes meet your chosen accessibility target.
No. All measurements happen inside your browser, and preferences stay in local storage. Furthermore, the extension does not log URLs, screenshots, or DOM contents. Consequently, internal staging environments, intranet dashboards, and authenticated portals can be audited without any concern about data leaving the device or being shared with third parties.
No. The badge floats above the page using a non-intrusive container and removes itself the moment you toggle the overlay off. Moreover, no DOM nodes are reordered or styled. Therefore, the page renders exactly as your visitors see it, and screenshots taken after disabling the overlay remain untouched.
Right-click the toolbar icon and choose Remove, or open the browser extensions page and remove it from there. Furthermore, locally stored preferences are cleared with it. Therefore, no leftover files remain. Consequently, reinstalling later starts from a clean state, exactly as if it were a fresh first install.