Usando cores contrastantes en primeiro plano e fondo en deseño web

Mellora a lexibilidade do teu sitio web e a experiencia do usuario cun contraste axeitado

O contraste ten un papel importante no éxito do deseño de calquera sitio web. Desde a tipografía do sitio ata as imaxes empregadas en todo o sitio, ata o contraste entre elementos en primeiro plano e cores de fondo, un sitio ben deseñado debe ter un contraste adecuado en todas estas áreas para garantir unha experiencia de usuario de calidade e un éxito no sitio web a longo prazo.

O baixo contraste equivale a unha experiencia de lectura pobre

Sitios que son moi baixos en contraste poden ser difíciles de ler e usar, o que terá un impacto negativo no éxito de calquera sitio. Os problemas de contraste da cor son moi fáciles de identificar. Normalmente pode facelo só mirando unha páxina que se fai nun navegador web e podes ver se o texto é moi difícil de ler debido a opcións de cores pobres. Aínda así, aínda que poida ser fácil determinar que cores non funcionan ben xuntos, realmente pode ser moi difícil decidir que cores funcionan ben en contraste cos demais. Non pode que non funcione, pero como vai determinar o que funciona? A imaxe deste artigo debería axudar a mostrarche unha variedade de cores diferentes e como contrastan como cores de fondo e de fondo. Podes ver algunhas combinacións "boas" e algúns "paquetes" pobres, que che axudarán a facer as opcións de cores correctas nos teus proxectos.

Respecto ao contraste

Unha cousa que debes ter en conta é que o contraste é máis que o brillante que se compara coa cor de fondo. Como se debería ver nesa imaxe anteriormente mencionada, algunhas destas cores son moi brillantes e móstranse vibrantes na cor de fondo, como o azul en negro, pero aínda o etiquetou como un contraste pobre. Eu fixen isto porque, aínda que poida ser brillante, a combinación de cores aínda deixa o texto difícil de ler. Se fose crear unha páxina en todo o texto azul nun fondo negro, os seus lectores terían unha gran cantidade de esforzo visual. É por iso que o contraste non é só en branco e negro (si, ese pun estaba destinado). Hai regras e mellores prácticas para o contraste, pero como debuxante debes sempre evaluar esas regras para asegurarte de que funcionen na túa instancia particular.

Elixindo cores

O contraste é só un dos factores a considerar ao elixir cores para o deseño do seu sitio web, pero é importante. Ao elixir cores, teña en conta os estándares da marca da empresa, pero tamén estea disposto a abordar paleta de cores que, aínda que sexan consistentes coas directrices da marca dunha organización, non funcionen ben en liña. Por exemplo, sempre atopei que os greens amarelos e brillantes son moi difíciles de usar efectivamente nos sitios web. Se estas cores están nas pautas da marca dunha empresa, é probable que teñan que utilizarse só como cores de acento, xa que é difícil atopar cores que contrasta ben con calquera.

Do mesmo xeito, se as cores da túa marca son branco e negro, isto significa un gran contraste, pero se ten un sitio con longas cantidades de texto, ter un fondo negro con texto branco vai facer a lectura moi dura. Mesmo o contraste entre branco e negro é grande, o texto branco sobre un fondo negro causa a tensión do ollo por longos pasos. Neste caso, investiría as cores para usar o texto negro nun fondo branco. Isto pode non ser tan interesado visualmente, pero non atoparás un mellor contraste que iso.

Ferramentas en liña

Ademais do seu propio sentido de deseño, hai algunhas ferramentas en liña que pode usar para probar a elección da cor do seu sitio.

CheckMyColors.com probará todas as cores do seu sitio e informará sobre a relación de contraste entre os elementos da páxina.

Ademais, cando se pensa en opcións de cores, tamén debe considerar a accesibilidade do sitio web e as persoas que teñen formas de cegueir a cores. WebAIM.org pode axudar con isto, como pode ContrastChecker.com, que probará as túas opcións contra as pautas de WCAG.