Color contrast checker

Check text and background colors against WCAG 2.1 contrast ratios, with APCA Lc as a second opinion.

How to check color contrast

  1. Enter the text color and the background color. Use the color picker or type a hex code with 3 or 6 digits.
  2. Read the contrast ratio and the pass or fail result for small text (AA and AAA), large text (AA) and UI components such as icons and borders.
  3. Check the APCA Lc value as a second opinion. It describes how the text reads and is guidance rather than a pass or fail.
  4. If the pair fails, use Auto-fix to move the text color to the nearest lightness that reaches 4.5:1, or swap the colors to test the reverse. The live preview shows the pair on a headline, body text and buttons.

What you can do

  • WCAG 2.1 contrast ratio

    Get the exact ratio and the AA and AAA results for normal text, large text and non-text UI.

  • APCA Lc

    See the APCA lightness contrast with a plain-language use, from "Preferred for body text" down to "Not readable".

  • Auto-fix

    Nudge a failing text color to the nearest lightness that reaches AA at 4.5:1.

  • Live preview

    See your pair on a headline, body copy and buttons before you commit to it.

  • Plain-language guidance

    A short note explains what the result means for body text and for large text.

Frequently asked questions

How do I check color contrast?

Enter your text color and background color in the checker. It calculates the WCAG contrast ratio and shows whether the pair passes AA and AAA for small text, large text and UI components. You can type hex codes or use the color pickers.

What contrast ratio does WCAG require?

WCAG 2.1 level AA requires at least 4.5:1 for normal text, and 3:1 for large text and for UI components such as input borders and icons. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text in WCAG?

Text at 24 CSS pixels (18 point) or larger, or at 18.66 pixels (14 point) or larger when it is bold. Large text needs a lower ratio because bigger letterforms are easier to read.

What is APCA and should I use it?

APCA is a perceptual contrast method from the WCAG 3 drafts. It returns a Lc value, and the checker treats Lc 75 and above as fine for body text and Lc 45 and above as the floor for large or bold text. WCAG 2 ratios are still what most standards and audits ask for, so check both.

Does the order of the two colors matter?

Not for the WCAG ratio, which is the same whichever color is the text. It does for APCA, because the result depends on which color is the text and which is the background. Use Swap to compare both ways.

What is the contrast ratio of black on white?

It is 21:1, the highest ratio possible. The lowest is 1:1, which is the same color on itself.