Created at 07/20/2025 20:08
Accessibility-First Web Component Kit
- Readable White#ffffff
- Compliant Blue#3f88c5
- TouchSafe Yellow#ffd447
- Focus Indigo#5e60ce
- NoContrast Red#da1e37
The palette consists of Light colors. Accent colors Compliant Blue #3f88c5 and TouchSafe Yellow #ffd447. Palette has Neutral, Cool, Warm colors temperature.
By lightness, this palette runs from #DA1E37 (darkest) to #FFFFFF (lightest). The lightness range is moderate.
Overall saturation feels vivid (higher chroma).
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Warm and cool swatches are fairly balanced.
HEX codes (sorted): #3F88C5, #5E60CE, #DA1E37, #FFD447, #FFFFFF
Palette Accessibility-First Web Component Kit has combination of 5 codes colors:
HEX: #ffffff, RGB: (255, 255, 255); HEX: #3f88c5, RGB: (63, 136, 197); HEX: #ffd447, RGB: (255, 212, 71)
HEX: #5e60ce, RGB: (94, 96, 206); HEX: #da1e37, RGB: (218, 30, 55)
Simplified version of palette colors
White, Shade of steelblue, Shade of gold, Shade of slateblue, Shade of crimson
Color scheme was created by colourlock
Colors codes in palette
Accessibility-First Web Component Kit color codes HEX, RGB information in table
Color Palette Contrast
4 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#ffffff | #ffd447 | 1.42 |
#3f88c5 | #5e60ce | 1.37 |
#3f88c5 | #da1e37 | 1.31 |
#5e60ce | #da1e37 | 1.04 |
Image palette Accessibility-First Web Component Kit png
Export Palette
Download the "Accessibility-First Web Component Kit" in multiple formats for seamless integration into your design projects.
Available formats: