Cada linha é a cor de fundo e cada coluna é a cor do texto. O número é a razão de contraste medida pela fórmula da WCAG. Texto normal precisa de 4,5:1. Texto grande (24px ou mais, ou 18,66px em peso 700) precisa de 3:1. Em peça de 1080px, que aparece reduzida no celular, texto grande começa em 66px.
| Forest | Sage | Sienna | Tijolo | Clay | Mahogany | Caramel | Terracotta | Sage-mist | Sand | Peach Mist | Cream | Branco | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Cream#F9F6EE | Aa 15,23tudo | Aa 6,29tudo | Aa 4,76tudo | Aa 5,95tudo | Aa 7,31tudo | Aa 9,43tudo | Aa 2,72tom | Aa 2,98não | Aa 2,08não | Aa 1,46não | Aa 1,67não | · | Aa 1,08não |
| Surface-1#F2EDE3 | Aa 14,10tudo | Aa 5,82tudo | Aa 4,41grande | Aa 5,51tudo | Aa 6,77tudo | Aa 8,73tudo | Aa 2,52tom | Aa 2,76não | Aa 1,92não | Aa 1,35não | Aa 1,55não | Aa 1,08não | Aa 1,17não |
| Surface-4#E8DFD0 | Aa 12,45tudo | Aa 5,14tudo | Aa 3,89grande | Aa 4,86tudo | Aa 5,98tudo | Aa 7,71tudo | Aa 2,22tom | Aa 2,44não | Aa 1,70não | Aa 1,19não | Aa 1,37não | Aa 1,22não | Aa 1,32não |
| Sand#D1D0A9 | Aa 10,42tudo | Aa 4,31grande | Aa 3,26grande | Aa 4,07grande | Aa 5,00tudo | Aa 6,46tudo | Aa 1,86não | Aa 2,04não | Aa 1,42não | · | Aa 1,14não | Aa 1,46não | Aa 1,58não |
| Sage-pale#DFE3D2 | Aa 12,58tudo | Aa 5,20tudo | Aa 3,93grande | Aa 4,91tudo | Aa 6,04tudo | Aa 7,79tudo | Aa 2,25não | Aa 2,46não | Aa 1,72tom | Aa 1,21não | Aa 1,38não | Aa 1,21não | Aa 1,31não |
| Sage-mist#A8B190 | Aa 7,33tudo | Aa 3,03grande | Aa 2,29não | Aa 2,86não | Aa 3,52grande | Aa 4,54tudo | Aa 1,31não | Aa 1,44não | · | Aa 1,42não | Aa 1,24não | Aa 2,08não | Aa 2,24não |
| Sage-light#7A8268 | Aa 4,09grande | Aa 1,69tom | Aa 1,28não | Aa 1,60não | Aa 1,96não | Aa 2,53não | Aa 1,37não | Aa 1,25não | Aa 1,79tom | Aa 2,55tom | Aa 2,23não | Aa 3,72grande | Aa 4,02grande |
| Sage#565E48 | Aa 2,42não | · | Aa 1,32não | Aa 1,06não | Aa 1,16não | Aa 1,50não | Aa 2,31não | Aa 2,11não | Aa 3,03grande | Aa 4,31grande | Aa 3,77grande | Aa 6,29tudo | Aa 6,80tudo |
| Forest-tint-2#3A4A3D | Aa 1,74tom | Aa 1,39não | Aa 1,83vetado | Aa 1,47não | Aa 1,19vetado | Aa 1,08vetado | Aa 3,21vetado | Aa 2,93vetado | Aa 4,20grande | Aa 5,98tudo | Aa 5,23vetado | Aa 8,73tudo | Aa 9,43tudo |
| Forest#15221B | · | Aa 2,42não | Aa 3,20grande | Aa 2,56não | Aa 2,08não | Aa 1,61não | Aa 5,60tudo | Aa 5,11tudo | Aa 7,33tudo | Aa 10,42tudo | Aa 9,12tudo | Aa 15,23tudo | Aa 16,45tudo |
| Peach Mist#E5B98A | Aa 9,12vetado | Aa 3,77vetado | Aa 2,85tom | Aa 3,56grande | Aa 4,37grande | Aa 5,65tudo | Aa 1,63não | Aa 1,79não | Aa 1,24vetado | Aa 1,14não | · | Aa 1,67não | Aa 1,80não |
| Caramel#C68A4F | Aa 5,60vetado | Aa 2,31não | Aa 1,75tom | Aa 2,19não | Aa 2,69tom | Aa 3,47grande | · | Aa 1,10não | Aa 1,31não | Aa 1,86não | Aa 1,63não | Aa 2,72não | Aa 2,94não |
| Terracotta#CD7C2D | Aa 5,11vetado | Aa 2,11não | Aa 1,60não | Aa 1,99não | Aa 2,45não | Aa 3,16grande | Aa 1,10não | · | Aa 1,44não | Aa 2,04não | Aa 1,79não | Aa 2,98não | Aa 3,22grande |
| Sienna#A85820 | Aa 3,20vetado | Aa 1,32não | · | Aa 1,25não | Aa 1,53não | Aa 1,98tom | Aa 1,75não | Aa 1,60não | Aa 2,29vetado | Aa 3,26grande | Aa 2,85tom | Aa 4,76tudo | Aa 5,14tudo |
| Tijolo#A8391E | Aa 2,56não | Aa 1,06não | Aa 1,25não | · | Aa 1,23não | Aa 1,59não | Aa 2,19não | Aa 1,99não | Aa 2,86não | Aa 4,07grande | Aa 3,56grande | Aa 5,95tudo | Aa 6,42tudo |
| Clay#823E21 | Aa 2,08não | Aa 1,16não | Aa 1,53não | Aa 1,23não | · | Aa 1,29não | Aa 2,69tom | Aa 2,45não | Aa 3,52vetado | Aa 5,00tudo | Aa 4,37grande | Aa 7,31tudo | Aa 7,89tudo |
| Mahogany#6B3018 | Aa 1,61não | Aa 1,50não | Aa 1,98tom | Aa 1,59não | Aa 1,29não | · | Aa 3,47grande | Aa 3,16grande | Aa 4,54vetado | Aa 6,46vetado | Aa 5,65tudo | Aa 9,43tudo | Aa 10,19tudo |
Os vetos valem para aquele fundo com aquele texto. O inverso continua liberado quando passa na medida: terracotta e peach mist como texto sobre forest seguem valendo.
Par da mesma família de cor com contraste baixo de propósito. Serve para número ou palavra decorativa, marca d'água, grafismo e título display muito grande. Nunca para texto que precisa ser lido para entender a peça: preço, data, instrução, botão, legenda. Terracotta e tijolo ficam fora: uma é chamada para ação, o outro existe para chamar atenção, e o tom sobre tom apaga as duas funções.
Em cada card, a palavra grande está no tom. A frase pequena mostra o texto legível ao lado, sempre numa cor que passa na tabela.
Texto que precisa ser lido fica numa cor que passa.
Só texto grande.
Só texto grande.
Só texto grande.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.
Texto que precisa ser lido fica numa cor que passa.