Contrast Checker

Check WCAG contrast ratios between two colors. Verify AA and AAA compliance in real time.

Quick Combos

Foreground (text)

Background

17.06:1

Normal text

AAA

Large text

AAA

Heading Preview

This is how your text looks on this background. The quick brown fox jumps over the lazy dog.

Smaller body text is harder to read with low contrast. WCAG requires higher ratios for normal-sized text than for large text (18px+ bold or 24px+).

ButtonOutline

WCAG AA

Normal text: 4.5:1

Large text: 3:1

UI components: 3:1

WCAG AAA

Normal text: 7:1

Large text: 4.5:1

Large text

Bold: 18px+

Regular: 24px+

Show Tailwind

CSS

color: #f8fafc;
background-color: #0f172a;
/* Contrast ratio: 17.06:1 */
/* WCAG Normal text: AAA */
/* WCAG Large text: AAA */

Tailwind CSS

<div class="bg-[#0f172a] text-[#f8fafc]">
  <!-- Contrast: 17.06:1 (AAA normal / AAA large) -->
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

View all Goodies

NewAccessibility

Breakpoint Tester

Preview HTML at multiple screen sizes side by side. Test responsive layouts with Tailwind breakpoint reference.

Try it ->

NewLayout

Spacing System Generator

Build a consistent spacing scale from a base unit. Generate linear, geometric or Fibonacci scales with CSS variables and Tailwind config.

Try it ->

Layout

CSS Grid Generator

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.

Try it ->

Effects

Text Effect Generator

Create stunning text effects — gradient text, stroke, neon glow, long shadow, retro 3D and emboss.

Clamp Calculator

Generate responsive CSS clamp() values for fluid typography and spacing. Set min/max viewport and values, preview at every breakpoint.

Try it ->

NewAnimation

SVG Animation Generator

Generate animated SVG graphics — spinners, loaders, shapes, waves and more. Customize colors, speed and size, then copy or download.

Try it ->

View all Goodies