# A WCAG contrast checker extension that lives on your new tab

> A pair checker on the new tab answers the everyday color question; a page auditor answers the other one. Here is which to install.

URL: https://claudegpt.si/news/wcag-contrast-checker-extension-chrome  
Published: 2026-10-27T15:16:13.299Z  
Author: ClaudeGPT Si Newsroom  
Section: AI Tools  
Topics: WCAG, Chrome extensions, Color contrast  
Publisher: ClaudeGPT Si

## Key takeaways

- A contrast checker extension either tests one color pair quickly or audits a whole page; most everyday questions need the first.
- AyeTab puts a free WCAG contrast checker on the Chrome new tab and side panel, with grades for normal text, large text and UI components.
- For full-page scans, WAVE's browser extensions and the contrast tools in Chrome DevTools are the better fit.

If you want a WCAG contrast checker extension that is always one keystroke away, install [AyeTab for Chrome](https://ayetab.com): it puts a free contrast checker on your new tab page and in a side panel, next to the rest of your developer tools. If you want an extension that scans a whole page for contrast problems, that is a different kind of tool, such as WebAIM's WAVE.

## Two jobs, two kinds of extension

People type "contrast checker extension" when they want one of two things.

| Job | What you need | Example |
| --- | --- | --- |
| "Is this gray on this white OK?" | A pair checker you can open instantly | AyeTab Contrast Checker |
| "What on this page fails?" | A page auditor | WAVE extension, Chrome DevTools |

Most of the time, during design reviews, PR comments and the "can we make the button lighter" thread, the question is the first one. That is where a new tab extension earns its place.

## How the AyeTab checker works

Open a new tab, press Ctrl+K or Cmd+K, type "contrast" and hit Enter. The tool has a Foreground field and a Background field, each with a color swatch picker and a sample sentence drawn in the colors you entered. Paste two hex codes and you get:

- the contrast ratio
- a grade for normal text
- a grade for large text
- a grade for UI components
- a one-line verdict on which WCAG levels the pair meets

A Swap button flips the pair, which is useful for checking a dark mode variant. The grades follow WCAG: 4.5:1 for normal text and 3:1 for large text and UI parts at AA, 7:1 and 4.5:1 for text at AAA.

There is no account, nothing is uploaded, and it keeps working offline once installed. The same tools live in a web app at app.ayetab.com, so the checker also works on a machine where you cannot install extensions.

## Why a new tab beats a toolbar icon

A toolbar extension does one thing and adds an icon. AyeTab replaces the new tab page with a full set of developer tools: a JSON formatter, a JWT decoder, a regex tester, a color converter, a colour blindness simulator and more. The contrast checker is one entry in the command palette, so you are not adding a single-purpose extension for each small task.

Smart paste helps with the other tools: paste a JWT, a JSON blob or a URL and AyeTab suggests the right one. Favorites pin the tools you use most to the top of the list.

## When the auditor is the right install

If your task is "find every failing element on this page", a pair checker is the wrong tool. WebAIM's WAVE comes as an extension for Chrome, Firefox and Edge and checks pages in the browser, including pages behind a login or running locally. Chrome DevTools already includes a contrast issues list in CSS Overview and a contrast section in Lighthouse accessibility reports, no install needed.

A sensible setup is both: an auditor to find the problems, and AyeTab on the new tab to test the fixes until each pair passes.

## The 4.49 problem

One last thing worth knowing before you argue about a button color in public. The W3C says contrast ratios must not be rounded, so 4.49:1 fails the 4.5:1 line. #777777 on white lands at about 4.48:1 and fails; #767676 reaches about 4.54:1 and passes. A checker settles that kind of thread in seconds, which is faster than the quote tweets.

## Frequently asked questions

### Is there a free WCAG contrast checker extension for Chrome?

Yes. AyeTab is a free Chrome extension whose new tab includes a contrast checker, along with other developer tools, all running locally.

### Can I check contrast without installing anything?

Yes. AyeTab's web app at app.ayetab.com has the same checker, and Chrome DevTools has contrast tools built in.

## Sources

- [AyeTab: developer utilities, offline and instant](https://ayetab.com), AyeTab
- [AyeTab on the Chrome Web Store](https://chromewebstore.google.com/detail/hfcgbpmgokbjeiblnheamfdfbochlaah), Chrome Web Store
- [Contrast Checker Online: WCAG AA & AAA](https://app.ayetab.com/tools/contrast-checker), AyeTab
- [WAVE Web Accessibility Evaluation Tools](https://wave.webaim.org/), WebAIM
- [Make your website more readable](https://developer.chrome.com/docs/devtools/accessibility/contrast), Chrome for Developers
- [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), W3C