All Tools
Design Tools · ContrastCheck

Color Contrast Checker

Pick a text color and a background color to see instantly whether they pass WCAG AA and AAA — free, private, no signup.

HEX, RGB, HSL or a color name. Transparency is blended over the background.

Transparent backgrounds are blended over white.

Contrast ratio

–

    Large text sample

    Normal body text at 16px. The quick brown fox jumps over the lazy dog, 0123456789.

    Small print at 14px — check this one carefully.

    Button Underlined link

    Fix suggestions

    The nearest passing shade, keeping the same hue. Select Apply to use it.

      WCAG Contrast Guide

      What each level means and when it applies (WCAG 2.2).

      AA — Normal Text

      4.5 : 1

      The minimum for body copy, labels and anything under the large-text size. Required by most accessibility laws and policies.

      AA — Large Text

      3 : 1

      Relaxed minimum for large text: at least 24px regular, or 18.66px (14pt) bold.

      AAA — Normal Text

      7 : 1

      Enhanced contrast for body text. Aim for this on long-form reading and for audiences with low vision.

      AAA — Large Text

      4.5 : 1

      Enhanced contrast for large headings and display text.

      UI Components & Graphics

      3 : 1

      Borders of inputs and buttons, focus rings, icons and chart lines must reach 3:1 against what's next to them (1.4.11).

      What's Exempt

      logos · disabled

      Logotypes, decorative text, disabled controls and text that is part of a photo have no contrast requirement.

      How It's Calculated

      (L1 + 0.05) / (L2 + 0.05)

      L1 and L2 are the relative luminance of the lighter and darker colors. Ratios run from 1:1 (identical) to 21:1 (black on white).

      No Rounding Up

      4.49 : 1 = fail

      Thresholds are strict. A ratio of 4.499:1 does not meet AA, so this checker truncates rather than rounds.

      Why ContrastCheck?

      ContrastCheck is a fast, lightweight tool for web designers, graphic designers and developers who need to know a color pair is readable — and what to change when it isn't.

      All processing happens entirely in your browser. Your colors never leave your device.

      100% Private — nothing is sent to a server
      Instant — results update as you type or drag
      Fix suggestions — nearest passing shade for AA and AAA
      Any CSS color — HEX, RGB, HSL, names and transparency
      Shareable — copy a link that reopens the same pair