Uptura
Free accessibility tool

Free Color Contrast Checker

A WCAG color contrast checker for text and UI. Enter two colors to get the exact contrast ratio, instant AA and AAA results, and the closest passing color if your pair falls short.

Try:

Contrast ratio

3.67:1

Large text and UI only

  • WCAG AA · Normal text4.5:1 minimum · SC 1.4.3Fail
  • WCAG AA · Large text3:1 minimum · SC 1.4.3Pass
  • WCAG AA · UI components & graphics3:1 minimum · SC 1.4.11Pass
  • WCAG AAA · Normal text7:1 minimum · SC 1.4.6Fail
  • WCAG AAA · Large text4.5:1 minimum · SC 1.4.6Fail

Preview

Large text — 24px regular (18pt)

Normal text — 16px body copy. This is how a paragraph on your page will read with these two colors.

Button outlineA text link

Closest passing text color

Passes AA (4.5:1)

#1E6FF5 · 4.51:1

Passes AAA (7:1)

#0951C5 · 7.01:1

Check every page for contrast issues automatically with Uptura — free

What this tool does

An accessibility color contrast checker that also fixes the problem

Most contrast checkers stop at pass or fail. This one tells you which WCAG checks a pair meets — and gives you a passing color to use instead.

  • The exact WCAG contrast ratio

    Enter a text color and a background color and get the contrast ratio from 1:1 to 21:1, calculated with the same relative-luminance formula WCAG uses — no rounding up to a pass.

  • Pass / fail for AA and AAA

    See at a glance whether the pair passes WCAG AA and AAA for normal text, large text, and UI components like buttons, input borders, and icons.

  • A fix, not just a fail

    When a pair fails, the checker suggests the closest text color in the same hue that passes AA or AAA — one click to apply it, so you keep your brand color's character.

  • A live preview and an eyedropper

    Preview body copy, large headings, a button and a link in your exact colors. In Chrome and Edge on desktop, use the eyedropper to pick colors straight off a screenshot, mockup, or image.

How to use it

Check color contrast in four steps

Pick two colors, read the ratio, and fix anything that fails — before it reaches your users.

  1. 1

    Enter your text color

    Type a hex code (#1E293B), paste an rgb() value, use the color picker, or grab a color from your screen with the eyedropper.

  2. 2

    Enter the background color

    Add the color the text sits on. If you're checking text on an image or gradient, pick the lightest or darkest area behind the text — the worst case is what counts.

  3. 3

    Read the ratio and the WCAG results

    Aim for at least 4.5:1 for body text (AA). Large text and UI components need 3:1; AAA asks for 7:1 for body text.

  4. 4

    Apply a suggested fix if it fails

    Click Use on a suggested color to swap it in, then copy the hex code into your design system or CSS.

WCAG 2.2 contrast requirements at a glance
ContentLevel AALevel AAA
Normal text (under 24px, or under 18.66px bold)4.5:17:1
Large text (24px+, or 18.66px+ bold)3:14.5:1
UI components & graphics (borders, icons, focus rings)3:1—
Logos, decorative text, disabled controlsNo requirementNo requirement

The guide

Color contrast, explained

What contrast means for accessibility, how the ratio is calculated, AA vs AAA, and how to check a whole website.

What color contrast means for accessibility

Color contrast is the difference in brightness between text and the background behind it. When it's too low, people with low vision, color blindness, or simply a phone in bright sunlight can't read the page. That's why contrast is one of the most common accessibility failures on the web — and one of the easiest to fix once you can measure it.

WCAG, the Web Content Accessibility Guidelines, turns readability into a number: the contrast ratio. It runs from 1:1 (the same color on itself) to 21:1 (black on white). A contrast checker for accessibility simply calculates that ratio for your two colors and compares it with the WCAG thresholds.

How the contrast ratio is calculated

Every WCAG contrast ratio checker uses the same formula. Each color is converted to its relative luminance — how bright it looks to the human eye, weighting green most and blue least — and the ratio is (lighter + 0.05) ÷ (darker + 0.05).

Because the formula is about brightness, two very different hues can still fail. Red on green, or a mid-blue on mid-gray, often look distinct but land close to 1:1 for luminance. That's exactly the kind of pair a quick text contrast checker catches before it ships.

AA vs AAA, and what counts as large text

WCAG has two levels for text contrast. Level AA (success criterion 1.4.3) is what most laws and procurement policies require: 4.5:1 for normal text and 3:1 for large text. Level AAA (1.4.6) is stricter at 7:1 and 4.5:1, and is a good target for long-form reading.

  • Large text — at least 24px (18pt) regular, or about 18.66px (14pt) bold. Everything smaller counts as normal text.
  • UI components — under 1.4.11, button borders, input outlines, focus indicators, and meaningful icons need 3:1 against what's next to them.
  • Exceptions — logos, purely decorative text, and disabled controls have no contrast requirement.

How to check contrast on a website

To check contrast on a website by hand, pick the text color and its background — from your CSS, your design file, or with the eyedropper above — and test each pair. Prioritize body text, links, placeholder text in forms, text on buttons, and anything sitting on top of an image or gradient.

Checking pairs one at a time is fine for a design system, but a real site has hundreds of text and background combinations, and a single CSS change can break many at once. An automated accessibility scan tests every element on the page against WCAG, contrast included, and continuous monitoring tells you when a new release introduces a failure.

From one pair to every page

Check contrast across your whole site, automatically

Testing color pairs by hand works for a design system. For a live website, scan every element at once — and keep scanning, so a new release can't quietly break contrast.

  1. 1

    Scan the whole page

    The free accessibility checker loads your page in a real browser and tests every text element's contrast — plus alt text, labels, and other WCAG rules — in one pass.

  2. 2

    Monitor it on a schedule

    Add the page to Uptura and it's re-audited on the schedule you choose, so contrast issues are caught soon after they ship.

  3. 3

    Get alerted to new issues

    When a scan finds a new violation, you get an email (or a Slack message on Pro) with the exact rule and element to fix.

Scan a whole page free

Want it checked on a schedule? See how accessibility monitoring works.

FAQ

Color contrast, answered

  • What is a good color contrast ratio?

    For normal body text, aim for at least 4.5:1 — that's WCAG AA, the level most accessibility laws point to. 7:1 or higher meets AAA and is comfortable to read for almost everyone. Large text (24px, or about 18.66px bold) and UI components like buttons and input borders need at least 3:1.

  • What contrast ratio does WCAG require?

    WCAG 2.2 level AA requires 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), plus 3:1 for user-interface components and meaningful graphics (1.4.11). Level AAA raises text to 7:1 for normal text and 4.5:1 for large text (1.4.6). This WCAG color contrast checker tests every one of those thresholds at once.

  • How do I check color contrast?

    Enter your text color and background color above as hex codes or rgb() values, or pick them with the color picker or eyedropper. The checker shows the contrast ratio instantly, marks each WCAG AA and AAA check as pass or fail, and suggests the closest passing color if your pair falls short.

  • Can I check the contrast of text on an image?

    Yes — use the eyedropper (in Chrome and Edge on desktop) to pick the text color and the background color straight from the image. For text over a photo or gradient, test against the lightest area behind light text, or the darkest area behind dark text, because the worst spot is what has to pass. If no single color works everywhere, add a solid or semi-transparent overlay behind the text.

  • Does passing this checker make my site ADA compliant?

    It covers one important piece. Courts and the DOJ point to WCAG 2.1 AA for ADA web compliance, and color contrast is one of its success criteria — so passing 4.5:1 for text is required, but it isn't the whole picture. Alt text, form labels, keyboard access, and more matter too. Run a full scan with the free accessibility checker to find the rest.

  • Is this the same as a color contrast analyser?

    It does the same core job. Desktop tools such as the Colour Contrast Analyser (CCA) and web tools like WebAIM's contrast checker all use the WCAG relative-luminance formula, so a given pair gets the same ratio everywhere. This checker runs in your browser with nothing to install, adds a live preview, and suggests a passing color when a pair fails.

  • Why does my brand color fail even though it looks readable?

    Contrast is about brightness, not hue, and many popular brand blues, greens, and oranges sit in the middle of the brightness range — readable on a good monitor, but under 4.5:1 on white. Keep the brand color for large headings, buttons with white text, or accents, and use the suggested darker shade for body text and links.

  • Is this color contrast checker free?

    Yes — it's completely free, runs entirely in your browser, and needs no sign-up. Check as many color pairs as you like. To catch contrast issues across a whole site, Uptura's free accessibility monitoring scans your pages on a schedule and alerts you to new WCAG violations.

More free tools

No sign-up required — run another quick check on any site.

Accessibility Checker

Audit any page for WCAG & ADA issues — score, failing rules, and elements.

Meta Tag Checker

Check a page's title, meta description, canonical, and Open Graph tags.

Core Web Vitals Test

Test any page's Core Web Vitals — mobile & desktop score, LCP, CLS, and more.

Check it automatically

Accessibility

Continuous WCAG and Axe scans with historical reports.

Related guides

Keep every page readable, not just this pair

Uptura scans your pages for contrast and other WCAG issues on a schedule, alongside uptime, SSL, and performance — and alerts you when something breaks. Free, no credit card required.

Start freeLog in

Free forever · no credit card required