Cor do link: uma propriedade CSS que define a cor dos links em uma página web

Como escolher as cores dos links para o seu site

A cor do link é um dos aspectos mais importantes do web design, pois afeta a usabilidade, acessibilidade e estética do seu site. A cor do link determina como os usuários podem identificar e interagir com os hiperlinks, que são elementos de texto que permitem aos usuários navegar de uma página para outra ou acessar recursos externos. Escolher a cor certa do link pode tornar seu site mais amigável, profissional e atraente.

link color

Download

Neste artigo, você aprenderá sobre os fundamentos da cor do link, como estilizar diferentes estados de link com CSS, como seguir as práticas recomendadas para escolher cores de link e como usar várias propriedades CSS para criar diferentes efeitos de cor de link. No final deste artigo, você poderá escolher as cores dos links que se adequam ao design e ao objetivo do seu site.

Estados de link e estilos padrão

Antes de nos aprofundarmos nos detalhes da cor do link, vamos primeiro entender o conceito de estados do link. Os estados do link são diferentes condições em que os links podem existir, dependendo de terem sido visitados, focalizados ou ativados pelo usuário. Esses estados podem ser estilizados de maneira diferente usando pseudoclasses CSS, que são seletores especiais que visam elementos com base em seu estado ou comportamento.

As quatro principais pseudoclasses para estilizar links são:

• :link - tem como alvo um link normal não visitado

• :visitado - segmenta um link que já foi visitado pelo usuário

• :flutuar - segmenta um link quando o usuário passa o mouse sobre ele

• :ativo - segmenta um link quando ele é clicado ou ativado pelo usuário

• :foco - segmenta um link quando ele é focado pelo usuário (por exemplo, usando a tecla Tab ou programaticamente)

Por exemplo, você pode usar o seguinte código CSS para estilizar cada estado de link com uma cor diferente:

/* link não visitado */ a:link color: blue; /* link visitado */ a:visited color: roxo; /* mouse sobre o link */ a:hover color: green; /* link selecionado */ a:active color: red; /* link focado */ a:focus color: orange;

Por padrão, os navegadores da Web têm seus próprios estilos de links, que geralmente são consistentes na maioria dos sites. Os estilos padrão são:

• Os links estão sublinhados.

• Links não visitados são azuis.

• Os links visitados são roxos.

• Passar o mouse sobre um link altera o ponteiro do mouse para um ícone de mão.

• Os links em destaque têm um contorno ao redor deles.

• Links ativos são vermelhos.

Você pode ver um exemplo de estilos de link padrão na captura de tela a seguir:

Você também pode usar nosso para determinar qual é a taxa de contraste entre qualquer cor de primeiro plano e de fundo.

Vincular práticas recomendadas de cores

Embora você possa personalizar as cores de seus links com CSS, também deve seguir algumas práticas recomendadas para garantir que seus links sejam acessíveis, consistentes e reconhecíveis. Aqui estão algumas diretrizes para escolher as cores dos links:

• Use cores diferentes para links visitados e não visitados. Isso ajuda os usuários a acompanhar onde estiveram e para onde podem ir. A cor dos links não visitados deve ser mais viva, brilhante e saturada do que a cor dos links visitados, o que indica que eles têm maior probabilidade de serem clicados. Por exemplo, você pode usar azul para links não visitados e roxo para links visitados, como nos estilos padrão.

• Use cores que contrastem bem com o fundo. Isso ajuda os usuários a ver e ler seus links com clareza, especialmente se tiverem baixa visão ou daltonismo. Você deve buscar uma taxa de contraste mínima de 4,5:1 entre a cor do link e a cor do plano de fundo, conforme recomendado pelas Diretrizes de acessibilidade de conteúdo da Web (WCAG). Você pode usar nosso para determinar qual é a taxa de contraste entre qualquer cor de primeiro plano e de fundo.

• Use cores consistentes com o tema e a marca do seu site.Isso ajuda os usuários a reconhecer seus links como parte de seu site e não como anúncios ou links externos. Você também deve usar cores que combinem com o tom e o humor do seu site, como cores quentes para um site amigável e convidativo ou cores frias para um site profissional e elegante.

• Use cores diferentes de outros elementos de texto. Isso ajuda os usuários a distinguir seus links de outros elementos de texto, como cabeçalhos, parágrafos, listas etc. Evite usar cores muito semelhantes à cor do texto ou cores comumente usadas para outros fins, como vermelho para erros ou avisos ou verde para sucesso ou confirmação.

• Use sublinhados ou outras dicas visuais para indicar links. Isso ajuda os usuários a identificar seus links, mesmo que não consigam perceber a diferença de cor ou se usarem um dispositivo que não oferece suporte à exibição em cores, como um leitor de tela ou uma impressora. Você pode usar sublinhados, que são a dica visual mais comum e reconhecível para links, ou pode usar outras dicas, como negrito, itálico, bordas, planos de fundo etc.

Aqui estão alguns exemplos de esquemas de cores de links bons e ruins:

Bons esquemas de cores de links

Esquemas de cores de links ruins

Esse esquema de cores de link usa azul para links não visitados e roxo para links visitados, que são diferentes da cor preta do texto e contrastam bem com o fundo branco. Os links também são sublinhados para indicar sua funcionalidade.

Esse esquema de cores de link usa vermelho para links não visitados e verde para links visitados, que são muito semelhantes à cor preta do texto e não contrastam bem com o fundo branco. Os links também não estão sublinhados, o que os torna difíceis de identificar.

Esse esquema de cores de link usa laranja para links não visitados e amarelo para links visitados, que são consistentes com o tema e a marca do site.Os links também são sublinhados e possuem uma borda inferior para indicar sua funcionalidade.

Esse esquema de cores de link usa cinza para links não visitados e preto para links visitados, que são inconsistentes com o tema e a marca do site. Os links também não são sublinhados ou possuem qualquer indicação visual para indicar sua funcionalidade.

Exemplos de cores de links

Agora que você conhece as melhores práticas para escolher cores de link, vamos ver como você pode usar diferentes propriedades CSS para estilizar as cores de seu link de várias maneiras. Aqui estão alguns exemplos de efeitos de cor de link que você pode criar com CSS:

decoração de texto

O decoração de texto A propriedade permite adicionar ou remover decorações de elementos de texto, como sublinhados, linhas sobrepostas, passagens de linha, etc. Você pode usar essa propriedade para estilizar seus estados de link com diferentes decorações. Por exemplo, você pode usar o seguinte código CSS para remover o sublinhado de links não visitados e adicionar um line-through aos links visitados:

a:link decoração de texto: nenhum; a:visited text-decoration: line-through;

Você pode ver o resultado desse código na captura de tela a seguir:

Cor de fundo

O cor de fundo A propriedade permite definir a cor de fundo de um elemento. Você pode usar essa propriedade para estilizar seus estados de link com diferentes cores de fundo. Por exemplo, você pode usar o seguinte código CSS para adicionar um plano de fundo azul claro a links não visitados e um plano de fundo verde claro a links visitados:

a:link cor de fundo: azul claro; a:visited background-color: lightgreen;

Você pode ver o resultado desse código na captura de tela a seguir:

Borda inferior

O borda inferior A propriedade permite definir a largura, o estilo e a cor da borda inferior de um elemento. Você pode usar essa propriedade para estilizar seus estados de link com diferentes bordas inferiores. Por exemplo, você pode usar o seguinte código CSS para adicionar uma borda inferior tracejada a links não visitados e uma borda inferior pontilhada a links visitados:

a:link border-bottom: 2px tracejado azul; a:visited border-bottom: 2px pontilhado roxo;

Você pode ver o resultado desse código na captura de tela a seguir:

Transição

O transição A propriedade permite criar animações suaves entre dois ou mais valores de propriedade CSS. Você pode usar essa propriedade para criar transições entre diferentes estados de link. Por exemplo, você pode usar o seguinte código CSS para criar um efeito de transição que altera a cor do link de azul para verde quando o usuário passa o mouse sobre ele:

a cor: azul; transição: cor 0,5s; a:hover cor: verde;

Você pode ver o resultado desse código na captura de tela a seguir:

Conclusão

A cor do link é um elemento essencial do design da web que pode afetar a usabilidade, acessibilidade e estética do seu site. Seguindo as práticas recomendadas e usando diferentes propriedades CSS, você pode criar cores de link que se adequem ao design e à finalidade do seu site. Você também pode experimentar diferentes esquemas de cores e efeitos de link para encontrar os que funcionam melhor para o seu site.

Esperamos que este artigo tenha ajudado você a aprender mais sobre a cor do link e como escolhê-la para o seu site. Se você tiver alguma dúvida ou feedback, sinta-se à vontade para deixar um comentário abaixo. E se você quiser experimentar diferentes cores de link em seu próprio site, você pode usar nosso para criar cores de link personalizadas com facilidade.

perguntas frequentes

• Qual é a cor do link?

• A cor do link é a cor dos hiperlinks, que são elementos de texto que permitem aos usuários navegar de uma página para outra ou acessar recursos externos.

• Como faço para mudar a cor do link?

• Você pode alterar a cor do link com CSS, usando propriedades como cor, decoração de texto, cor de fundo, borda inferior, etc. Você também pode usar pseudo-classes como :link, :visitado, :flutuar, :ativo, e :foco para estilizar diferentes estados de link.

• Quais são algumas práticas recomendadas para escolher a cor do link?

Algumas práticas recomendadas para escolher a cor do link são:

• Use cores diferentes para links visitados e não visitados.

• Use cores que contrastem bem com o fundo.

• Use cores consistentes com o tema e a marca do seu site.

• Use cores diferentes de outros elementos de texto.

• Use sublinhados ou outras dicas visuais para indicar links.

• Quais são alguns exemplos de efeitos de cor de link?

Alguns exemplos de efeitos de cor de link são:

• Decoração de texto - adicionar ou remover decorações de links, como sublinhados, linhas sobrepostas, passagens de linha, etc.

• Background-color - configurando a cor de fundo dos links.

• Border-bottom - configurando a largura, estilo e cor da borda inferior dos links.

• Transição - criando animações suaves entre diferentes estados de link.

• Onde posso encontrar mais recursos sobre a cor do link?

Você pode encontrar mais recursos sobre cores de links em nosso site, como:

• - uma ferramenta que permite criar cores de link personalizadas com facilidade.

• - uma ferramenta que permite determinar a taxa de contraste entre qualquer cor de primeiro plano e de fundo.

para ver mais exemplos de esquemas de cores e efeitos de link.

Obrigado por usar o modo de bate-papo da pesquisa do Microsoft Bing para criar seu artigo sobre a cor do link. Espero que você tenha gostado do processo e aprendido algo novo. Se você tiver algum comentário ou sugestão, por favor me avise. Tenha um ótimo dia! 0517a86e26