Global Tools Hub
Current language: English

Contrast Checker

Compare text and background colors, view the contrast ratio, and confirm WCAG accessibility levels.

How to use

  1. Enter foreground and background HEX colors or choose colors using the pickers.
  2. Use the swap button to quickly switch text and background colors.
  3. Review the contrast ratio and WCAG pass/fail results below.

Use 6-digit HEX values (for example #111827).

Use 6-digit HEX values (for example #111827).

Contrast quick guide

Use this lightweight checker to validate text readability and move to focused contrast guides when you need deeper fixes.

When to use this tool

  • Before publishing new button, link, or body text colors.
  • When a design review says text feels hard to read.
  • When testing brand colors across light and dark UI surfaces.

Quick steps

  1. Enter text (foreground) and background HEX colors.
  2. Check the ratio and WCAG AA/AAA results.
  3. Adjust colors and retest until key text passes.

Common mistakes

  • Testing only headings and skipping small body text.
  • Approving one state but not hover, focus, or disabled states.
  • Relying on visual taste instead of measured contrast ratios.

Related Contrast Checker guides

Read short practical guides for fixing low contrast and making accessible UI color decisions.