Tool Hub

Contrast Checker

Check WCAG 2.1 contrast ratio between text and background

Contrast ratio

Aa Bb Cc 123

Sample text · normal size

17.40:1

WCAG LevelResult
AA Normal (4.5:1)
Pass
AA Large / UI (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass

How to use

  1. Enter or pick the foreground colour using the colour input on the left.
  2. Enter or pick the background colour using the colour input on the right.
  3. Read the contrast ratio and the WCAG 2.1 pass/fail badges for normal text (AA requires 4.5:1), large text (AA requires 3:1), and UI components (3:1).
  4. Click the swap button to reverse the colours and verify both directions.

Examples

  • Foreground #767676 on background #ffffff produces a ratio of 4.48:1, which fails AA for normal text but passes for large text.
  • Foreground #000000 on #ffffff gives 21:1, passing every WCAG 2.1 level including AAA.

Verify outputs before using in production. No warranty — see Terms.