DevTilt

Contrast Checker

Enter foreground and background colors to get an instant WCAG contrast ratio with pass/fail for normal and large text.

How to check color contrast

  1. Set foreground (text) and background colors with the picker or text fields.
  2. The WCAG contrast ratio and AA/AAA badges update live.
  3. Swap colors to reverse the pair.
  4. Copy the results, the ratio, or a CSS snippet.

What is Contrast Checker?

Low contrast between text and background is one of the most common accessibility failures — and one of the hardest to spot by eye. Enter your foreground and background colors to see the contrast ratio and whether your combination passes WCAG AA and AAA thresholds for normal and large text.

Why use DevTilt's Contrast Checker?

  • WCAG 2.x contrast ratio calculation
  • Pass/fail indicators for AA and AAA levels
  • Separate results for normal and large text sizes
  • Live preview of text on the chosen background

Common use cases

  • Checking body text readability against a brand background color
  • Auditing a button label color before shipping a UI component
  • Verifying link color contrast in a navigation bar
  • Pre-launch accessibility review of a marketing landing page

FAQ

WCAG 2.x relative luminance formula for sRGB colors. Opaque colors only in this version.
AA: 4.5:1 normal text, 3:1 large text. AAA: 7:1 normal text, 4.5:1 large text.
Yes. Copy the full results, the ratio alone, or a CSS color/background snippet.
This version evaluates opaque sRGB colors only. Semi-transparent text over varied backgrounds needs manual flattening to a solid pair first.
18pt regular or 14pt bold and larger qualify as large text, which has lower AA and AAA thresholds than body copy.