Color contrast checker

Check text and background colors against the WCAG 2.2 contrast rules, see a live sample, and get the nearest passing shade when a pair falls short.
  • WCAG 2.2 AA and AAA
  • Live text and button sample
  • Nearest passing shade

Use the tool

Colors

Contrast ratio

6.43:1

Passes AA for all text. AAA needs 7:1 for normal text.

  • Normal text AA, 4.5:1Pass
  • Normal text AAA, 7:1Fail
  • Large text AA, 3:1Pass
  • Large text AAA, 4.5:1Pass
  • Interface elements and graphics AA, 3:1Pass

Large text sample at 24 pixels

Normal text at 17 pixels. This is how a paragraph of body copy reads in these two colors.

Nearest passing shades

  • Text color for AAA#4f4f48
  • Background for AAA#fcfcfa

Each shade keeps the hue and saturation and only changes lightness.

How it works

  1. Enter two colors

    Type hex codes or use the color pickers: one for the text, one for the background.

  2. Read the results

    The ratio and each WCAG check update at once, with a sample of normal text, large text and a button.

  3. Fix a failing pair

    When a check fails, use the suggested shade: the same hue, made lighter or darker until it passes.

Questions people ask

  • What contrast ratio do I need?

    WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text, which is 24px, or about 19px in bold. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other parts of the interface need 3:1 against the colors next to them.

  • Which level should my website meet?

    AA is the usual target, and the level most accessibility laws and guidelines point to. AAA is stricter and hard to meet across a whole site, so aim for it where reading matters most, such as long articles.

  • How is the suggested color chosen?

    It keeps your color's hue and saturation and only makes it lighter or darker, by the smallest step that passes, so it stays as close to your brand color as possible.

  • Can I check colors with transparency?

    Not directly. Work out the solid color the transparent one makes on its background first, then check that against the text.

More free tools

Accessible color is part of every interface we design, along with type, spacing and how each page reads.

Explore brand and UI/UX design

See every free tool