Gray 900 on Emerald 100 - WCAG Contrast Check

The quick brown fox jumps over the lazy dog

Contrast Ratio

15.64

to 1

AA NormalPASS

AAA NormalPASS

AA LargePASS

AAA LargePASS

Color Details

Text Color

Gray 900

#111827text-gray-900

Background Color

Emerald 100

#d1fae5bg-emerald-100

WCAG Compliance

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

Code Examples

Tailwind CSShtml

<!-- Text color: text-gray-900 -->
<!-- Background: bg-emerald-100 -->
<div class="bg-emerald-100 p-6 rounded-lg">
  <p class="text-gray-900">
    Your accessible text here
  </p>
</div>

Plain CSScss

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

Use Cases

Heading text on light cards
Sidebar navigation labels

Accessible Alternatives

text-gray-6006.66:1

bg-emerald-100

text-gray-7009.09:1

bg-emerald-100

text-gray-9004.71:1

bg-emerald-600

Frequently Asked Questions

Is gray 900 text on emerald 100 accessible?▼

Yes, this combination passes WCAG AA with a contrast ratio of 15.64:1, meeting the minimum 4.5:1 requirement for normal text.

What is the contrast ratio of gray 900 on emerald 100?▼

The contrast ratio is 15.64: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.

Does this combination meet WCAG AAA?▼

Yes, with a 15.64:1 contrast ratio, this combination meets the strictest WCAG AAA standard (7:1 minimum), making it excellent for maximum accessibility.