Contrast de color

Els colors que tries per a la interfície de l'aplicació afecten la facilitat amb què els usuaris poden entendre-la i llegir-hi coses. Si hi ha prou contrast de color, el text i les imatges seran més fàcils de llegir i comprendre.

A més d'oferir beneficis per als usuaris amb discapacitats visuals, disposar de prou contrast de color ajuda tots els usuaris a l'hora de consultar una interfície als dispositius en condicions de llum extrema; per exemple, quan estan exposats a la llum directa del sol o en una pantalla amb poca brillantor.

Implementació

Quan implementis la interfície d'usuari d'una aplicació, especifica colors de primer pla i de fons amb prou contrast de color.

La "relació de contrast" és un càlcul de la diferència en la luminància, o intensitat de la llum emesa, entre dos colors contigus quan es mostren en una pantalla. Aquesta relació oscil·la de l'1 al 21 (sovint s'escriu com 1:1-21:1), on els nombres més alts indiquen un contrast més elevat. Hi ha moltes eines disponibles per calcular la relació de contrast de dos colors contigus, com ara aquesta calculadora.

Quan utilitzis TextView per mostrar el text, fes servir android:textColor i android:background per definir colors de primer pla i de fons amb una relació de contrast alta. Quan utilitzis Text a Compose, utilitza el paràmetre de color i Modifier.background per definir colors de primer pla i de fons amb una relació de contrast alta.

El W3C recomana:

• Almenys 4,5:1 per al text petit (lletra rodona inferior als 18 punts o lletra negreta inferior als 14 punts)
• Almenys 3:1 per al text gran (lletra rodona de 18 punts o més, o bé lletra negreta de 14 punts o més)

Notes sobre el contrast de color:

• Quan utilitzis ImageView o Image per renderitzar contingut gràfic o iconografia, assegura't que el contrast entre els colors de primer pla i de fons sigui igual o superior a les relacions recomanades.

• Les relacions de contrast es mesuren en funció del color aparent del primer pla i del fons d'un element quan està superposat sobre altres elements. Si els colors es defineixen en un format ARGB (valors hexadecimals de #AARRGGBB), tingues en compte que pot ser que els colors no opacs (els que tenen un valor de canal alfa inferior a 255) tinguin un color aparent diferent, ja que es mesclen amb el contingut que es renderitza a sota.
• La suavització del tipus de lletra i l'antialiàsing poden afectar el color aparent d'algun contingut, especialment del que té traços poc amples. Per millorar la llegibilitat, tria una combinació de colors amb una relació de contrast més alta o augmenta l'amplada dels traços del contingut.

Disseny

Quan dissenyis una interfície d'usuari, considera la possibilitat de triar una paleta amb prou contrast de color per als colors adjacents.

• Per al text i la iconografia, segueix les relacions de contrast mínimes que s'indiquen en les directrius del W3C.
• Valora la possibilitat d'incloure un tema de contrast elevat com a opció o permet que l'usuari triï els colors del contingut principal.

Per obtenir més informació, consulta les directrius d'accessibilitat sobre color i contrast de Material Design.

Proves

Per comprovar manualment el contrast de color d'una aplicació:

1. Obre l'aplicació.
2. Fes una captura de pantalla.
3. Amb un programari d'edició o de visualització d'imatges, fes servir una eina comptagotes per extreure una mostra dels colors aparents a partir de la captura de pantalla.
4. Utilitza una calculadora de relació de contrast per determinar la relació de contrast dels colors adjacents.
5. Si la relació de contrast és inferior a la que es defineix a les directrius del W3C, pot ser que la interfície millori si s'augmenta el contrast de color.

Les eines de prova automatitzades d'Android poden detectar molts problemes relacionats amb el contrast de color. Et recomanem que utilitzis el Test d'accessibilitat d'Android per provar de manera manual l'aplicació en un dispositiu. Per fer proves automàtiques, activa la comprovació d'accessibilitat a Espresso i Robolectric.