ColorOverflow

Color Contrast Checker

Check text and background colors against WCAG 2.2 AA and AAA, and get the nearest colors that pass.

Colors

Contrast ratio

4.83 : 1

Good: passes AA for all text

  • Normal textWCAG AA · at least 4.5:1Pass
  • Normal textWCAG AAA · at least 7:1Fail
  • Large textWCAG AA · at least 3:1Pass
  • Large textWCAG AAA · at least 4.5:1Pass
  • UI components and graphicsWCAG AA · at least 3:1Pass

Large text is at least 24px, or 18.66px bold. Ratios are cut to two decimals, never rounded up, so 4.49:1 fails 4.5:1.

Live preview

Your text color on your background.

Large heading text

Body text needs the most contrast. This paragraph is 16px, the size most websites use for reading text, so it should be easy to read at a glance.

Small print and captions are 14px.

Primary buttonOutline buttonA text link

Nearest passing colors

The same hue with the smallest change in lightness that reaches each level.

For AAA normal text (7:1)

  • Change the text color#545964 · 7.02 : 1
  • Change the backgroundNot possible by changing only this color

About the Color Contrast Checker

How to check color contrast for WCAG AA and AAA, what the results mean, and how to fix a pair that fails.

The ColorOverflow Color Contrast Checker is a free online tool for testing whether text is readable on its background. Enter a text color and a background color as HEX codes, or pick them with the color picker, and it shows the contrast ratio and whether the pair passes WCAG 2.2 at level AA and AAA, for normal text, large text and UI components.

When a pair fails, it suggests the nearest colors that pass: the same hue, only lighter or darker, so your design keeps its look. It runs in your browser with no sign-up.

How to check color contrast

  1. Enter your text color. Type a HEX code such as #1E293B, or click the swatch to pick a color.
  2. Enter your background color the same way. Use the swap button to check the reverse pair, such as white text on a colored button.
  3. Read the contrast ratio and the results. Each WCAG check shows Pass or Fail, with the minimum ratio it needs.
  4. Look at the live preview to see headings, body text, small print, buttons and links in your colors.
  5. If a level fails, pick one of the nearest passing colors and press Use to try it.

WCAG contrast requirements

WCAG, the Web Content Accessibility Guidelines, sets minimum contrast ratios between text and its background. Level AA is what most websites, apps and accessibility laws aim for; level AAA is stricter.

  • Normal text, AA: at least 4.5:1.
  • Normal text, AAA: at least 7:1.
  • Large text, AA: at least 3:1. Large text is at least 24px, or 18.66px bold.
  • Large text, AAA: at least 4.5:1.
  • UI components and graphics, AA: at least 3:1, for input borders, icons, focus rings and chart elements.

How the nearest passing color works

The checker keeps the hue and saturation of your color and moves only its lightness, darker or lighter, whichever needs the smaller change. That gives the closest color that reaches the level, so a brand blue stays blue. It suggests a new text color and a new background, and you choose which one to change.

Sometimes no lightness works. Against a mid gray, for example, nothing reaches 7:1, so the checker says so and you'll need to change the other color.

Tips for accessible colors

  • Check every pair you'll use, not only the main text: links, placeholders, captions, buttons and disabled states too.
  • Light gray text on white often fails AA. Darken it rather than making it bolder.
  • White text on yellow, orange, light green or light blue rarely passes. Use dark text on those colors instead.
  • Check dark mode separately. A pair that passes in light mode can fail when the colors are inverted.
  • Don't rely on color alone to show meaning. Add an icon or a label to errors and statuses.

Frequently asked questions

What is a good contrast ratio?
For normal text, at least 4.5:1 meets WCAG AA and at least 7:1 meets AAA. Large text needs at least 3:1 for AA. The ratio runs from 1:1, the same color on itself, to 21:1, black on white.
Why does 4.49:1 fail when it's so close to 4.5:1?
WCAG's limits are exact, so a ratio just under the line fails. The checker cuts ratios to two decimals and never rounds up, so it won't show a failing pair as passing.
Does the order of the colors matter?
No. The contrast ratio is the same either way, so dark text on a light background and light text on the same dark background get the same result. The preview and suggestions do change, which is why there's a swap button.
Which WCAG version does it use?
WCAG 2.2, the current version. Its contrast formula and limits are the same as in WCAG 2.0 and 2.1.
How do I check a whole palette?
Open the palette's details page from the generator, the gallery or your wishlist. Its Accessibility tab checks every color against white, light gray, near-black and black.

Unsaved changes

“” has changes that aren't saved to your wishlist. Save them before continuing?