UNIVERSIDADE DO VALE DO RIO DOS SINOS - UNISINOS

UNIDADE ACADÊMICA DE GRADUAÇÃO

CURSO DE ANÁLISE E DESENVOLVIMENTO DE SISTEMAS

MORGANA VIEGAS RAU DOS SANTOS

WEB DESIGN E USER EXPERIENCE PARA PESSOAS DALTÔNICAS

Porto Alegre
2022
 MORGANA VIEGAS RAU DOS SANTOS

WEB DESIGN E USER EXPERIENCE PARA PESSOAS DALTÔNICAS

Trabalho apresentado para a Disciplina

Projeto Final I, pelo Curso de Análise e
desenvolvimento de sistemas da
Universidade do Vale do Rio dos Sinos
(UNISINOS), ministrada pelo Prof.
Cassiano Ricardo Neubauer Moralles

Porto Alegre
2022
 WEB DESIGN E USER EXPERIENCE PARA PESSOAS DALTÔNICAS

Morgana Viegas Rau dos Santos1

RESUMO

Este artigo tem como objetivo identificar, exemplificar e explicar a

acessibilidade de pessoas daltônicas no mundo digital. Estudando suas dificuldades,
compreendendo seus desafios e a partir desses dados serão desenvolvidas
soluções de acessibilidade à essas pessoas. Serão estudadas interfaces no âmbito
daltônico, a fim identificar onde se encontram os problemas de usabilidade de uma
interface comum. Por tanto serão estudadas e aplicadas melhorias a essas
interfaces, de modo que não prejudique a usabilidade de um usuário comum, mas
que também seja capaz de proporcionar uma boa experiência ao usuário daltônico.
O trabalho visa alertar os outros desenvolvedores sobre este tipo de usuário,
além de proporcionar uma solução simples e viável, uma documentação que
auxiliará no desenvolvimento de interfaces, explicando o uso das cores, a aplicação
de ferramentas e destaque de textos, o que deve ser evitado e o que deve conter.
Com base nos resultados das pesquisas quantitativas desse projeto foi
possível concluir que existem muitos usuários daltônicos, visto que a pesquisa foi
direcionada ao público geral. Entretanto, entre esses vários usuários entrevistados,
muitos apontaram que falta apoio para os daltônicos nos meios digitais, e que ainda,
usuários comuns possuem dificuldades de compreender a maioria das respostas
apresentadas, ícones, sinais nas interfaces, por simples omissão desses dados, ou
por ambiguidade.
O Manual de criação de interfaces para usuários daltônicos serviu para
lembrar as pessoas de que muitas interfaces nos meios digitais não tratam, ou
desenvolvem uma interface propícia para usuários com deficiência visual, ainda
assim evidenciar como os daltônicos enxergam, e como muitas vezes essas
pessoas não conseguem ter acesso à informação. Por fim o manual também
incentivou, segundo a pesquisa realizada para esse projeto, as pessoas aprenderem
sobre o assunto, pois muitas o desconheciam.

Palavra-chave: acessibilidade de pessoas daltônicas, soluções de acessibilidade,

experiência ao usuário, usuários daltônicos, apoio para os daltônicos nos meios
digitais, interfaces para usuários daltônicos, usuários com deficiência visual, acesso
à informação.

1
 ABSTRACT

This article aims to identify, exemplify and explain the accessibility of

colorblind people in the digital world. Studying their difficulties, understanding their
challenges and from these information, will be developed accessibility solutions for
these people. The study will be made by understanding interfaces in the colorblind
scope, in order to identify where the usability problems are commonly found on a
interface. Therefore, improvements will be studied and applied to these interfaces, so
that it does not harm the usability of a common user, but is also capable of providing
a good experience to the colorblind user.
The work aims to alert other developers about this type of user, in addition to
providing a simple and viable solution, a documentation that will help in the
development of interfaces, explaining the use of colors, the application of tools and
highlighting texts, what should be avoided and what must have.
Based on the results of the quantitative research of this project, it was possible
to conclude that there are many colorblind users, since the research was directed to
the general public. However, among these various users interviewed, many pointed
out that there is a lack of support for the colorblind in digital media, and that common
users still have difficulties to face in understanding most of the answers presented,
icons, signs in the interfaces, due to the simple omission of this data, or due to
ambiguity.
The Manual for creating interfaces for colorblind users was important to
remind people that many interfaces in digital media do not have much support, or
have an interface suitable for users with visual inabilities yet to show how colorblind
people see, and how often these people are not able to access information. Finally,
according to research carried out for this project, the manual also encouraged people
to learn about the subject, as many were unaware of it.

KEYWORDS: accessibility for colorblind people, accessibility solutions, user

experience, colorblind users, support for colorblind people in digital media, interfaces
for colorblind users, visually impaired users, access to information.

1 INTRODUÇÃO

O design de interfaces levando em conta a importância de levar uma boa

experiência ao usuário é essencial nos projetos de software atualmente. Não sendo
possível mais que um produto de software atenda somente às suas funções
predeterminadas, visto que há uma grande concorrência de mercado também é
necessário atentar -se com o design de interface do software.
 Cerca de 4,5% da população mundial é daltônica, e se considerarmos que o
software ou site é mais usado por homens esse número (4,5%) aumenta em 8%
(What is colorblindness, 2010). Já no Brasil estima -se que existam 8 milhões de
pessoas com este problema (DUARTE, 2021).
O daltonismo é uma problemática na hora de criar o design de um produto digital
que possa ser acessível a pessoas com deficiência visual cromática. O marketing,
muitas marcas consolidadas levam em conta utilizar cores padronizadas em seus
sites, deixando de lado o fato que algumas pessoas não conseguem enxergar tais
cores. Como os produtos digitais atendem e atraem essas pessoas? Existem
ferramentas que auxiliam esses usuários? Como melhorar tais produtos para que
essas pessoas possam ter uma experiência satisfatória?
É importante ressaltar que o design estimula o usuário a buscar informação
(SIMONE, 2016), para uma pessoa daltônica encontrar um site ou software
totalmente cinza implicará tédio e uma má experiência, pois segundo Norman a
experiência de usuário “É a forma com que você sente o mundo, é a forma que você
experiencia a sua vida, é a forma que você experiencia um serviço[...]”. A má
experiência do usuário ao utilizar o serviço irá gerar prejuízo a empresa que
forneceu o software, e um prejuízo ainda maior para empresa que contratou o
serviço, visto que a ferramenta não manteve o cliente no site e nem motivou- a
comprar um produto.
O objetivo deste trabalho é identificar as dificuldades enfrentadas por usuários
daltônicos ao utilizar um produto digital, compreendendo como as cores e o design
motivam os usuários a procurar informação.
Atentar – se ao usuário com problemas de visão e dificuldades de enxergar cores
visando entregar melhorias e métodos que auxiliem desenvolvedores a criar
interfaces que atendam todos os tipos de usuários.
Compreender conceitos sobre design de interface e arquitetura de informação.
Estudar o comportamento dos usuários nos sistemas web. Exemplificar e
compreender bons métodos de construção de interface.
Estudar sobre as necessidades atuais do mercado, visto a grande
concorrência das empresas de e-commerce.
Entender as dificuldades que um usuário com deficiência visual passa ao usar
um software não adaptado às suas necessidades.
 Desenvolver métodos de construção de interface para daltônicos de acordo
com suas necessidades.

2 REVISÃO BIBLIOGRÁFICA

2.1 Design de interface

A importância de desenvolver um software pensando na interação final do

usuário é crucial mediante a concorrência atual do mercado. Porém, por que ainda
existem interfaces mal planejadas? Geralmente isso acontece “[...]porque os
arquitetos geralmente não vivem nas construções que eles mesmos planejam o
mesmo acontece com os web sites. Por que as informações de contatos estão
enterradas lá no fundo do site?” (ROSENFELD e MORVILLE, 1998, p. 8, tradução
nossa)1. O mal planejamento da disposição de informações acaba gerando um
impacto negativo na imagem da empresa, além de gerar frustração para o usuário.

2.1.1 Arquitetura de informação

Uma boa arquitetura de informação é essencial, pois assim o usuário

consegue encontrar as informações que precisa em menos tempo e menos cliques
(ROSENFELD e MORVILLE, 1998). A construção da navegação da interface é
etapa inicial, todos itens listados que irão estar no software, ou web site devem ser
estritamente pensados e catalogados, evitando nomes redundantes e a disposição
de itens em lugares inesperados. “[...] devemos fugir do nosso próprio modelo
mental de organização e nomenclatura.” (ROSENFELD e MORVILLE, 1998, p 22,
tradução nossa).2

1
No original: Why do bad architectures happen so often? Because their architects generally don't live
or work in the buildings they design. The same is true of so many web sites. How come the contact
information is buried so deep in the site?
2
No original: [...]we need to escape from our own mental models of content labeling and organization.
2.1.2 Navegação

A navegação fica mais clara quando há uma hierarquia visual, assim como
alguns identificadores: breadcrumbs,3 navegação global indicando onde o usuário
está, logo do site que leva à página principal. Elementos visuais também ajudam a
diferenciar a navegação como: seções e títulos destacados, espaçamento entre
objetos, espaços entre os itens, etc. (TIDWELL, 2011).
O tipo de navegação mais usado é a hierárquica, que vai da página principal
às subpáginas de conteúdos, geralmente são itens que possuem links que levam a
uma outra página. Navegação global: todos os itens continuam dispostos na página
mesmo acessando outras páginas, esse modelo já é mais antigo e menos usado
atualmente na web. (ROSENFELD e MORVILLE, 1998).
Outros exemplos apresentados por Kalbach (2009, p 172):

Diretórios, por exemplo, frequentemente mostram opções para dois níveis

de hierarquia em uma página, dessa forma reduzindo o número de cliques
para chegar a uma página de segundo nível. Menus dinâmicos têm um
efeito similar dado que eles permitem acessar páginas mais profundas em
um site diretamente a partir de uma página de nível mais alto.

2.1.3 Design de navegação

O design de uma interface vai além da estética, é com elementos visuais,

cores e padrões que tornam a utilização do software mais intuitiva e responsiva.
Repetir elementos visuais ajuda a criar um design mais sólido. Dividir a página e
usar elementos de destaque para diferenciar seções, usar a mesma fonte com
mesmo tamanho e cor para manter os elementos com a mesma classificação
ajudam na hora da visualização (TIDWELL, 2011).
“Escolha um, dois ou até três cores de matizes principais para usar na sua
interface. Crie uma paleta de cores selecionando valores sortidos (níveis de brilho)
junto com alguns matizes. [...] se tratando de cores menos é mais.” 4
(TIDWELL,

3
Breadcrumbs ou migalhas de pão na tradução literal, são números que se encontram geralmente
no fim da página indicando onde o usuário está.
4
No original: Choose one, two, or at most three major color hues to use in the interface. Create a color
palette by selecting assorted values (levels of brightness) from within those few hues.[...]Where colors
are concerned, sometimes less is better.
2011, p 501-504, tradução nossa). As cores auxiliam o usuário a se guiar, portanto
deve-se evitar cores muito saturadas e excesso de matizes, a interface deve ser
limpa e fácil de ser lida, ela deve guiar o usuário e não o distrair (TIDWELL, 2011).

2.1.4 Métodos de criação de interface

O design interativo, que envolve o usuário, o auxilia a encontrar a informação

que precisa, ou utilizar uma ferramenta, é uma etapa de construção de interface
muito importante. Esse processo envolve algumas etapas:
1. Entender as necessidades do usuário, estabelecer requisitos;
2. Criar possíveis alternativas de design que contemplem esses
requisitos;
3. Construir versões interativas e fazer testes com os usuários;
4. Catalogar as etapas e requisitos do que está sendo construído.
(PREECE, SHARP e ROGERS, 2002).
Sobre como pensar numa boa navegação segundo Kalbach (2009): “Inicie
projetando a navegação a partir das páginas que são mais importantes para os
visitantes: as páginas de conteúdo[...].
A hierarquia visual é um fator importante na hora de construir um design, pois
estamos acostumados a encontrar itens dispostos logicamente perto de seus
semelhantes, só notamos que estamos utilizando um software, recursos,
ferramentas, etc., quando este não está funcionando adequadamente, ou quando
encontramos algo em um lugar inesperado. Os usuários tendem a ir diretamente
onde eles acreditam que vão encontrar as informações, ou seja eles esperam que a
informação esteja organizada de forma lógica e padronizada de forma lógica e
padronizada (KALBACH, 2009).

2.2 User Experience

Devemos pensar na experiência do usuário entendendo primeiramente a sua

cognição. Segundo Preece, Sharp e Rogers (2002), o usuário interpreta e aprende,
ele é estimulado por recompensas, essas recompensas são: estímulos visuais, uso
do sistema de maneira intuitiva, fácil recordação de como exercer as ações
novamente. Além disso Preece, Sharp e Rogers (2002) falam sobre o fato de o
usuário ser estimulado pelo jeito em que as informações são apresentadas a ele,
exemplificando com um trecho: “Nós examinamos o menu e procuramos coisas que
irão nos encher de apetite, deixando nossa mente imaginar como cada prato seria
[...]”5 (PREECE; SHARP; ROGERS, 2002, p 75, tradução nossa). A experiência de
usuário é sensitiva, ou seja, todos os nossos sentidos são levados em conta ao
utilizarmos um produto digital, ou um produto qualquer.

2.2.1 O usuário

O design de interface foi criado para conduzir o usuário de uma forma

amigável às funções do sistema ou produto (MAIA, 2016).
Como o que foi discutido acima, a experiência de usuário envolve todos os
sentidos, quando a interface é agradável e possui cores e fontes legíveis, bonitas,
imagens que combinam, etc. o usuário fica mais tolerante com o uso do produto
(PREECE; SHARP; ROGERS, 2002). Devemos entender como o usuário se
comporta quando faz uso do produto, quais são suas decisões, quais caminhos ele
faz para chegar a um resultado. Com base nesses dados chegamos a conclusões e
possíveis melhorias, por isso é essencial realizar pesquisas com os usuários
(LOWDERMILK, 2013).
A parte gráfica é muito importante na comunicação do usuário com
computador, porém Lowdermilk (2013) afirma que devemos tomar cuidado e não
sacrificar a usabilidade do sistema pela estética, “isso é possível [...] existir uma
aplicação incrivelmente bonita com uma usabilidade que é um pesadelo.” 6
(LOWDERMILK, 2013, p 7, tradução nossa).

5
No orginal: We peruse the menu to find things that whet our appetite, letting our attention be drawn
to the imaginative descrip?tions of various dishes. After scanning through the possibilities and
imagining what each dish might be like.
6
No original: It’s possible, as Figure 2-2 shows, to have a stunningly beautiful application that’s a
usability nightmare.
2.2.2 Métodos para construção de interface para o usuário

Existem vários métodos para se começar a planejar uma interface para o

usuário Preece, Sharp e Rogers (2002) afirmam que existem quatro atividades
básicas para criar um design interativo:
1: O usuário deve estar envolvido de alguma forma no projeto, seja
respondendo pesquisas, ou utilizando protótipos.
2: Os objetivos a serem atingidos quanto à usabilidade e a experiência de
usuário devem ser especificados, no entanto a equipe deve estabelecer prioridades
para os requisitos, visto que nem todos poderão ser concluídos.
3: Refazer e juntar as duas etapas anteriores.
Preece, Sharp e Rogers (2002) também adicionam que o devemos ser
objetivos no foco principal do projeto, assim evitando que o escopo desvie para
propósitos e funcionalidades secundárias.
É importante levantar alguns aspectos quanto ao nível de usabilidade de
algum produto como segundo Maia (2016), são pontos a questionar:
a) A sua eficácia: O produto deve entregar as funções que o usuário espera
ao utilizar alguma ferramenta.
b) A eficiência diz respeito à utilização do recurso no sentido de
aproveitamento, quanto tempo é gasto e quanto dinheiro é investido, e até
mesmo a quantidade de recurso de hardware é gasto nessa atividade.
c) Satisfação: o usuário deve conseguir utilizar o produto com facilidade e de
forma intuitiva.

Uma forma de verificar se o projeto está seguindo os objetivos é, segundo

Lowdermilk (2013), perguntar “por quê?”. Pois assim ficamos super focados em
entender o comportamento do usuário, cada movimento feito por ele deve ser
investigado.

2.3 Daltonismo

O daltonismo é uma doença que causa problemas de visão, as quais o doente

possui dificuldades de diferenciar cores. Esse distúrbio atrapalha algumas atividades
do dia a dia, e também pode ter um efeito negativo na vida das pessoas que tem
essa doença, dificultando sua percepção do mundo (JAMPAULO, 2020).
Essa doença afeta principalmente os homens, é uma doença genética
hereditária, afetando os cones dos olhos, que são responsáveis por perceber
diferentes ondas de luz que são responsáveis pela percepção das cores (ENGEL,
2015), ou problemas na estrutura dos olhos e problemas nos neurônios, afetando
principalmente a diferenciação das cores verde e vermelho.
Existem três tipos de daltonismo segundo Jampaulo (2020):
Daltonismo acromático: Menos comum, o paciente não enxerga nenhum
espectro de cor apenas preto e branco e tons de cinza.
Daltonismo dicromático: o paciente tem dificuldade de enxergar as cores,
vermelho, verde ou azul.
Daltonismo tricromático: o paciente possui todos os receptores, porem ele tem
dificuldades de distinguir algumas cores, é um diagnóstico mais comum e menos
severo de daltonismo.
O distúrbio também pode ser identificado pelas cores afetadas, que possuem
a seguinte classificação:
Protanopia: o paciente não enxerga ou enxerga parcialmente a cor vermelha;
Deuteranopia: o paciente não enxerga ou enxerga parcialmente a cor verde;
Tritanopia: a pessoa tem dificuldade de enxergar a cor azul (JAMPAULO,
2020).

2.3.1 Problemas enfrentados por daltônicos

O daltonismo não tem cura, nem tratamento (JAMPAULO, 2020). A

percepção do mundo por meio das cores é algo que pode influenciar até mesmo no
psicológico do paciente, por ele não conseguir cumprir suas tarefas facilmente,
principalmente no meio digital (GARCIA, 2019). “[...]acessibilidade não é caridade e
que você não está sendo bondoso em se preocupar em atender as pequenas
parcelas do público, isso é sua obrigação!” (GARCIA, 2019).
A grande demanda de produtos e serviços online movimenta o mercado com
grandes lucros nas vendas e prestação de serviços, portanto para se aproveitar
essas oportunidades as empresas de desenvolvimento de produtos digitais devem
segundo Camargo e Vidotti (2011), atrair os usuários para a utilização do serviço, e
isso consequentemente aumentaria o número de acessos tornando o serviço mais
popular, o que aumentaria, por consequência os lucros. Por tais razões a
acessibilidade para daltônicos é algo que precisa ser mais visado, visto que só no
Brasil há probabilidade de que existam mais de 8 milhões de daltônicos (WPT,
2021).
A diferenciação das cores é um problema, Fernandes (2017) sugere que as
cores devem ser rotuladas, assim como aumentar o contraste das imagens. As
cores são um estímulo, dificilmente um usuário daltônico se sentirá atraído pela
interface porque, muitas das vezes ele não enxergará as cores, ou ainda aquela
interface para ele até implicará tédio (SIMONE, 2016).
Atualmente existe no mercado uma preocupação com o usuário, existem
alguns passos para entender as suas necessidades segundo Preece, Sharp e
Rogers (2002) são:
 Entender em que o usuário é bom e ruim;
 Encontrar meios em de ajudar as pessoas no jeito que elas exercem
suas tarefas;
 Pensar no que ajudar a melhorar a experiência de usuário;
 Ouvir as pessoas e as envolver na hora do projeto.

2.3.2 Melhorias de acessibilidade

Alguns métodos podem auxiliar, ou até mesmo melhorar a experiência de um

usuário daltônico, conforme Garcia (2019) enfatiza que até pessoas que possuem
monocromia, ou seja enxergam somente preto e branco, possuem dificuldades de
enxergar as variações de luz, por isso é necessário aumentar o contraste entre as
fontes por exemplo. Fernandes (2017) sugere utilizar checkboxes no lugar de
toggles, visto que os toggles dificultam para o usuário daltônico entender o status do
botão, além disso Fernandes (2017) acrescenta que não se deve usar somente
cores para destacar um hyperlink. “Utilize diferentes tipos de sombra ao invés de
diferentes tipos de cores” (SANTANA, 2017). Santana (2017) acrescenta que
devemos usar formas e ícones para indicar alguma ação e evitar de usar somente
cores.
 Garcia (2019) enfatiza que uma maneira de projetar uma boa interface para
todos os tipos de usuário é usando a ferramenta chamada Spectrum, que é uma
extensão do Chrome que simula a visão de um daltônico. Assim é possível verificar
se existe algum defeito na interface que pode a tornar ilegível.
A equipe de projeto deve estar pronta para esse desafio, muitas ideias
podem acabar sendo descartadas por não se adequarem à acessibilidade, mas o
time deve compreender o propósito do projeto, enxergar as diferentes perspectivas e
unir todas as abordagens (ROSENFELD, MORVILLE, 1998).

2.4 Marketing e as cores

O Marketing está ligado à técnica de estudar o comportamento das pessoas e

oferecer a elas produtos ou serviços que melhorem a sua qualidade de vida
(SIMONE, 2016). É através de pesquisas com os usuários que podemos chegar a
conclusões e desenvolver melhorias que atendam suas necessidades (CAMARGO e
VIDOTTI, 2011).
A diferença entre o Marketing 1.0 e o 3.0 é de que o primeiro o foco principal
era entregar um produto, ou seja não havia diferencial, nem preocupação com o
cliente, era apenas demanda. Já no Marketing 3.0 a preocupação é toda voltada ao
consumidor, buscava – se proximidade com o cliente, não é apenas a venda de um
produto, mas sim a venda de uma solução (SIMONE, 2016).

2.4.1 Psicologia das cores

As cores despertam sentimentos no ser humano, elas são também uma forma
de transmitir mensagens, as cores podem nos trazer até sentimentos para nós. Por
isso elas são estudadas, para serem usadas adequadamente a fim de transmitir
alguma mensagem, ou sentimento (NORONHA, 2020).
Noronha (2020) afirma que as cores fazem parte da identidade do produto,
um UX designer as utiliza para gerar sensações aos seus usuários, por tanto é
importante estudar a psicologia das cores. Devemos ter uma atenção especial
quanto ao uso das cores, porque a cor pode acabar transmitindo uma ideia diferente
do que propomos para as pessoas (MOTA, 2019?).
 Para escolhermos as cores certas devemos levar em consideração fatores,
fisiológicos, psicológicos e culturais, precisa ser feita uma pesquisa sobre os tipos de
usuários que irão usar o produto, seguidamente a cor deve ser associada ao tipo de
produto ou serviço, por exemplo: azul é uma cor usada, muitas vezes no setor
tecnológico, pois é uma cor que transmite confiança e tranquilidade. Já as cores
como vermelho, amarelo e laranja são usadas em logos de empresas de fast-food,
ou restaurantes, essas cores despertam o apetite e até lembram comida
(NORONHA, 2020).

3. METODOLOGIA

Este trabalho irá usar métodos de pesquisa quantitativa, de forma aplicada.

Serão utilizadas pesquisas em forma de levantamento, questionários, avaliação de
dados por meio de participantes. A pesquisa será também exploratória, a fim de
levantar melhorias e obter métodos que irão contribuir para o conhecimento do
assunto, assim como a aplicação de uma metodologia capaz de sanar o problema
de falta de acessibilidade.
Inicialmente a pesquisa irá começar com o levantamento de requisitos,
entendendo o ponto de vista de uma pessoa daltônica, por fim compreendendo sua
deficiência de enxergar as cores podemos chegar à conclusão de possíveis
melhorias que irão contribuir para a criação de uma interface mais acessível. Por
tanto essa pesquisa irá contribuir com a criação de um guia que irá especificar o que
usar e não usar na hora de construir uma interface.
Serão aplicados questionário a pessoas daltônicas com intuito de identificar
se as melhorias propostas foram realmente cumpridas. Também será avaliado o
grau de satisfação que a interface proporcionou no quesito acessibilidade.
Por fim será aplicado outro questionário a fim de qualificar o guia de melhorias
de interface para pessoas daltônicas, com intuito de avaliar a qualidade e
integridade do guia, o questionário será aplicado a pessoas que estudam
desenvolvimento de software e design gráfico.
A pesquisa inicialmente irá levantar o embasamento teórico para que se
possa entender onde estão os problemas em uma interface, onde o usuário
daltônico perde a acessibilidade. Após esse entendimento, será criado um guia de
melhorias de construção de interface, para conclusão de sua eficácia serão
avaliados os dados obtidos dos questionários. O intuito desta pesquisa é avaliar
como essas pequenas melhorias na interface podem causar um impacto positivo na
usabilidade de um usuário daltônico. Além de alertar as pessoas sobre os problemas
enfrentados pelos usuários com deficiência visual e também ressaltar a importância
de garantir acessibilidade para todos os usuários.

4 PESQUISA E DESENVOLVIMENTO

O daltonismo é uma problemática na hora de criar o design de um produto

digital que possa ser acessível a pessoas com deficiência visual cromática. O
marketing, muitas marcas consolidadas levam em conta utilizar cores padronizadas
em seus sites, deixando de lado o fato que algumas pessoas não conseguem
enxergar tais cores.
É importante ressaltar que o design estimula o usuário a buscar informação
(SIMONE, 2016), para uma pessoa daltônica encontrar um site ou software
totalmente cinza implicará tédio e uma má experiência, pois segundo Norman a
experiência de usuário “É a forma com que você sente o mundo, é a forma que você
experiencia a sua vida, é a forma que você experiencia um serviço[...]”. A má
experiência do usuário ao utilizar o serviço irá gerar prejuízo a empresa que
forneceu o software, e um prejuízo ainda maior para empresa que contratou o
serviço, visto que a ferramenta não manteve o cliente no site e nem motivou- a
comprar um produto.
O desenvolvedor e o designer devem oferecer uma interface acessível a todos os
usuários, por isso pode se fazer uso de algumas ferramentas, sendo elas
disponíveis em extensões de navegadores, softwares e ferramentas de edição de
imagens.

4.1 Exemplos

Para exemplificar, serão usadas imagens de interfaces de sistemas e websites,

essas imagens serão editas na ferramenta Adobe Photoshop (2019) a fim de simular
a visão de uma pessoa daltônica.
 Figura 1 – Página principal do site Aliexpress com visão normal

Fonte: Página inicial do site Aliexpress 1

Figura 2 – Página principal do site Aliexpress com visão protanopia

Fonte: Página inicial do site Aliexpress 2

1
Disponível em: https://best.aliexpress.com/. Acesso em: 5 set. 2022.
2
Disponível em: https://best.aliexpress.com/. Acesso em: 5 set. 2022.
 Figura 3 – Página principal do site OLX com visão protanopia e com visão normal

Fonte: Compilação da autora

Podemos identificar que na figura 2 não há comprometimento do contraste

das letras, porém a interface acaba ficando não tão atrativa. Já na figura 3
observamos que o contraste da cor de fundo, junto com o letreiro da parte superior
acabam mesclando, porque as duas cores ficam muito próximas uma da outra no
círculo cromático. Isso faz com que o usuário deixe de notar a informação, ou a note
pela segunda vez que for olhar para o local.

Figura 4 – Círculo cromático Protanopia

 Fonte: Site Depositphotos3

Pela razão de manter o contraste aumentado, é necessário prestar atenção

no círculo cromático e apostar em cores que ficam em lados opostos do círculo,
sendo mais agradável para o usuário identificar rapidamente os letreiros, sem perder
o visual da marca nem mesmo a sua identidade e design.

4.2 Como ColorAdd pode ser aplicado nas interfaces

4.2.1 O que é o ColorAdd?

ColorAdd é uma linguagem gráfica criada pelo designer português Miguel

Neiva, usada para representar as cores primárias e secundárias, por meio de
símbolos. Esses símbolos em cores monocromáticas representam as seguintes
cores base: Ciano, Magenta e Amarelo.

Figura 5 – ColorAdd

3
Disponível em: https://br.depositphotos.com/vector-images/protanopia.html. Acesso em: 5 set. 2022.
 Fonte: Site Comunicadores4

4.2.2 Onde está inserido o ColorAdd?

O ColorAdd está pouco presente ainda nas sinalizações públicas, placas de

estações de trem, lixeiras de reciclagem, etiquetas de roupa, a linguagem pode ser
usada para sinalizar qualquer tipo de informação visual que dependa das cores
como comunicação, incluindo as interfaces gráficas. Por exemplo, quando o usuário
vai escolher a cor de uma peça de roupa, a interface deve mostrar as cores, o nome
das cores e seu símbolo.
O ColorAdd possui um aplicativo chamado ColorADD, disponível para
celulares iOS e Android, este aplicativo identifica as cores através da câmera do
celular indicando os símbolos das respectivas cores. Mesmo que o usuário tenha tal
ferramenta, é indispensável que os desenvolvedores façam uso da simbologia, em
alguns casos o design pode ficar comprometido, entretanto o ColorAdd pode ser
inserido nas interfaces nos seguintes casos:
 Simbologia que depende das cores;
 Escolha de produtos pela cor;
 Filtro de pesquisas;
 Descrição de produtos.

4
Disponível em: https://comunicadores.info/alfabeto-para-daltonicos-coloradd/. Acesso em: 9 set.
2022.
4.3 ALTERNATIVAS NA HORA DE DESENHAR UMA INTERFACE

Alternativas e regras as serem aplicadas a fim de construir uma interface que

possa ser lida por todos os usuários sem comprometer o design do site e sua marca.

4.3.1 O que evitar

Evite usar toggles, quando se fala de uma interface adaptada, o usuário

daltônico pode facilmente confundir se o toggle está “on” ou “off” principalmente se a
pessoa tiver daltonismo do tipo acromático, ou seja, essa pessoa só enxerga preto,
branco, e tons de cinza.

Figura 6 – Toggle e checkbox na visão acromática

Fonte: Site Pngkey1

Por tanto a melhor opção para substituir os toggles são os checkboxes.

Ícones com pouco contraste, e tamanho inferior a 18,9 pixels devem ser
evitados.
Jamais utilizar somente cores para indicar algum padrão, opte sempre por
combinar ícones. Ao criar formulários de preenchimento, descreva os erros, não
opte por usar apenas a cor vermelha.

Figura 7 – comparação visão normal entre protanopia

1
Disponível em: https://www.pngkey.com/maxpic/u2q8q8a9u2a9y3u2/. Acesso em: 9 set. 2022.
 Fonte: compilação da autora

Não utilize duas cores para diferenciar o fundo da fonte, opte por uma fonte
com brilho e menos saturação, um daltônico pode facilmente ficar sem enxergar a
cor do texto, por exemplo, porque essa pessoa enxerga apenas espectros
específicos de cores, a interface pode acabar ficando confusa, sem destaque como
é o exemplo das Figuras (3 e 7).

4.3.2 Soluções

Após compreender o que não deve ser usado em uma interface, uma solução
alternativa para sites mais visitados como: sites de compra, notícias, hospedagem,
seria criar um “modo daltônico” para as interfaces, baseado no tipo de daltonismo
mais comum a protanopia, deuteranopia e tritanopia. Esse “modo daltônico” de uma
maneira mais simples, destacaria as partes mais importantes do site como: barra de
pesquisa, menus, utilizando as cores mais saturadas do espectro de cada tipo de
daltonismo. Além disso, o “modo daltônico” aumenta o contraste entre as letras,
escurece cores saturadas que não entram no espectro de cores vistas por um
daltônico.
5 LEVANTAMENTO DE DADOS

A pesquisa será realizada com pessoas que estudam e trabalham com

desenvolvimento de software. Essas pessoas irão responder um questionário
objetivo. Este questionário irá levantar dados sobre o Manual de regras para criação
de interfaces para deficientes visuais, além de obter dados como: algum evento que
levou à insatisfação do usuário ao utilizar alguma interface, e se o usuário possui, ou
conhece alguém que tem deficiência visual cromática.
O objetivo desta pesquisa é também alertar as pessoas que desenvolvem
software a aprenderem sobre acessibilidade de usuários daltônicos, ou pessoas com
problemas de visão. O Manual de Regras para desenvolvimento de interfaces e o
questionário sobre acessibilidade de pessoas daltônicas se encontra no apêndice.
O software usado para o questionário será o Forms da Google.

6. RESULTADOS

O questionário foi respondido por um total de 38 pessoas, sendo essas pessoas,

colegas dos cursos da área de tecnologia da informação. Todas as perguntas se
encontram no apêndice.
O Manual de regras para desenvolvimento de interfaces para daltônicos é utilizado
no questionário e também se encontra no apêndice.

6.1 Resultados do questionário

Pergunta 1

Figura 8 – Gráfico gerado da pergunta

Fonte: criado pela autora

 Somente nesta pesquisa foi possível descobrir que, mesmo em um número
pequeno de pessoas, existe uma quantidade significativa de pessoas daltônicas.
O gráfico acima mostra que, 22 das 38 pessoas que responderam à pesquisa
são daltônicas. Um número alarmante, que talvez não se tivesse conhecimento. Por
conta disso, talvez o número de falta de acessibilidade seja tão grande. No entanto
ainda fica incompreensível o porquê deste perfil de descaso das empresas,
desenvolvedores e designers no quesito acessibilidade para deficientes visuais.

Pergunta 2

Figura 9 - Gráfico gerado da pergunta 2

Fonte: criado pela autora

Considerando que o segundo maior número gerado a partir desta pergunta foi
de 26,3%, o qual corresponde a grande e constante dificuldade enfrentada pelos
usuários daltônicos e não daltônicos ao utilizarem uma interface. É inimaginável que
ainda perdure esta situação de falta de acessibilidade em meio a uma era digital tão
avançada, com campanhas, estudos de melhorias de interface, e até softwares para
prototipação e testes de interface, como, por exemplo o Figma.

Pergunta 3
 Figura 10 - Gráfico gerado da pergunta 3

Fonte: criado pela autora

A pauta mais apontada nesse artigo científico foi: a falta de coesão entre a cor
de fundo e a cor da fonte, novamente 50% dos entrevistados aponta que possuem
dificuldade de ler interfaces, justamente pela condição do daltonismo ser um
agravante. Muitos usuários se deparam com interfaces que utilizam pouco contraste
entre fonte e cor de fundo, e muitos desenvolvedores se esquecessem que algumas
pessoas não enxergam diferença entre cores.
O segundo maior número, também da pergunta de número 3, informou que 17
dos 38 participantes possuem dificuldades em compreender erros apontados por
formulários. As pesquisas bibliográficas realizadas para a escrita desse artigo
científico, afirmam, várias vezes que muitos formulários não mostram aonde está o
erro na inserção de dados, e geralmente tratam o campo do formulário apenas
usando a cor vermelha, o que passa muitas vezes desapercebido entre os
daltônicos.

Pergunta 4

Figura 11 - Gráfico gerado da pergunta 4

 Fonte: criado pela autora

A pergunta número 4 indica que 60% dos participantes achou informativo o

Manual de regras para criação de interfaces para deficientes visuais, outras 39% das
pessoas não conheciam sobre o assunto, compreendendo-se então que muitas
pessoas sejam elas daltônicas ou não, não conhecem sobre os pilares da
acessibilidade para pessoas deficientes visuais. Além disso, alguns entrevistados
não conheciam a pauta, o que é, no entanto, um aspecto no qual precisa ser mais
debatido entre desenvolvedores e designers de interfaces.

Pergunta 5

Figura 12 - Gráfico gerado da pergunta 5

 Fonte: criado pela autora

Quando se trata de questionar a falta de dedicação para criar interfaces

acessíveis a daltônicos, 2 em cada 3 participantes da pesquisa confirmam que falta
um considerável apoio para que pessoas com deficiência visual cromática possam
ter acesso à informação.

7 CONSIDERAÇÕES FINAIS

O número de usuários daltônicos é maior do que a maioria das pessoas

imaginam, mas ainda assim não é um número relativamente relevante no ponto de
vista das empresas de desenvolvimento de software e designers. Deve-se ressaltar
a importância de criar uma interface adaptada para esses usuários, mas por quê?
Porque o daltônico pode facilmente ficar sem acesso à informação, todos os
usuários do meio digital merecem e devem ter meios de conseguir utilizar interfaces.
E no quesito acessibilidade, além da interface levar informação ao usuário,
ela deve conduzi-lo e prender sua atenção, por meio de cores e formas. Mas e se o
usuário daltônico não enxergas as cores da interface, visto que ela normalmente
segue a marca visual da empresa? Deve-se adaptar a interface para essas pessoas,
com outras cores e combinações.
A ideia desta proposta é justamente alertar as empresas, designers e
desenvolvedores de que o daltonismo é mais comum do que se pensa, e Garcia
(2019) enfatiza que acessibilidade não é caridade, e está previsto na Lei Brasileira
de Inclusão (LBI — Lei 13.146/15), que é obrigatório garantir acessibilidade a todos
os usuários.
Uma forma de adaptar as interfaces para os daltônicos é entender como o
usuário enxerga, as cores, quais ícones e itens devem ser evitados. E partindo deste
ponto de vista, deve-se combinar uma cartela limitada de cores para tornar a
interface atrativa. Pois é essencial que para o sucesso de um software seja
garantida a acessibilidade de todos os usuários, e para que esse requisito seja
cumprido o usuário deve ter uma boa experiência de uso da interface, ao que se
resume em: conseguir alcançar seus objetivos de forma fácil, e ainda ser incentivado
a procurar mais informação.

8 CONCLUSÃO

As pesquisas proporcionaram um maior entendimento do número de pessoas

daltônicas existentes. Foi possível entregar esses dados de que existem muitas
pessoas daltônicas pelo mundo, mais do que se tem noção. Podendo concluir-se
que, muitas vezes, o usuário não se depara com a grande dificuldade que enfrenta
diariamente.
Entendendo o comportamento das pessoas ao utilizar os meios digitais, foi
possível concluir que, a partir da pesquisa, muitos usuários sofrem com a
desinformação nas interfaces, se forçam a tentativa e erro, e o que resta aos
daltônicos é torcer para que as telas sejam legíveis. A maioria dos entrevistados
apontou como maior dificuldade ao utilizar interfaces é distinguir a cor de fundo com
a cor dos textos, visto que em muitos casos, como foi apontado por Simone (2016),
as empresas tendem a manter o design dos seus meios digitais ligados as cores da
marca.
O Manual de regras para criação de interfaces para usuários daltônicos foi de
grande importância para alertar não só usuários, mas designers e desenvolvedores.
Pessoas que não conheciam o assunto, agora sabem que pequenos detalhes
podem tornar um sistema muito mais acessível para todos os tipos de usuários. O
manual não contém todas as regras, possui principais tópicos sobre o assunto,
brevemente descritos e exemplificados, levando informação as pessoas de forma
rápida e simples.
 REFERÊNCIAS

AGNI, Edu. Don Norman e o termo "UX". Uxdesign, 29 ago 2016. Disponível
em: https://uxdesign.blog.br/don-norman-e-o-termo-ux-6dffb3f8d218. Acesso em: 18
mar 2022.

CAMARGO, Liriane S. D. A.; VIDOTTI, Silvana A. B. G. Arquitetura de

informação: uma abordagem prática. 1ª. ed. Rio de Janeiro: LTC, 2011.

CONHEÇA as barreiras de acessibilidade que pessoas daltônicas enfrentam

na web e saiba como evitá-las. Wpt, 23 mar 2021. Disponível em:
https://mwpt.com.br/barreiras-de-navegacao-enfrentadas-por-pessoas-daltonicas.
Acesso em: 10 mar 2022.

DUARTE, Amauri. Acessibilidade para Daltônicos na web. Daltonicos, jan

2021. Disponível em: http://www.daltonicos.com.br/daltonico/index.html. Acesso em:
18 mar 2022.

ENGEL, Ederson H. Como funciona visão. Focus Medicina dos Olhos,

2015. Disponível em: http://focusmedicinadosolhos.com.br/index.php/artigos/como-
funciona-a-visao/. Acesso em: 3 mai 2022.

FERNANDES, Juliana. Acessibilidade para Daltônicos. Medium, 14 out 2017.

Disponível em: https://medium.com/acessibilito/acessibilidade-para-dalt
%C3%B4nicos-casos-de-falha-e-sucesso-d76bf6e4261e. Acesso em: 21 mar 2022.

FRAZÃO, Dr. A. Daltonismo: o que é, como identificar e tratar. tua saude,

2021. Disponível em: https://www.tuasaude.com/daltonismo/. Acesso em: 03 mai
2022.

GARCIA, Matheus. UX na perspectiva daltônica. UX Collective, 16 out 2019.

Disponível em: https://brasil.uxdesign.cc/melhorando-a-experi%C3%AAncia-do-usu
%C3%A1rio-dalt%C3%B4nico-3097291d0492. Acesso em: 21 mar 2022.
 JAMPAULO, Dr M. O que é Daltonismo? Como identificar e tratar? Viva
Oftalmologia, 2020. Disponível em: https://vivaoftalmologia.com.br/daltonismo-o-
que-e/. Acesso em: 03 mai 2022.

KALBACH, James. Design de navegação web. Tradução de Eduardo

Kessler Piveta. 1ª. ed. Porto Alegre: Bookman, 2009.

KRUG, Steve. Não me faça pensar!: uma abordagem de bom senso à

usabilidade web. Tradução de Acauan Pereira Fernandes. 2ª. ed. Rio de Janeiro:
Alta Books LTDA., 2006.

LOWDERMILK, Travis. User-Centered Design. 1ª. ed. Sebastopol: O'reilly,

2013.

MAIA, Larissa. DESIGN DE INTERFACE: VOCÊ SABE O QUE É E QUAL A

IMPORTÂNCIA? Agência duo, 2013. Disponível em: https://agenciaduo.me/design-
de-interface-voce-sabe-o-que-e-e-qual-a-importancia/. Acesso em: 3 mai 2022.

MORVILLE, Peter; ROSENFELT, Louis. Information Architecture for World

Wide Web and Beyond. 1ª. ed. Sebastopol: O'Reilly Media, Inc., 1998.

MOTA, Gustavo. O significado das cores para logomarcas e como escolhê-

las. We do Logos, 2019? Disponível em: https://blog.wedologos.com.br/significado-
das-cores-para-logomarcas/. Acesso em: 4 mai 2022.

NORONHA, Bruna. A Psicologia das cores e sua relação com o UX Design.

Ux Design, 2020. Disponível em: https://brasil.uxdesign.cc/a-psicologia-das-cores-e-
sua-rela%C3%A7%C3%A3o-com-o-ux-design-af02460639cd. Acesso em: 4 mai
2022.

NUNES, Jéssica C. Análise da contribuição do web design responsivo

para usabilidade de aplicações web em dispositivos móveis. Instituto Federal de
São Paulo. São João da Boa Vista- SP. 2017.
 PREECE, Jennifer; SHARP, Helen; ROGERS, Yvonne. Interaction Design:
Beyond Human- Computer Interaction. Nova York: John Wiley & Sons, Inc, 2002.

SANTANA, Flavio. Daltonismo e UX: a experiência para todos. Coletivo UX,

16 jul 2017. Disponível em: https://coletivoux.com/dalt%C3%B4nicos-tamb
%C3%A9m-s%C3%A3o-usu%C3%A1rios-4f03ca40c30d. Acesso em: 21 mar 2022.

SILVA, Luiz F. A. D. Aplicando metodologia mobile-first para

desenvolvimento de websites. Instituto Federal de São Paulo. São João Boa
Vista- SP. 2017.

SIMONE, Gustavo. A influência das cores no marketing digital. Instituto

Federal de Educação, Ciência e Tecnologia de São Paulo. São João da Boa Vista,
p. 88. 2016.

TIDWELL, Jenifer. Designing Interfaces. 2ª. ed. Sebastopol: O'Reilly, 2011.

WHAT is colorblindness. Color Blind Awareness, 2010. Disponível em:
https://www.colourblindawareness.org/colour-blindness/. Acesso em: 10 mar 2022.
APENDICE A - O MANUAL DE REGRAS PARA CRIAÇÃO DE INTERFACES
PARA DEFICIENTES VISUAIS

Manual regras para

interface.doc

APENDICE B - QUESTIONÁRIO SOBRE ACESSIBILIDADE DE PESSOAS

DALTÔNICAS

Questionario-
acessibilidade de pessoas daltônicas.docx