23
Total shades
in database
9
Pass AA on white
39% of shades
2
Pass AAA on white
9% of shades
17
Pass AA on black
74% of shades
WCAG AA Score
Shades passing 4.5:1 on white
9 of 23 Teal shades achieve at least 4.5:1 contrast on white — the WCAG AA threshold for normal body text.
WCAG AAA Score
Shades passing 7:1 on white
2 of 23 Teal shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Teal shade as a background, use these text colors for WCAG AA compliance.
White text works on:
Dark text works on:
Recommended Backgrounds
When using a Teal shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Teal Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Pale Turquoise | #AFEEEE | WCAG Fail1.3:1 | WCAG AAA16.3:1 | Text on black |
| Bright Teal | #01F9C6 | WCAG Fail1.4:1 | WCAG AAA15.4:1 | Text on black |
| Opal | #A8C3BC | WCAG Fail1.9:1 | WCAG AAA11.2:1 | Text on black |
| Medium Aquamarine | #66CDAA | WCAG Fail1.9:1 | WCAG AAA10.9:1 | Text on black |
| Cambridge Blue | #A3C1AD | WCAG Fail1.9:1 | WCAG AAA10.8:1 | Text on black |
| Glacier | #80B3C4 | WCAG Fail2.3:1 | WCAG AAA9.2:1 | Text on black |
| Verdigris Teal | #43B3AE | WCAG Fail2.5:1 | WCAG AAA8.3:1 | Text on black |
| Light Teal | #20B2AA | WCAG Fail2.6:1 | WCAG AAA8.0:1 | Text on black |
| Light Sea Green | #20B2AA | WCAG Fail2.6:1 | WCAG AAA8.0:1 | Text on black |
| Patina | #4D9B72 | WCAG AA Large3.4:1 | WCAG AA6.3:1 | Text on black |
| Steel Teal | #5F8A8B | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Persian Teal | #009473 | WCAG AA Large3.8:1 | WCAG AA5.5:1 | Text on black |
| Slate Teal | #5F8787 | WCAG AA Large4.0:1 | WCAG AA5.3:1 | Text on black |
| Dark Cyan | #008B8B | WCAG AA Large4.2:1 | WCAG AA5.1:1 | Text on black |
| Muted Teal | #5F7A76 | WCAG AA4.6:1 | WCAG AA4.5:1 | Text on white |
| Ocean Teal | #00818A | WCAG AA4.7:1 | WCAG AA4.5:1 | Text on white |
| Medium Teal | #00827F | WCAG AA4.7:1 | WCAG AA4.5:1 | Text on white |
| Teal | #008080 | WCAG AA4.8:1 | WCAG AA Large4.4:1 | Text on white |
| Teal Blue | #367588 | WCAG AA5.2:1 | WCAG AA Large4.1:1 | Text on white |
| Pine Teal | #3D6E6E | WCAG AA5.8:1 | WCAG AA Large3.6:1 | Text on white |
| Forest Teal | #2E6F6E | WCAG AA5.8:1 | WCAG AA Large3.6:1 | Text on white |
| Deep Teal | #004D47 | WCAG AAA9.8:1 | WCAG Fail2.1:1 | Text on white |
| Dark Teal | #003E4E | WCAG AAA11.7:1 | WCAG Fail1.8:1 | Text on white |
Accessibility Notes
- 1
Teal 600–900 reliably passes WCAG AA and often AAA on white backgrounds.
- 2
Mid teal (400–500) is borderline for AA; #14B8A6 achieves approximately 3.9:1 — use for large text or UI components only.
- 3
Light teals (50–200) fail AA on white for text; they work beautifully as card backgrounds and subtle dividers.
- 4
Teal can be confused with blue or green by some viewers; adding text labels to teal-coded states improves clarity.
- 5
Teal is one of the safest choices for both color-blind and non-color-blind users due to its distinctive brightness profile.
Design Examples
TEXT ON WHITE BACKGROUND
Teal
This body text uses Muted Teal — contrast 4.63:1
Example link in Muted TealBUTTON COMPONENT
Muted Teal — #5F7A76
CARD WITH TEAL BACKGROUND
Card heading
A card component using Pale Turquoise as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Muted Teal background with white text — 4.6:1 contrast.
Design Tips
- ✓
Use #0F766E or #115E59 for body text or links on white — both exceed 6:1.
- ✓
#0D9488 on white achieves ~5:1 — a reliable primary teal for CTA buttons.
- ✓
Pair light teal (#F0FDFA) backgrounds with dark teal text (#134E4A) for accessible, calming healthcare or wellness UIs.