21
Total shades
in database
1
Pass AA on white
5% of shades
1
Pass AAA on white
5% of shades
20
Pass AA on black
95% of shades
WCAG AA Score
Shades passing 4.5:1 on white
1 of 21 Cyan 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
1 of 21 Cyan shades exceed 7:1 — the WCAG AAA threshold required for enhanced accessibility.
Recommended Text Colors
When using a Cyan 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 Cyan shade as text color, these backgrounds provide WCAG AA compliance.
Works on white / light:
Automated Accessibility Validation — All Cyan Shades
| Color | Hex | On White | On Black | Best Use |
|---|---|---|---|---|
| Light Cyan | #E0FFFF | WCAG Fail1.1:1 | WCAG AAA19.9:1 | Text on black |
| Aquamarine | #7FFFD4 | WCAG Fail1.2:1 | WCAG AAA17.2:1 | Text on black |
| Cyan | #00FFFF | WCAG Fail1.3:1 | WCAG AAA16.8:1 | Text on black |
| Aqua | #00FFFF | WCAG Fail1.3:1 | WCAG AAA16.8:1 | Text on black |
| Electric Cyan | #00FFFF | WCAG Fail1.3:1 | WCAG AAA16.8:1 | Text on black |
| Bright Cyan | #00EDFF | WCAG Fail1.4:1 | WCAG AAA14.6:1 | Text on black |
| Topaz | #FFC87C | WCAG Fail1.5:1 | WCAG AAA13.8:1 | Text on black |
| Sky Cyan | #80DAEB | WCAG Fail1.6:1 | WCAG AAA13.2:1 | Text on black |
| Turquoise | #40E0D0 | WCAG Fail1.6:1 | WCAG AAA12.8:1 | Text on black |
| Tiffany Cyan | #81D8D0 | WCAG Fail1.7:1 | WCAG AAA12.7:1 | Text on black |
| Arctic Blue | #79D4DE | WCAG Fail1.7:1 | WCAG AAA12.3:1 | Text on black |
| Medium Turquoise | #48D1CC | WCAG Fail1.9:1 | WCAG AAA11.3:1 | Text on black |
| Medium Aqua | #66CDAA | WCAG Fail1.9:1 | WCAG AAA10.9:1 | Text on black |
| Dark Turquoise | #00CED1 | WCAG Fail1.9:1 | WCAG AAA10.8:1 | Text on black |
| Robin Egg Blue | #00CCCC | WCAG Fail2.0:1 | WCAG AAA10.5:1 | Text on black |
| Sky Teal | #62B4C4 | WCAG Fail2.4:1 | WCAG AAA8.8:1 | Text on black |
| Pool Blue | #00B5CC | WCAG Fail2.5:1 | WCAG AAA8.5:1 | Text on black |
| Tourmaline | #86A1A9 | WCAG Fail2.7:1 | WCAG AAA7.7:1 | Text on black |
| Caribbean Blue | #1CA9C9 | WCAG Fail2.8:1 | WCAG AAA7.6:1 | Text on black |
| Ocean Cyan | #009BC4 | WCAG AA Large3.2:1 | WCAG AA6.5:1 | Text on black |
| Aegean Blue | #1F456E | WCAG AAA9.8:1 | WCAG Fail2.1:1 | Text on white |
Accessibility Notes
- 1
Light and mid cyanshades (50–500) typically fail WCAG AA on white — cyan is too luminous for text on light backgrounds at these levels.
- 2
Dark cyanshades (700–900) pass WCAG AA on white: #0E7490 achieves ~6.6:1.
- 3
Cyan on black is highly effective — #22D3EE achieves approximately 8:1 on black, making it excellent for dark-mode UIs.
- 4
Cyan can appear similar to green or blue in some lighting conditions — ensure sufficient saturation and luminance difference.
- 5
Use cyan primarily as an accent or icon color rather than body text on light backgrounds.
Design Examples
TEXT ON WHITE BACKGROUND
Cyan
This body text uses Aegean Blue — contrast 9.84:1
Example link in Aegean BlueBUTTON COMPONENT
Aegean Blue — #1F456E
CARD WITH CYAN BACKGROUND
Card heading
A card component using Light Cyan as the background. Dark text ensures readability.
DARK BACKGROUND CARD
Card heading
Aegean Blue background with white text — 9.8:1 contrast.
Design Tips
- ✓
For dark mode UIs, #22D3EE and #67E8F9 are attractive cyanshades with excellent AA/AAA contrast on dark backgrounds.
- ✓
Use #0E7490 or #155E75 for cyantext on white backgrounds.
- ✓
Light cyan (#ECFEFF) with dark cyan text (#164E63) is a subtle, accessible combination for tech product dashboards.