Criado em 06/24/2025 17:32
Web Components Accessibility Set
- Contrast Indigo#4b4fe2
- Keyboard Lemon#fffb91
- Focus Border Cyan#a0f6ff
- Tab Order Gray#d8dadf
- Skip Link Rose#ff9aaf
- Label Black#1a1a1a
A paleta consiste em cores Semi escuro, Luz, Escuro. Cores de destaque Keyboard Lemon #fffb91 e Focus Border Cyan #a0f6ff. A paleta tem Legal, Esquentar, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #1A1A1A (mais escuro) a #D8DADF (mais claro). A faixa de luminosidade é ampla.
A saturação global parece vívida (croma alto) — 67% das cores são vívidas.
Alguns pares de matizes estão perto de posições complementares — pode ler-se como contraste complementar (heurística).
Notas quentes e frias estão bastante equilibradas (2 quentes, 2 frias).
Códigos HEX (ordenados): #1A1A1A, #4B4FE2, #A0F6FF, #D8DADF, #FF9AAF, #FFFB91
A paleta Web Components Accessibility Set tem uma combinação de cores de códigos de 6:
HEX: #4b4fe2, RGB: (75, 79, 226); HEX: #fffb91, RGB: (255, 251, 145); HEX: #a0f6ff, RGB: (160, 246, 255)
HEX: #d8dadf, RGB: (216, 218, 223); HEX: #ff9aaf, RGB: (255, 154, 175); HEX: #1a1a1a, RGB: (26, 26, 26)
Versão simplificada das cores da paleta
Matiz de slateblue, Sombra de Cáqui, Sombra de paleturquoise, Matiz de gainsboro, Matiz de lightpink, Sombra de Preto
O esquema de cores foi criado por hex
Códigos de cores na paleta
Web Components Accessibility Set códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #4b4fe2 | #4b4fe2 | RGB(75, 79, 226) | Contrast Indigo | — |
| #fffb91 | #fffb91 | RGB(255, 251, 145) | Keyboard Lemon | — |
| #a0f6ff | #a0f6ff | RGB(160, 246, 255) | Focus Border Cyan | — |
| #d8dadf | #d8dadf | RGB(216, 218, 223) | Tab Order Gray | — |
| #ff9aaf | #ff9aaf | RGB(255, 154, 175) | Skip Link Rose | — |
| #1a1a1a | #1a1a1a | RGB(26, 26, 26) | Label Black | Gray10 |
Contraste da Paleta de Cores
6 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
| Cor do texto | Cor de fundo | Taxa de contraste |
|---|---|---|
#fffb91 | #a0f6ff | 1.13 |
#fffb91 | #d8dadf | 1.29 |
#fffb91 | #ff9aaf | 1.85 |
#a0f6ff | #d8dadf | 1.14 |
#a0f6ff | #ff9aaf | 1.63 |
#d8dadf | #ff9aaf | 1.43 |
Paleta de imagens Web Components Accessibility Set png
Exportar paleta
Baixe a "Web Components Accessibility Set" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: