The quick brown fox jumps over the lazy dog
Contrast Ratio
3.90
to 1
AA NormalFAIL
AAA NormalFAIL
AA LargePASS
AAA LargeFAIL
Color Details
Text Color
Gray 500
#6b7280text-gray-500
Background Color
Gray 200
#e5e7ebbg-gray-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 | PASS |
| Large Text AAA | 4.5:1 | FAIL |
Code Examples
Tailwind CSShtml
<!-- Text color: text-gray-500 -->
<!-- Background: bg-gray-200 -->
<div class="bg-gray-200 p-6 rounded-lg">
<p class="text-gray-500">
Your accessible text here
</p>
</div>Plain CSScss
/* Text: #6b7280 on Background: #e5e7eb */
.accessible-container {
background-color: #e5e7eb;
color: #6b7280;
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
Aa
text-gray-6006.10:1
bg-gray-200
Aa
text-gray-7008.33:1
bg-gray-200
Aa
text-gray-5004.63:1
bg-gray-50
Frequently Asked Questions
Is gray 500 text on gray 200 accessible?▼
No, this combination fails WCAG AA with a contrast ratio of only 3.90:1, below the 4.5:1 minimum for normal text. However, it does pass for large text (18px+ bold or 24px+).
What is the contrast ratio of gray 500 on gray 200?▼
The contrast ratio is 3.90: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 gray 500 on gray 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 gray or adjusting the background.
Related Color Pairs
Check Your Own Color Pair
Use our free contrast checker to test any combination of text and background colors.
Open Contrast Checker