WCAG contrast checker: check AA and AAA in your browser
Paste a text color and a background, read the ratio and the grades for text and UI parts, and fix a failing pair without uploading anything.
By ClaudeGPT Si Newsroom, Editorial team
3 min read
A WCAG contrast checker tells you whether a text color and its background are far enough apart for people to read them, and grades the pair against the AA and AAA levels. The free AyeTab Contrast Checker does it in your browser: paste two hex values and it shows the ratio and a grade for each kind of content.
What the checker shows
The page has two cards, one for the foreground and one for the background. Each card has a hex field, a color swatch that opens a picker, and a sample sentence drawn in the current pair, so you see the result as well as the number. A Swap button flips the two colors.
Below the cards you get:
- the contrast ratio, such as 10.2:1 for the default dark gray on cream
- a grade for normal text
- a grade for large text
- a grade for UI components
- one line that sums up which levels the pair meets
There is no account and nothing is uploaded. The check runs locally, so it keeps working offline once the page has loaded.
The thresholds it grades against
These come from the W3C's WCAG 2.2 success criteria.
| Element | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18 pt, or 14 pt bold) | 3:1 | 4.5:1 |
| UI components and meaningful graphics | 3:1 | none set |
Ratios run from 1:1 (same color twice) to 21:1 (black on white). WCAG treats them as hard limits, so a pair at 4.49:1 fails 4.5:1. Do not round up in your head.
A quick check, start to finish
- Copy the text color from your CSS or design file and paste it into Foreground.
- Paste the background color into Background.
- Read the normal text grade first, since most body copy is normal size.
- If the pair fails, nudge the text color darker (or lighter on a dark theme) with the picker until the grade turns to AA.
- Copy the new hex back into your stylesheet.
A worked example: gray #777777 on white comes out at about 4.48:1, which misses AA for body text. One step darker, #767676, reaches about 4.54:1 and passes. Small shifts matter near the line.
Pairs worth checking on every project
Body text is the obvious one, but the failures usually hide elsewhere:
- placeholder text inside form fields, which is often a pale gray
- links inside paragraphs, against the page background
- text on colored buttons, in each state (default, hover, focus)
- input borders and focus outlines, which fall under the 3:1 rule for UI components
- every pair again in dark mode, since a theme switch changes both colors
Run each through the checker once, note the hex values that pass, and keep them in your design tokens so nobody has to guess later.
Where it sits in AyeTab
AyeTab is a set of free developer tools that runs in the browser. The web app at app.ayetab.com holds the full list, and the AyeTab Chrome extension puts the same tools on your new tab page and in a side panel. Press Ctrl+K or Cmd+K, type "contrast", and the checker opens.
The color group around it helps with the steps before and after a contrast check: a Color Converter for HEX, RGB and HSL, a Colour Blindness Simulator, a Palette Generator, a Harmony Generator and a Tailwind shade generator. You can build a palette, test the text pairs, and see how it looks to color blind users without leaving the tab.
When to use something else
A pair checker tests two colors you already know. To find every low-contrast element on a live page, run an auditor instead: Chrome DevTools lists contrast issues in CSS Overview and in a Lighthouse accessibility report, and WebAIM's WAVE checks all page text at once. Use those to find the problems, then use AyeTab to settle on the fix.