Color Contrast Check

#ec4899 on #0f172a

Tailwind Pink 500 (#ec4899) text on Dark Slate (#0f172a)

5.06:1

Passes WCAG AA

WCAG results for #ec4899 on #0f172a

CheckRequiresResult
Normal text — AA 4.5:1 ✓ Pass
Large text — AA 3:1 ✓ Pass
Normal text — AAA 7:1 ✗ Fail
Large text — AAA 4.5:1 ✓ Pass
UI & graphics (non-text) 3:1 ✓ Pass

At 5.06:1, Tailwind Pink 500 (#ec4899) on Dark Slate (#0f172a) meets the WCAG 2.1 AA minimum of 4.5:1 for normal text — safe for body copy.

Open this pair in the contrast checker →

Related color pairs

How contrast ratio is measured

The ratio compares the relative luminance of the text and background, on a scale from 1:1 (no contrast) to 21:1 (black on white). WCAG 1.4.3 requires 4.5:1 for normal text and 3:1 for large text; the stricter AAA level wants 7:1 and 4.5:1. Low contrast is the single most common WCAG failure and a frequent trigger in ADA website lawsuits — but it's also one of the easiest to fix.

Frequently asked questions

Is #ec4899 text on a #0f172a background accessible?

Its contrast ratio is 5.06:1. For normal-size text it passes WCAG 2.1 AA (which requires 4.5:1).

What is the contrast ratio of #ec4899 and #0f172a?

Exactly 5.06:1, computed with the WCAG relative-luminance formula. The maximum possible ratio is 21:1 (black on white).

Does #ec4899 on #0f172a pass WCAG AAA?

For normal text, AAA requires 7:1, so this pair does not pass AAA. For large text, AAA requires 4.5:1, which it passes.

Contrast is one of ~50 WCAG checks

Fixing color is a great start, but automated tools catch only 30–40% of accessibility issues. Get a free human-led scan of what a contrast check can't see.