Blueprint adheres to Level AA of the WCAG 2.1 color contrast guidelines. It is important that Blueprint components and PeopleCloud products meet web accessibility standards.
Contrast
Ultramarine
Color contrast for various text colors at various sizes on an ultramarine background | Color | 12px | 15px | 22px |
|---|
| Midnight | Fail | Fail | Fail |
|---|
| Storm | Fail | Fail | Fail |
|---|
| Ultramarine | Fail | Fail | Fail |
|---|
| Coconut | Pass | Pass | Pass |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Fail | Fail | Fail |
|---|
Midnight
Color contrast for various text colors at various sizes on a midnight background | Color | 12px | 15px | 22px |
|---|
| Midnight | Fail | Fail | Fail |
|---|
| Storm | Fail | Fail | Fail |
|---|
| Ultramarine | Fail | Fail | Fail |
|---|
| Coconut | Pass | Pass | Pass |
|---|
| Shamrock | Pass | Pass | Pass |
|---|
| Clementine | Pass | Pass | Pass |
|---|
| Tomato | Fail | Fail | Fail |
|---|
Coconut
Color contrast for various text colors at various sizes on a coconut background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Pass | Pass | Pass |
|---|
| Ultramarine | Pass | Pass | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Pass | Pass | Pass |
|---|
Cobalt
Color contrast for various text colors at various sizes on a cobalt background | Color | 12px | 15px | 22px |
|---|
| Midnight | Fail | Fail | Fail |
|---|
| Storm | Fail | Fail | Fail |
|---|
| Ultramarine | Fail | Fail | Fail |
|---|
| Coconut | Pass | Pass | Pass |
|---|
| Shamrock | Fail | Fail | Pass |
|---|
| Clementine | Fail | Fail | Pass |
|---|
| Tomato | Fail | Fail | Fail |
|---|
Blueberry
Color contrast for various text colors at various sizes on a blueberry background | Color | 12px | 15px | 22px |
|---|
| Midnight | Fail | Fail | Fail |
|---|
| Storm | Fail | Fail | Fail |
|---|
| Ultramarine | Fail | Fail | Fail |
|---|
| Coconut | Pass | Pass | Pass |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Fail | Fail | Fail |
|---|
Cornflower
Color contrast for various text colors at various sizes on a cornflower background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Fail | Fail | Pass |
|---|
| Ultramarine | Fail | Fail | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Fail | Fail | Pass |
|---|
Ice
Color contrast for various text colors at various sizes on an ice background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Pass | Pass | Pass |
|---|
| Ultramarine | Pass | Pass | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Pass | Pass | Pass |
|---|
Storm
Color contrast for various text colors at various sizes on a storm background | Color | 12px | 15px | 22px |
|---|
| Midnight | Fail | Fail | Fail |
|---|
| Storm | Fail | Fail | Fail |
|---|
| Ultramarine | Fail | Fail | Fail |
|---|
| Coconut | Pass | Pass | Pass |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Fail | Fail | Fail |
|---|
Haze
Color contrast for various text colors at various sizes on a haze background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Fail | Fail | Pass |
|---|
| Ultramarine | Fail | Fail | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Fail | Fail | Pass |
|---|
Mist
Color contrast for various text colors at various sizes on a mist background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Pass | Pass | Pass |
|---|
| Ultramarine | Pass | Pass | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Pass | Pass | Pass |
|---|
Cloud
Color contrast for various text colors at various sizes on a cloud background | Color | 12px | 15px | 22px |
|---|
| Midnight | Pass | Pass | Pass |
|---|
| Storm | Pass | Pass | Pass |
|---|
| Ultramarine | Pass | Pass | Pass |
|---|
| Coconut | Fail | Fail | Fail |
|---|
| Shamrock | Fail | Fail | Fail |
|---|
| Clementine | Fail | Fail | Fail |
|---|
| Tomato | Pass | Pass | Pass |
|---|