We use cookies to give you the best possible experience of our website. Mentions
Contrast ratios between foreground colors in columns and background colors in rows.
| Foregrounds →Backgrounds ↓ | Cosmic White#FFFFFF | Moon Dust#F2F0F7 | Nebula Mist#CAC4D8 | Meteor Gray#817A91 | Deep Space#211A32 | Cosmic Black#0C0814 | Cosmic Purple#6C4DFF | Starlight Blue#3478F6 | Solar Pink#D93F8C |
|---|---|---|---|---|---|---|---|---|---|
| Cosmic White#FFFFFF | |||||||||
| Moon Dust#F2F0F7 | |||||||||
| Nebula Mist#CAC4D8 | |||||||||
| Meteor Gray#817A91 | |||||||||
| Deep Space#211A32 | |||||||||
| Cosmic Black#0C0814 | |||||||||
| Cosmic Purple#6C4DFF | |||||||||
| Starlight Blue#3478F6 | |||||||||
| Solar Pink#D93F8C |
The contrast ratio measures the difference in relative luminance between two colors, ranging from 1:1 to 21:1.
Text is considered large when it is at least 24px (18pt), or at least 18.5px (14pt) when bold.
WCAG 2.x contrast requirements are:
This idea of this feature is inspired by the Contrast Grid (nouvelle fenêtre) created by EightShapes, now Directed Edges, and by ContrastGrid.com (nouvelle fenêtre) created by Michael Herchel. The implementation and code were developed independently.