Que legislacao regula o contraste de cores em sites portugueses e brasileiros?
Em Portugal, o Decreto-Lei 83/2018 obriga os organismos publicos a cumprir o nivel AA das WCAG 2.1, seguindo a norma europeia EN 301549. A AMA (Agencia para a Modernizacao Administrativa) publica declaracoes de acessibilidade e auditorias para os portais do Estado.
No Brasil, o e-MAG (Modelo de Acessibilidade em Governo Eletronico) define as diretrizes para os sites .gov.br. O e-MAG 3.1 incorpora os criterios WCAG 2.0 e exige contraste minimo de 4,5:1 para texto normal. O Decreto Federal 5.296/2004 e a Lei Brasileira de Inclusao (Lei 13.146/2015) dao base legal a essas exigencias.
Desde junho de 2025, o European Accessibility Act (EAA) alargou estas obrigacoes a empresas privadas que oferecem produtos e servicos digitais no mercado europeu, o que inclui operadoras PT com presenca digital.
Quais os ratios de contraste exigidos pelo DL 83/2018 e pelo e-MAG?
Os dois referenciais convergem para os mesmos valores WCAG:
- Nivel AA (minimo legal): 4,5:1 para texto normal, 3:1 para texto grande (18pt ou 14pt a negrito) e componentes de interface
- Nivel AAA (objetivo superior): 7:1 para texto normal, 4,5:1 para texto grande
Um cinzento medio #767676 sobre fundo branco fica exatamente em 4,5:1, o minimo admissivel. Um tom mais claro e o criterio falha. Em sites .gov.br que servem populacoes com menor literacia digital ou acesso mais frequente via dispositivos moveis em condicoes de luminosidade variavel, aplicar margens acima do minimo e uma boa pratica.
Como converter cores entre HEX, RGB, HSL e OKLCH?
Cada formato tem o seu lugar num workflow CSS moderno:
- HEX (
#1d70b8) e o padrao em ficheiros de design e nas devtools do navegador - RGB (
rgb(29, 112, 184)) e mais legivel quando se ajustam canais individuais com JavaScript - HSL (
hsl(210, 73%, 42%)) separa o matiz, a saturacao e a luminosidade, util para gerar escalas de tonos sem desviar o matiz base - OKLCH e o espaco de cor perceptual moderno do CSS Color Level 4; ja suportado nativamente por todos os navegadores atuais
A conversao manual entre estes formatos exige trigonometria. O conversor de cores aceita os quatro formatos e devolve os restantes de forma instantanea.
Como gerir a coordenacao de cores entre equipas PT e BR?
Uma equipa distribuida entre Lisboa e Sao Paulo pode ter referencias de cor inconsistentes se cada membro exportar valores de um software diferente. Um designer no Brasil exporta em RGB, outro em Portugal exporta em HEX, o resultado sao valores que parecem iguais mas divergem por arredondamento.
Solucao pratica: definir o token de cor canonical em HEX e converter para os outros formatos com uma unica ferramenta partilhada. O conversor devolve HEX, RGB, HSL e OKLCH em simultaneo, o que elimina divergencias de arredondamento entre exportacoes de ferramentas diferentes.
Como criar um gradiente CSS sem tentativa e erro?
Um gradiente linear escreve-se como background: linear-gradient(angulo, paragem1, paragem2, ...). Acertar no angulo e nas posicoes das paragens manualmente implica varios ciclos de edicao e recarga.
O gerador de gradientes CSS permite escolher cores, arrastar paragens e ajustar o angulo visualmente. A saida e CSS pronto a colar, valido para gradientes lineares e radiais, com prefixos de navegador onde necessario.
Nota de acessibilidade relevante para o contexto PT/BR: nao usar gradientes como unico meio de transmitir informacao. Utilizadores com daltonismo, cerca de 8% dos homens, podem nao distinguir certas combinacoes de cores em gradientes.
Como gerar uma paleta de cores coerente para um projeto .gov.br?
Os portais de governo brasileiro tendem a usar azul institucional (referencia ao verde-amarelo da bandeira aparece mais em contextos identitarios). A paleta deve ter dez tonos do azul primario, uma escala de cinzentos neutros e cores semanticas (sucesso verde, erro vermelho, aviso amarelo).
O gerador de paletas recebe a cor base e devolve uma escala completa em HEX. Para conformidade com e-MAG, verificar que o texto escuro sobre o tom mais claro supera 4,5:1.
Como extrair cores de uma imagem ou logotipo existente?
Quando o cliente entrega apenas um PNG do logotipo sem ficheiros fonte, a extracao de cor e o primeiro passo. O extrator de paleta carrega a imagem e analisa as cores dominantes com a API Canvas, nada e enviado para um servidor.
A saida inclui HEX, RGB e HSL para cada cor detetada. A partir dai, verificar cada par texto/fundo no verificador de contraste antes de os incorporar nos tokens do projeto.
Como recolher uma cor exata de uma captura de ecra ou maqueta?
Quando so existe uma captura de ecra ou uma maqueta em PNG, o seletor de cor de imagem e a ferramenta adequada. Carrega a imagem e clica em qualquer pixel para obter o valor em HEX, RGB e HSL.
Fluxo recomendado: selecionar cor do texto, selecionar cor do fundo, verificar o par no verificador de contraste. Permite auditar implementacoes existentes sem acesso ao ficheiro de design original, util em auditorias de conformidade com o DL 83/2018 ou o e-MAG.