De kleuren die je voor je app-interface kiest, zijn van invloed op hoe makkelijk gebruikers de interface kunnen lezen en begrijpen. Voldoende kleurcontrast maakt tekst en afbeeldingen makkelijker leesbaar en begrijpbaar.
Voldoende kleurcontrast kan niet alleen nuttig zijn voor gebruikers met verschillende visuele beperkingen, maar helpt alle gebruikers bij het bekijken van een interface op apparaten onder extreme lichtomstandigheden, bijvoorbeeld als zonlicht direct op het scherm schijnt of op een scherm met een lage helderheid.
Implementatie
Zorg dat je achtergrond- en voorgrondkleuren met kleurcontrast kiest als je de gebruikersinterface van een app implementeert.
De contrastverhouding is een berekening van het verschil in helderheid (of intensiteit van het uitgestraalde licht) tussen 2 aangrenzende kleuren wanneer die op een scherm worden weergegeven. Deze verhouding varieert van 1 tot 21 (vaak genoteerd als 1:1 tot 21:1), waarbij een hoger getal een groter contrast aangeeft. Er zijn veel tools beschikbaar om de contrastverhouding van 2 aangrenzende kleuren te berekenen, zoals deze calculator voor de kleurcontrastverhouding.
Als je TextView gebruikt om tekst weer te geven, gebruik je android:textColor en android:background om voorgrond- en achtergrondkleuren met een hoge contrastverhouding op te geven. Als je Text gebruikt in Compose, gebruik je de kleurparameter en Modifier.background om voorgrond- en achtergrondkleuren met een hoge contrastverhouding op te geven.
Het W3C raadt het volgende aan:
- Ten minste 4,5:1 voor kleine tekst (minder dan 18 punten normale tekst of 14 punten vetgedrukte tekst)
- Ten minste 3,0:1 voor grote tekst (18 punten en hoger voor normale tekst of 14 punten en hoger voor vetgedrukte tekst)
Opmerkingen over kleurcontrast:
-
Als je
ImageViewofImagegebruikt om grafische content of iconografie weer te geven, zorg je dat het contrast tussen de voorgrond- en achtergrondkleuren minstens de aanbevolen verhoudingen heeft. - Contrastverhoudingen worden gemeten op basis van de waargenomen kleur van de voorgrond en achtergrond van een element als deze gelaagd over andere elementen wordt weergegeven. Als je kleuren opgeeft in de ARGB-indeling (hexadecimale waarden van #AARRGGBB), moet je er rekening mee houden dat niet-dekkende kleuren (met een alfakanaalwaarde van minder dan 255) een andere waargenomen kleur kunnen hebben als gevolg van kleurmenging met content die eronder wordt weergegeven.
- Lettertype-afvlakking en anti-aliasing kunnen een negatief effect hebben op de kleur van bepaalde content, met name content met een lage lijndikte. Voor betere leesbaarheid kies je een kleurencombinatie met een hogere contrastverhouding of verhoog je de lijndikte van de content.
Ontwerp
Als je een gebruikersinterface ontwerpt, raden we je aan een palet te kiezen met voldoende kleurcontrast voor aangrenzende kleuren.
- Voor tekst en met name voor iconografie volg je de W3C-richtlijnen voor minimale contrastverhoudingen.
- We raden je aan een thema met hoge contrastkleuren te gebruiken als optie, of gebruikers de mogelijkheid te bieden om de kleuren voor primaire content te kiezen.
Ga naar de Toegankelijkheidsrichtlijnen voor material design voor kleur en contrast.
Testen
Zo check je het kleurcontrast in een app:
- Open de app.
- Maak een screenshot.
- Gebruik in software om afbeeldingen mee te bekijken of te bewerken de pipettool om een voorbeeld van de kleuren uit de screenshot op te halen.
- Gebruik een calculator voor contrastverhouding om de contrastverhouding van aangrenzende kleuren te bepalen.
- Als de contrastverhouding minder is dan wordt aanbevolen in de W3C-richtlijnen, kun je de interface verbeteren met een hoger kleurcontrast.
De geautomatiseerde testtools van Android kunnen veel problemen met het kleurcontrast detecteren. Je kunt Accessibility Scanner voor Android gebruiken om je app handmatig op het apparaat te testen. Voor geautomatiseerde tests schakel je toegankelijkheidscontroles in Espresso en Robolectric in.