Contrastes e tema escuro
43 pares autorizados: todos os textos em pelo menos 4,5:1; bordas e foco em pelo menos 3:1. No escuro, página Ardósia, superfície Noite #2B3835, tinta Dia #F3F4F1, folha #97B7FF, próxima ação #A4D4EF, erro #FFACA8, prazo #E9CB79, êxito #8FD1A5 e borda #9CAB9F. É uma variante desta proposta, não aprovação de tema escuro para a aplicação.
Arraste para o lado para ver todas as colunas.
| Tema / papel | Frente | Fundo | Razão | Mínimo |
|---|---|---|---|---|
| Claro · Texto e marca | #1C2624 | #F3F4F1 | 14.07:1 | 4.5:1 |
| Claro · Texto secundário | #50605A | #F3F4F1 | 6.02:1 | 4.5:1 |
| Claro · Próxima ação | #235C78 | #F3F4F1 | 6.62:1 | 4.5:1 |
| Claro · Erro | #AA292E | #F3F4F1 | 6.20:1 | 4.5:1 |
| Claro · Prazo | #795600 | #F3F4F1 | 6.05:1 | 4.5:1 |
| Claro · Êxito | #226442 | #F3F4F1 | 6.41:1 | 4.5:1 |
| Claro · Bloqueio | #545B66 | #F3F4F1 | 6.21:1 | 4.5:1 |
| Claro · Borda do campo | #6B7971 | #F3F4F1 | 4.14:1 | 3:1 |
| Claro · Foco | #1C2624 | #F3F4F1 | 14.07:1 | 3:1 |
| Claro · Folha da marca (não usar como texto) | #245CC6 | #F3F4F1 | 5.56:1 | 3:1 |
| Claro · Texto e marca | #1C2624 | #E6E9E3 | 12.67:1 | 4.5:1 |
| Claro · Texto secundário | #50605A | #E6E9E3 | 5.42:1 | 4.5:1 |
| Claro · Próxima ação | #235C78 | #E6E9E3 | 5.96:1 | 4.5:1 |
| Claro · Erro | #AA292E | #E6E9E3 | 5.59:1 | 4.5:1 |
| Claro · Prazo | #795600 | #E6E9E3 | 5.45:1 | 4.5:1 |
| Claro · Êxito | #226442 | #E6E9E3 | 5.77:1 | 4.5:1 |
| Claro · Bloqueio | #545B66 | #E6E9E3 | 5.59:1 | 4.5:1 |
| Claro · Borda do campo | #6B7971 | #E6E9E3 | 3.72:1 | 3:1 |
| Claro · Foco | #1C2624 | #E6E9E3 | 12.67:1 | 3:1 |
| Claro · Folha da marca (não usar como texto) | #245CC6 | #E6E9E3 | 5.01:1 | 3:1 |
| Escuro · Texto e marca | #F3F4F1 | #1C2624 | 14.07:1 | 4.5:1 |
| Escuro · Texto secundário | #BBC9C0 | #1C2624 | 9.04:1 | 4.5:1 |
| Escuro · Próxima ação | #A4D4EF | #1C2624 | 9.79:1 | 4.5:1 |
| Escuro · Erro | #FFACA8 | #1C2624 | 8.67:1 | 4.5:1 |
| Escuro · Prazo | #E9CB79 | #1C2624 | 9.82:1 | 4.5:1 |
| Escuro · Êxito | #8FD1A5 | #1C2624 | 8.75:1 | 4.5:1 |
| Escuro · Bloqueio | #CCD1DC | #1C2624 | 10.15:1 | 4.5:1 |
| Escuro · Borda do campo | #9CAB9F | #1C2624 | 6.46:1 | 3:1 |
| Escuro · Foco | #F3F4F1 | #1C2624 | 14.07:1 | 3:1 |
| Escuro · Folha da marca (não usar como texto) | #97B7FF | #1C2624 | 7.79:1 | 3:1 |
| Escuro · Texto e marca | #F3F4F1 | #2B3835 | 11.06:1 | 4.5:1 |
| Escuro · Texto secundário | #BBC9C0 | #2B3835 | 7.11:1 | 4.5:1 |
| Escuro · Próxima ação | #A4D4EF | #2B3835 | 7.70:1 | 4.5:1 |
| Escuro · Erro | #FFACA8 | #2B3835 | 6.81:1 | 4.5:1 |
| Escuro · Prazo | #E9CB79 | #2B3835 | 7.72:1 | 4.5:1 |
| Escuro · Êxito | #8FD1A5 | #2B3835 | 6.88:1 | 4.5:1 |
| Escuro · Bloqueio | #CCD1DC | #2B3835 | 7.98:1 | 4.5:1 |
| Escuro · Borda do campo | #9CAB9F | #2B3835 | 5.08:1 | 3:1 |
| Escuro · Foco | #F3F4F1 | #2B3835 | 11.06:1 | 3:1 |
| Escuro · Folha da marca (não usar como texto) | #97B7FF | #2B3835 | 6.12:1 | 3:1 |
| Claro · Texto do botão | #F3F4F1 | #1C2624 | 14.07:1 | 4.5:1 |
| Escuro · Texto do botão | #1C2624 | #F3F4F1 | 14.07:1 | 4.5:1 |
| Claro · Texto da amostra de cor Folha | #F3F4F1 | #245CC6 | 5.56:1 | 4.5:1 |
As razões seguem a fórmula WCAG sobre os tokens de frente e fundo. Os pares de texto usam mínimo de 4,5:1; bordas, foco e elementos não textuais usam 3:1.
Baixar a tabela calculada. Não presumir autorização para pares fora da tabela.