<aside> ✅ Do

</aside>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e81f98b-5da4-4ffe-9716-5b7367fd490b/EX2_3.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/47dc4f32-0407-4983-a4dd-66d6103253a3/EX2_4.png

<aside> ⚠️ Don't

</aside>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/91811607-1d78-4f3c-8506-c7a7611e6046/EX2_1.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/68e05653-d34f-4d23-9cf7-21de541b03ac/EX2_2.png

Contraste

Ele é fundamental quando falamos de acessibilidade e composição, sendo em textos, tamanhos dos elementos ou cores na interface. Falando de cores, garanta um contraste adequado para oferecer acessibilidade e, além disso, ofereça ao usuário uma interface que não irá causar fadiga visual.

<aside> 💡 Cores opostas como primeira e segundo plano (figura e fundo) podem incomodar a visão e deixá-la cansada. Por exemplo, o botão "Entrar" da segunda e quarta image.

</aside>

Consultando a diretriz da WCAG 2.0 (Diretrizes de Acessibilidade para Conteúdo Web) existem três níveis de acessibilidade: A (mínimo), AA (faixa média) e AAA (mais alto). AA é amplamente utilizado. O padrão AA para contraste de cor é uma proporção de 4.5: 1 entre o primeiro plano/figura (ou seja, texto e imagens) e o fundo. Exemplo:

Ferramenta Colarable por Brent Jackson

Ferramenta Colarable por Brent Jackson

Você também pode utilizar plugins direto no Figma para testar sem sair da ferramenta, como: A11y, Able, Color blind e Zebra. Assim pode fazer testes com sua paleta e garantir que ela se é eficiente e acessível.

Figma - A11y - Color Contrast Checker | Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines)...

Figma - Able - Friction free accessibility | Able makes accessibility easy, while looking and feeling like Figma! Add color contrast and colo...

Figma - Color Blind | Color Blind allows you to view your designs in the 8 different types of color vision deficiencies...

Figma - zebra | Zebra is a fast, lightweight colour contrast checker. How to use: 1. Run zebra from the plugin m...

Daltonismo

Sabemos que nem todos enxergam as cores da mesma forma. Por isso, na hora de construir um produto, temos que conferir se todas as pessoas terão uma boa experiência. Uma ferramenta muito legal para quem usa o Sketch App é o plugin Stark, que confere as cores e também o contraste. Essa ferramenta da Toptal transforma qualquer link em um simulador de daltonismo, e possibilita usar qualquer site da web!