Created at 06/09/2025 09:53
Accessibility-First Design System
Vision Blue
#0077cc
Contrast Yellow
#ffdd57
Focus Border
#000000
Text Pure White
#ffffff
Surface Stone
#eaeaea
Hint Lilac
#e4d7f5
The palette consists of Semi dark, Light, Dark colors. Accent colors Vision Blue #0077cc and Contrast Yellow #ffdd57. Palette has Cool, Warm, Neutral colors temperature.
By lightness, this palette runs from #000000 (darkest) to #FFFFFF (lightest). The lightness range is wide.
Saturation is mixed — some muted swatches and some vivid accents.
Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).
Overall temperature among swatches leans cool.
HEX codes (sorted): #000000, #0077CC, #E4D7F5, #EAEAEA, #FFDD57, #FFFFFF
Palette Accessibility-First Design System has combination of 6 codes colors:
HEX: #0077cc, RGB: (0, 119, 204); HEX: #ffdd57, RGB: (255, 221, 87); HEX: #000000, RGB: (0, 0, 0)
HEX: #ffffff, RGB: (255, 255, 255); HEX: #eaeaea, RGB: (234, 234, 234); HEX: #e4d7f5, RGB: (228, 215, 245)
Simplified version of palette colors
Tint of steelblue, Shade of gold, Black, White, Tint of whitesmoke, Tint of lavender
Color scheme was created by colourlock
Colors codes in palette
Accessibility-First Design System color codes HEX, RGB information in table
| Color | HEX | RGB | Name | Alternative name |
| #0077cc | #0077cc | RGB(0, 119, 204) | Vision Blue | — |
| #ffdd57 | #ffdd57 | RGB(255, 221, 87) | Contrast Yellow | — |
| #000000 | #000000 | RGB(0, 0, 0) | Focus Border | Black |
| #ffffff | #ffffff | RGB(255, 255, 255) | Text Pure White | White |
| #eaeaea | #eaeaea | RGB(234, 234, 234) | Surface Stone | Plaster |
| #e4d7f5 | #e4d7f5 | RGB(228, 215, 245) | Hint Lilac | — |
Color Palette Contrast
6 color pairs have low contrast and need improvement which may impact readability.
| Text Color | Background Color | Contrast Ratio |
#ffdd57 | #ffffff | 1.33 |
#ffdd57 | #eaeaea | 1.1 |
#ffdd57 | #e4d7f5 | 1.02 |
#ffffff | #eaeaea | 1.2 |
#ffffff | #e4d7f5 | 1.36 |
#eaeaea | #e4d7f5 | 1.13 |
Image palette Accessibility-First Design System png
Export Palette
Download the "Accessibility-First Design System" in multiple formats for seamless integration into your design projects.
Available formats: