cv.cm
All lessons

Text

How to check color contrast for WCAG

You have a text color and a background color. You will read their contrast ratio and see whether the pair passes WCAG 2 AA and AAA. Grey #777777 on white is 4.48:1 and fails AA for normal text by a hair; #767676 passes. Nothing leaves this tab.

6-minute read

Today's result A ratio such as 4.48:1, pass or fail for AA and AAA at normal and large sizes, and the closest text color that passes when the pair fails.

Open the contrast checker with both hex codes at hand. Check body text against 4.5:1, headings over 24px against 3:1, and icons or borders against 3:1. Nothing is uploaded.

Open Contrast checker
Contents

  1. Know the thresholds

    WCAG 2 AA: 4.5:1 for normal text and 3:1 for large text. AAA: 7:1 and 4.5:1. Large text is 24px regular or about 18.7px bold. Icons, borders and form controls need 3:1.

    Ratio thresholds: 3:1 for large text and UI, 4.5:1 for AA normal text, 7:1 for AAA normal text.
    Ratio thresholds: 3:1 for large text and UI, 4.5:1 for AA normal text, 7:1 for AAA normal text.

  2. Open Contrast checker on cv.cm

    A sample pink on cream pair is filled. The ratio and the pass/fail rows sit on the right under a text sample. Nothing is uploaded.

    Open Contrast checker

  3. Enter the two colors

    Type a hex code such as #777777 for text and #ffffff for background, or pick with the color swatch. Three-digit codes like #777 work too. The sample updates as you type.

  4. Read the ratio and the rows

    #777777 on #ffffff is 4.48:1: AA large text and UI pass, AA normal text fails. Each row says Pass or Fail against its threshold.

  5. Take the suggested color

    When normal text fails AA, the page suggests the closest text color that reaches 4.5:1, moving toward black or white. For #777777 on white it suggests #767676. Swap exchanges text and background.

    #777777 on white is 4.48:1 and fails AA normal text; #767676 reaches 4.54:1 and passes.
    #777777 on white is 4.48:1 and fails AA normal text; #767676 reaches 4.54:1 and passes.

  6. Check every state, then copy

    Repeat for links, hover and disabled colors, and for text on images use the darkest part of the image as background. Copy puts the colors, ratio and results on the clipboard.

Use with these tools

FAQ

Can I check color contrast free online?

Yes. cv.cm computes the WCAG ratio in this tab. Nothing is uploaded.

What ratio does normal text need?

4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1.

What is large text?

At least 18pt (24px) regular or 14pt (about 18.7px) bold.

Does the order of the colors matter?

No. The ratio is the same either way. Swap only changes the preview.

Why does #777777 fail?

Its ratio on white is 4.48:1, just under 4.5:1. #767676 reaches 4.54:1 and passes.