Contraste WCAG 2.1
Cores semânticas
Pares de cor validados por contraste. AA = 4.5:1 para texto normal. AAA = 7:1. O modo ativo é mostrado primeiro.
Institucional claro
| Contexto | Hex | Preview |
|---|---|---|
| Headings | #313642 | Aa |
| Corpo de texto | #5C6167 | Aa |
| Textos secundários | #5C6167 | Aa |
| Legendas e metadados | #979BA1 | Aa |
| Links | #1076DD | Aa |
| Links hover | #313642 | Aa |
| Nav links | #313642 | Aa |
| Nav link hover | #1076DD | Aa |
| Fundo de página | #F4F7FB | Aa |
| Fundo de card | #FFFFFF | Aa |
| Borda de input | #BDC0C6 | Aa |
| Foco de input | #1076DD | Aa |
Escuro institucional
| Contexto | Hex | Preview | WCAG |
|---|---|---|---|
| Headings | #FFFFFF | Aa | AAA15.72:1 |
| Corpo de texto | #BDC0C6 | Aa | AAA8.62:1 |
| Textos secundários | #979BA1 | Aa | AA5.63:1 |
| Legendas e metadados | #979BA1 | Aa | AA5.63:1 |
| CTA principal fundo | #31B3F9 | Aa | AA5.40:1 |
| CTA principal texto | #0D1B2E | Aa | AAA7.37:1 |
| Links | #31B3F9 | Aa | AA6.70:1 |
| Links hover | #FFFFFF | Aa | AAA15.72:1 |
| Nav links | #BDC0C6 | Aa | AAA8.62:1 |
| Nav link ativo | #CDFF07 | Aa | AAA13.40:1 |
| Fundo de página | #212328 | Aa | |
| Fundo de card | #2A2D33 | Aa | |
| Borda de input | #979BA1 | Aa | AA6.05:1 |
| Foco de input | #31B3F9 | Aa | AAA7.20:1 |
Modo serviços
| Contexto | Hex | Preview | WCAG |
|---|---|---|---|
| Headings | #FFFFFF | Aa | AAA17.31:1 |
| Corpo de texto | #BDC0C6 | Aa | AAA9.49:1 |
| Textos secundários | #BDC0C6 | Aa | AA6.63:1 |
| Legendas e metadados | #979BA1 | Aa | AA6.20:1 |
| CTA principal | #CDFF07 | Aa | AAA14.76:1 |
| Texto no CTA | #0D1B2E | Aa | AAA14.76:1 |
| Links | #31B3F9 | Aa | AAA7.37:1 |
| Links hover | #FFFFFF | Aa | AAA17.31:1 |
| Nav links | #BDC0C6 | Aa | AAA9.49:1 |
| Nav link ativo | #CDFF07 | Aa | AAA14.76:1 |
| Fundo de página | #0D1B2E | Aa | |
| Fundo de card | #313642 | Aa | |
| Borda de input | #979BA1 | Aa | AA5.39:1 |
| Foco de input | #31B3F9 | Aa | AA6.41:1 |