A WCAG contrast checker extension that lives on your new tab

If you want a WCAG contrast checker extension that is always one keystroke away, install AyeTab for Chrome: 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.

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.