How to check color contrast in four steps
Get the exact colors, run them through a free checker, read the three grades, and fix the pair before it ships.
By ClaudeGPT Si Newsroom · Editorial team
· 3 min read
Here is how to check color contrast in short: take the text color and the background color, put both into a contrast checker, and read the ratio: 4.5:1 or more passes WCAG AA for normal text, and 3:1 is enough for large text and interface parts. The fastest free way is the AyeTab Contrast Checker, which grades the pair in your browser with no signup.
What you need before you start
- The exact text color, as a hex code such as #6B7280.
- The exact background color behind that text.
- The size and weight of the text, because large text has a lower bar.
Guessing colors from a screenshot is where most checks go wrong. Screenshots get compressed and smoothed, so the sampled pixel can be a shade off. Copy the values from your CSS, your design file or the browser's inspector instead. If the text sits on an image or a gradient, test it against the lightest and the darkest spot behind it.
Four steps to check a pair
1. Open a checker. Go to app.ayetab.com and open Contrast Checker. If you use the free AyeTab extension in Chrome, open a new tab, press Ctrl+K or Cmd+K and type "contrast".
2. Enter the colors. Paste the text color into the Foreground field and the background into the Background field. You can also click the swatch next to each field and pick a color by eye. A sample sentence on each card is drawn in the pair you entered.
3. Read the grades. AyeTab shows the ratio and three separate grades: normal text, large text and UI components. A short line under them says which levels the pair meets.
4. Adjust and repeat. If a grade fails, darken the text (or lighten it on a dark background) a step at a time until it passes. Swap reverses the colors, which is handy when you test a light-on-dark button and its dark-on-light twin.
What the numbers mean
| Ratio | Good enough for |
|---|---|
| Below 3:1 | Nothing that has to be read or seen |
| 3:1 to 4.49:1 | Large text, input borders, icons, chart lines |
| 4.5:1 to 6.99:1 | All text at AA, large text at AAA |
| 7:1 and up | All text at AAA |
Large text means at least 18 point, or 14 point bold. The W3C asks you not to round, so 4.49:1 is a fail.
Common mistakes to avoid
Checking only the body text. Placeholder text, captions, disabled-looking labels that are actually active, and links inside paragraphs need checks too.
Forgetting the second theme. A pair that passes in light mode can fail in dark mode. Test both.
Ignoring states. Hover, focus and selected states change colors. The focus outline counts as a UI component and needs 3:1 against what sits next to it.
Trusting brand colors. A mid blue or bright orange that looks bold can land below 4.5:1 on white. White text on #3B82F6, a bright mid blue, comes out at about 3.7:1: fine for a big heading, short of AA for a small button label.
Checking a whole page
A pair checker answers one question at a time. When you want every problem on a page in one list, open Chrome DevTools and look at the Contrast issues in CSS Overview, or run a Lighthouse accessibility report. WebAIM's WAVE also checks all text on a page at once. Those tools tell you where the problems are; a checker like AyeTab is where you try fixes until the grade passes.
Keeping it private
AyeTab runs the check locally. Nothing is uploaded and no account is needed, and the page keeps working offline after it loads, which matters when the colors belong to a product that has not launched yet.