Free Color Contrast Checker
Calculate the exact WCAG 2.1 contrast ratio between any two hex colors. Check Level AA and AAA compliance for body text, headings, and UI components in real time.
Good typography is readable typography.
Contrast ensures that everyone can read your interfaces clearly, including people with low visual acuity, age-related vision loss, and users viewing their phones outdoors in direct sunlight.
Checking colors one pair at a time?
Auditing design systems manually is painful. Install TintSense for Figma to scan hundreds of frames at once, resolve semi-transparent card overlays, and fix failing text in a single click.
- Batch scan entire artboards in <1 second
- Full Porter-Duff alpha compositing for translucent cards
- Style-aware OKLab Smart Fix color suggestions
- 100% Free core scanner — zero account required
How Color Contrast is Calculated Under WCAG 2.1
The World Wide Web Consortium (W3C) defines contrast ratio based on the relative luminance of two colors. Relative luminance measures the perceived brightness of any point in a colorspace, normalized to 0 for the darkest black and 1 for the brightest white.
Contrast ratio is defined as: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color, and L2 is the relative luminance of the darker color.
Ratios range from 1:1 (identical colors, zero contrast) to 21:1 (pure black #000000 against pure white #FFFFFF).
Understanding Normal vs. Large Text
WCAG guidelines recognize that larger and bolder characters are inherently easier to read at lower contrast ratios:
- Normal text (body copy, form labels, captions): Requires at least 4.5:1 for Level AA and 7.0:1 for Level AAA.
- Large text (headings, hero titles): Defined as text that is at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold (font weight ≥ 700). Requires at least 3.0:1 for Level AA and 4.5:1 for Level AAA.
- Non-text contrast (WCAG 2.1 SC 1.4.11): User interface components such as form input outlines, radio buttons, and standalone icons must maintain at least 3.0:1 contrast against adjacent backgrounds.
Why Single-Pair Web Calculators Are Not Enough for Figma
Web-based contrast tools are great for quick hex sanity checks. But in modern design systems:
- Text often sits over multi-stop linear gradients.
- Cards have semi-transparent background fills (e.g.
#FFFFFFat 85% opacity over a colored canvas). - Design tokens are linked across dozens of component variants (see our guide on accessible color palettes in Figma Variables).
Testing every text layer by copy-pasting hex codes into a browser takes hours and misses subpixel alpha blending. That's why we built TintSense—bringing precision, automated audits, and 1-click OKLab fixes directly into your Figma workspace.