Zinc 400 on Zinc 200 - WCAG Contrast Check

The quick brown fox jumps over the lazy dog

Contrast Ratio

2.02

to 1

AA NormalFAIL

AAA NormalFAIL

AA LargeFAIL

AAA LargeFAIL

Color Details

Text Color

Zinc 400

#a1a1aatext-zinc-400

Background Color

Zinc 200

#e4e4e7bg-zinc-200

WCAG Compliance

Criterion	Min Ratio	Result
Normal Text AA	4.5:1	FAIL
Normal Text AAA	7:1	FAIL
Large Text AA	3:1	FAIL
Large Text AAA	4.5:1	FAIL

Code Examples

Tailwind CSShtml

<!-- Text color: text-zinc-400 -->
<!-- Background: bg-zinc-200 -->
<div class="bg-zinc-200 p-6 rounded-lg">
  <p class="text-zinc-400">
    Your accessible text here
  </p>
</div>

Plain CSScss

/* Text: #a1a1aa on Background: #e4e4e7 */
.accessible-container {
  background-color: #e4e4e7;
  color: #a1a1aa;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

Use Cases

Decorative text only (not for body copy)
Large display headings (36px+) if AA Large passes
Placeholder or watermark text

Accessible Alternatives

text-zinc-6006.09:1

bg-zinc-200

text-zinc-7008.23:1

bg-zinc-200

text-zinc-4007.76:1

bg-zinc-950

Frequently Asked Questions

Is zinc 400 text on zinc 200 accessible?▼

No, this combination fails WCAG AA with a contrast ratio of only 2.02:1, below the 4.5:1 minimum for normal text.

What is the contrast ratio of zinc 400 on zinc 200?▼

The contrast ratio is 2.02:1. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

How can I make zinc 400 on zinc 200 accessible?▼

To achieve WCAG AA compliance, try using a darker text shade or a lighter background shade. For example, increasing the contrast by using a darker shade of zinc or adjusting the background.