Microdeck.tools 100% In-Browser

WCAG Contrast Checker & Accessible Tailwind Palette

New

Calculate exact WCAG 2.1 contrast ratios for Normal and Large text, auto-nudge failing foreground colors to pass AA (4.5:1) or AAA (7.0:1), preview UI readability, and generate Tailwind 50–950 CSS variables.

100% In-Browser No Server Storage Instant Results
Foreground & Background
WCAG 2.1 Ratio
6.29:1
PASS AA Normal (4.5:1)FAIL AAA Normal (7.0:1)PASS AA Large / UI (3.0:1)
Live UI Readability Preview

Accessible Design Converts Better

This 14px body paragraph previews your exact contrast ratio (6.29:1) on buttons, alerts, and cards across light and dark interfaces.

Primary Action Button18pt Large Heading Sample
Tailwind 50–950 Accessible Ramp (Derived from #4F46E5)
:root {
  --color-primary-50: #F3F2FC;
  --color-primary-100: #E7E6F9;
  --color-primary-200: #C8C5F7;
  --color-primary-300: #9D98F1;
  --color-primary-400: #6A62E9;
  --color-primary-500: #3328E1;
  --color-primary-600: #241BC0;
  --color-primary-700: #1E169D;
  --color-primary-800: #171179;
  --color-primary-900: #161254;
  --color-primary-950: #0D0B32;
}

Did this tool save you time? Help keep Microdeck free and maintained. Completely optional · From $3.

ADVERTISEMENT
Privacy-Friendly Sponsor Unit
Contextual tech, developer, & creator tools sponsorship slot. Zero intrusive tracking.

How It Works Under the Hood

sRGB channels are linearized per the W3C WCAG 2.1 relative luminance equation (0.2126R + 0.7152G + 0.0722B) to score contrast ratios and search HSL lightness steps for compliant AA/AAA shades.

Step-by-Step Instructions

1

Pick or type Foreground text and Background surface hex colors.

2

Check PASS/FAIL badges for AA Normal (4.5:1), AA Large (3.0:1), and AAA Normal (7.0:1).

3

Click Auto-Fix if failing or click any stop in the 50–950 Tailwind ramp and copy CSS variables.

Key Features & Performance

  • Instant Hue-Preserving Auto-Fix: Finds the closest compliant AA or AAA text lightness automatically
  • Live UI Contrast Preview: Test body text, headings, and button borders in real context
  • Tailwind 50–950 Scale Generator: Derives full accessible color ramps and CSS custom properties
  • Zero Server Latency: Updates smoothly at 60fps as you pick colors

Local Browser Processing & Privacy

Traditional web converters upload your documents, snippets, or media files to remote servers. WCAG Contrast Checker & Accessible Tailwind Palette runs inside your browser tab:

Processed in This Tab

Your input text and files are processed locally without uploading payloads to a processing server.

No Tool Payload Logging

Microdeck does not log or store the files or inputs you paste into tool workspaces (normal static hosting/CDN requests still load page assets).

Tab Memory Lifecycle

Working outputs stay in your browser tab and are released when you reset the tool or close the tab.

Frequently Asked Questions

What minimum contrast ratio does WCAG 2.1 Level AA require?

Level AA requires at least 4.5:1 for normal body text and 3.0:1 for large text (18pt regular or 14pt bold) and UI components.

How does Auto-Fix keep my brand look consistent?

Instead of jumping straight to black or white, Auto-Fix keeps your exact hue and saturation while stepping lightness until AA or AAA passes.

Explore Related Micro-Tools

SVG Optimizer (SVGO), Color Swapper & Exporter

Compress SVG weight 60–80%, swap palette colors in 1 click & export React / Vue / Astro

Modern CSS Smooth Shadows & Glass Generator

Generate layered smooth box shadows & frosted glassmorphism

CSS Fluid Clamp & Spacing Generator

Generate modern fluid clamp() CSS for responsive typography

Support Microdeck

Completely optional · From $3 · No account required

Choose an amount (USD): Selected: $5

Minimum support amount is $3 USD.

Completely optional · From $3 · Checkout opens on Gumroad.

Continue to checkout — $5