DevTilt

Contrast Ratio Calculator

Get the exact contrast ratio between two sRGB colors using the WCAG relative luminance formula. No sign-up, no server calls.

How to calculate a contrast ratio

  1. Enter foreground and background colors (hex, rgb(), or hsl()).
  2. Read the numeric WCAG ratio.
  3. Use the threshold badges to see AA/AAA for normal and large text.
  4. Swapping the two colors does not change the ratio.

What is Contrast Ratio Calculator?

When you need the exact numeric contrast ratio — for a design token spec, an accessibility audit report, or a programmatic theme generator — this calculator returns the precise value between 1 and 21 for any two colors, along with the WCAG pass/fail breakdown.

Why use DevTilt's Contrast Ratio Calculator?

  • Precise contrast ratio from 1:1 to 21:1
  • WCAG AA and AAA pass/fail for normal and large text
  • Accepts HEX, RGB, or HSL color input
  • Shows ratio value for documentation and audit reports

Common use cases

  • Documenting contrast ratios in a design system token spec
  • Generating accessible color pairs programmatically
  • Writing an accessibility audit report with exact ratio values
  • Comparing two candidate text colors for the same background

FAQ

Using WCAG 2.x relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.
Same engine. This route emphasizes the numeric ratio; the Contrast Checker emphasizes pass/fail badges.
Hex (#RRGGBB), rgb(), and hsl() syntax.
Black on white is the maximum contrast pair in WCAG relative luminance math, producing roughly 21:1. Higher numbers do not occur for sRGB.
No. Contrast ratio uses the lighter and darker luminance regardless of which color is text versus background.