Skip to main content

Color Contrast Checker – WCAG AA & AAA Ratio Tester

Check the contrast ratio between two colors against WCAG 2.2 AA and AAA for text and icons. Get the closest passing color, a live preview and a copyable result.

Color Contrast Checker

Check text and background colors against WCAG 2.2.

Colors

Result

Text #374151 on background #ffffff: contrast ratio 10.31:1 (Excellent). Passes: AA Normal text, AA Large text, AAA Normal text, AAA Large text, AA Icons and borders. Fails: none.

10.31:1

Excellent

Passes the strictest level (AAA) for all text.

Text

  • AA · Normal text

    Body text under 24px, or under 18.66px bold

    Needs 4.5:1

    Pass

  • AA · Large text

    24px and up, or 18.66px and up in bold

    Needs 3:1

    Pass

  • AAA · Normal text

    Body text, enhanced level

    Needs 7:1

    Pass

  • AAA · Large text

    Large text, enhanced level

    Needs 4.5:1

    Pass

Graphics

  • AA · Icons and borders

    Icons, input borders, chart lines and other graphics

    Needs 3:1

    Pass

Preview

Related tools

What is Color Contrast Checker?

Test whether a text color is readable on a background color. Pick the two colors and instantly see the contrast ratio and whether it passes WCAG 2.2 AA and AAA for normal text, large text, and icons or borders. When a check fails, the tool finds the closest shade of your text or background color that passes, keeping the hue, and applies it in one click. A live preview shows sample text and graphics in your colors, and the result is also written as a plain sentence you can copy. The shown ratio is never rounded up to a threshold it does not reach, so a pass is always a real pass.

  • contrast
  • wcag
  • accessibility
  • a11y
  • color

Features

What you get with Color Contrast Checker.

  • WCAG 2.2 AA and AAA

    Five checks: normal text, large text, and icons and borders.

  • Honest Ratio

    Rounding never makes 4.499 look like a 4.5 pass.

  • Live Preview

    See sample text and graphics in your colors as you change them.

  • Closest Passing Color

    Failing a check? Get the nearest shade that passes and apply it in one click.

How to use Color Contrast Checker

Follow these steps to get the best results.

  1. Pick the colors

    Choose a text color and a background color with the pickers, or type a hex code.

  2. Read the result

    The ratio and verdict update instantly, with a pass or fail for each WCAG check.

  3. Fix it if needed

    Use the suggested color for AA or AAA, or darken the text and lighten the background yourself, then use the colors in your design.

    Output
    #767676 on #ffffff = 4.54:1 (passes AA)

Advertisement

In-feed adResponsive

Frequently asked questions

Common questions about Color Contrast Checker.

For WCAG AA, body text needs at least 4.5:1, and large text and graphics need 3:1. AAA is stricter: 7:1 for body text and 4.5:1 for large text. Black on white is the maximum, 21:1.

Comments

Share feedback, ask questions, or help others use this tool.

Join the discussion

Sign in to comment, reply, and report inappropriate content.

Advertisement

Mobile banner adResponsive