Skip to content
SocialTools

Color Contrast Checker

Pick a text color and a background color to get their contrast ratio and WCAG AA and AAA pass or fail results.

SEO ToolsSEO
Sample text preview
Contrast ratio
4.47:1
WCAG AA (normal)
Fail
WCAG AA (large)
Pass
WCAG AAA
Fail

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt, about 24px, or 14pt bold, about 18.66px).

Runs in your browser. Nothing you enter is uploaded.

What it does

Low contrast text is one of the most common accessibility failures on websites, buttons and social graphics. This checker takes two six-digit hex colors, from the color pickers or typed in, computes the WCAG 2 relative luminance of each, and reports the contrast ratio to two decimals on a scale from 1:1 to 21:1.

Three results follow: AA for normal text (4.5:1), AA for large text (3:1) and AAA for normal text (7:1), each marked Pass or Fail, alongside a sample text block in your exact colors. Designers use it for brand palettes, developers for button and link states, and creators for text on thumbnails and quote cards.

How to use it

  1. 1

    Set Text color with the color picker or type a hex value such as #1f2937.

  2. 2

    Set Background color the same way.

  3. 3

    Look at the sample text preview in those colors.

  4. 4

    Read the Contrast ratio and the WCAG AA (normal), WCAG AA (large) and WCAG AAA results.

  5. 5

    Darken or lighten one color until the level you need passes.

What you get

The contrast ratio (for example 4.54:1), Pass or Fail for WCAG AA normal text, AA large text and AAA, and a large sample text block rendered in the chosen colors.

When to use it

Brand colors for body text
Check whether a brand color can carry paragraph text on white, or should be kept for headings and accents where the 3:1 large text rule applies.
Button labels and CTAs
Test white or dark label text against each button fill, including hover colors, before handing off a design.
Text on social graphics
Sample the text and background colors of a thumbnail or quote card to see whether the words hold up at small sizes.
Muted grey and placeholder text
Light greys often fail. Adjust the hex value until AA normal passes to find the lightest grey you can use.

Example

Input

Text color: #767676
Background color: #ffffff

Output

Contrast ratio: 4.54:1
WCAG AA (normal): Pass
WCAG AA (large): Pass
WCAG AAA: Fail

#767676 is close to the lightest grey that still passes AA for normal text on pure white.

Tips

  • Enter full six-digit hex codes. Shorthand like #fff and rgba() values are not recognized, and the results disappear until the input is valid.
  • Transparency is not supported, so for semi-transparent text or text over a photo, sample the actual blended color from a screenshot.
  • WCAG counts text as large at 18pt (24px) regular or 14pt (about 18.7px) bold. Below that, go by the 4.5:1 AA normal result.
  • Check hover, focus and disabled states as separate color pairs, since each one is read on its own.

Questions

Which WCAG contrast level should a website aim for?

AA is the usual target in accessibility policies and procurement rules: 4.5:1 for normal text and 3:1 for large text. AAA at 7:1 is stricter and often impractical for brand colors across a whole site.

Does it matter which color is the text and which is the background?

Not for the ratio. The formula compares the lighter and darker color, so swapping them gives the same number. Only the preview changes.

Why is there no AAA result for large text?

AAA for large text requires 4.5:1, the same threshold as AA for normal text, so the WCAG AA (normal) row answers that question too.

Do logos and brand wordmarks need to pass contrast?

No. WCAG exempts logotypes and purely decorative or incidental text. Taglines and buttons placed next to a logo still count.

Related tools