Kontrast farieb

Farby, ktoré vyberiete pre rozhranie svojej aplikácie, ovplyvňujú, ako ľahko ho dokážu používatelia prečítať a pochopiť. Dostatočným kontrastom farieb uľahčíte čítanie a pochopenie textu aj obrázkov.

Dostatočným kontrastom farieb pomôžete nielen používateľom s rôznymi zrakovými postihnutiami, ale aj všetkým ostatným, ktorí si rozhranie zobrazujú na zariadeniach pri extrémnych svetelných podmienkach, keď ich napríklad vystavia priamemu slnečnému žiareniu alebo majú obrazovku s nízkym jasom.

Implementácia

Pri implementácii používateľského rozhrania aplikácie špecifikujte farby pozadia a popredia s dostatočným kontrastom farieb.

Pomer kontrastu je výpočet rozdielu vo svetelnosti (intenzity vyžarovaného svetla) medzi dvoma susediacimi farbami na obrazovke. Tento pomer má rozsah od 1 do 21 (často sa uvádza ako rozsah od 1 : 1 do 21 : 1), pričom vyššie čísla znamenajú väčší kontrast. Existuje mnoho nástrojov na vypočítanie pomeru kontrastu dvoch susediacich farieb, ako napríklad táto kalkulačka na výpočet pomeru kontrastu farieb.

Keď zobrazujete text pomocou objektu TextView, farby pozadia a popredia s vysokým pomerom kontrastu definujte pomocou atribútov android:textColor a android:background. Keď používate objekt Text v nástroji Compose, farby pozadia a popredia s vysokým pomerom kontrastu definujte pomocou parametra farby a atribútu Modifier.background.

Odporúčania organizácie W3C:

• V prípade malého textu (kratšieho ako 18 bodov štandardného písma alebo 14 tučného písma) použite aspoň pomer 4,5 : 1.
• V prípade veľkého textu (18 bodov štandardného písma alebo viac, prípadne 14 bodov tučného písma alebo viac) použite aspoň pomer 3,0 : 1.

Poznámky týkajúce sa kontrastu farieb:

• Keď na vykresľovanie názorného obsahu používate objekt ImageView alebo Image, uistite sa, že kontrast medzi farbami popredia a pozadia spĺňa alebo prekračuje odporúčané pomery.

• Pomery kontrastu sa merajú na základe viditeľnej farby pozadia a popredia určitého prvku pri vrstvení cez iné prvky. Upozorňujeme, že ak definujete farby vo formáte ARGB (v šestnástkových hodnotách #AARRGGBB), priehľadné farby (t. j. tie, ktorých hodnota kanála alfa je menšia ako 255) môžu mať inú viditeľnú farbu. Príčinou je splynutie s obsahom vykresleným pod nimi.
• Vyhladzovanie písma a použitie anti-aliasingu môže ovplyvniť viditeľnú farbu niektorého obsahu, najmä obsahu s nízkou šírkou ťahov. Ak chcete zlepšiť čitateľnosť, vyberte kombináciu farieb s väčším kontrastným pomerom alebo zvýšte šírku ťahov daného obsahu.

Dizajn

Pri navrhovaní vzhľadu používateľského rozhrania zvážte výber palety s dostatočným farebným kontrastom pre susediace farby.

• V prípade textu a ikon postupujte podľa pokynov organizácie W3C týkajúcich sa minimálnych pomerov kontrastu.
• Zvážte zahrnutie možnosti použiť motív s vysokým kontrastom alebo umožnite používateľovi vybrať farby hlavného obsahu.

Ďalšie informácie získate v pokynoch pre farby a kontrast dostupnosti vzhľadu Material Design.

Testovanie

Ak chcete manuálne skontrolovať kontrast farieb v aplikácii:

1. Otvorte aplikáciu.
2. Urobte snímku obrazovky.
3. V softvéri na zobazovanie alebo úpravu obrázkov pomocou nástroja kvapkadla extrahujte zo snímky obrazovky viditeľnú vzorku farieb.
4. Vypočítajte pomer kontrastu susediacich farieb pomocou kalkulačky na výpočet kontrastu.
5. Ak je pomer kontrastu menší ako definujú pokyny organizácie W3C, bude vhodné, ak v rozhraní zvýšite kontrast farieb.

Automatizované testovacie nástroje Androidu môžu odhaliť mnohé problémy s kontrastom farieb. Skúste manuálne otestovať aplikáciu v zariadení pomocou Kontroly dostupnosti pre Android. V prípade automatizovaných testov zapnite kontrolu dostupnosti v nástrojoch Espresso a Robolectric.