Blue 700 on Yellow 200 - WCAG Contrast Check

The quick brown fox jumps over the lazy dog

Contrast Ratio

5.76

to 1

AA NormalPASS

AAA NormalFAIL

AA LargePASS

AAA LargePASS

Color Details

Text Color

Blue 700

#1d4ed8text-blue-700

Background Color

Yellow 200

#fef08abg-yellow-200

WCAG Compliance

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

Code Examples

Tailwind CSShtml

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

Plain CSScss

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

Use Cases

Heading text on light cards
Sidebar navigation labels

Accessible Alternatives

text-blue-8007.50:1

bg-yellow-200

text-blue-9008.90:1

bg-yellow-200

text-blue-7005.08:1

bg-yellow-300

Frequently Asked Questions

Is blue 700 text on yellow 200 accessible?▼

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

What is the contrast ratio of blue 700 on yellow 200?▼

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