Spalvų kontrastas tekstui, mygtukams ir piktogramoms

Kodėl kontrastas svarbus

Blyškus tekstas kainuoja skaitytojus. Silpnaregiams, vyresniems skaitytojams ir visiems, kurie žiūri į telefoną ryškioje šviesoje, reikia aiškaus skirtumo tarp teksto ir fono. Todėl W3C Web Content Accessibility Guidelines (WCAG) nustato mažiausias vertes tekstui, valdikliams, pavyzdžiui, mygtukams ir įvesties laukams, bei piktogramoms ir grafikai. Jas galima išmatuoti ir patikrinti prieš paleidžiant svetainę.

Kaip veikia kontrasto santykis

Kontrasto santykis palygina, kiek šviesios yra dvi spalvos. WCAG žiūri ne į atspalvį, o į santykinį skaistį: vertę nuo 0 tamsiausiai juodai iki 1 šviesiausiai baltai. Trys kanalai – raudonas, žalias ir mėlynas – perskaičiuojami ir pasveriami: žalias reiškia daugiausia, raudonas mažiau, o mėlynas mažiausiai. Santykis yra (L1 + 0.05) / (L2 + 0.05), kur L1 yra šviesesnės spalvos skaistis. Rezultatas yra nuo 1:1 dviem vienodoms spalvoms iki 21:1 juodai ant baltos.

Praktikoje svarbios dvi W3C taisyklės. Pirma, vertės neapvalinamos: santykis 4.499:1 neatitinka ribos 4.5:1. Antra, kontrastas matuojamas su fonu, nustatytu tekstui. Jei puslapis nustato tik teksto spalvą be fono spalvos, W3C tai laiko neatitiktimi, nes numatytasis lankytojo fonas nežinomas. Visada nustatyk abi spalvas kartu.

Trys sėkmės kriterijai

• 1.4.3 Contrast (Minimum), AA lygis: tekstui ir teksto paveikslėliams reikia ne mažiau kaip 4.5:1, dideliam tekstui – ne mažiau kaip 3:1.
• 1.4.6 Contrast (Enhanced), AAA lygis: tekstui reikia ne mažiau kaip 7:1, dideliam tekstui – ne mažiau kaip 4.5:1. Tai griežtesnis lygis, ir jis labiausiai padeda su ilgais tekstais.
• 1.4.11 Non-text Contrast, AA lygis: ne mažiau kaip 3:1 gretimų spalvų atžvilgiu viskam, ką reikia matyti, kad atpažintum valdiklį ir jo būseną (pavyzdžiui, įvesties lauko rėmelį ar fokuso indikatorių), ir grafikos dalims, kurių reikia turiniui suprasti, pavyzdžiui, piktogramoms ar diagramos linijoms.

Kas laikoma dideliu tekstu

Didelis tekstas yra ne mažesnis kaip 18 punktų arba ne mažesnis kaip 14 punktų paryškintas. W3C tai perskaičiuoja į maždaug 24 pikselius ir maždaug 18.5 pikselio paryškintam. Didelio teksto kontrastas gali būti mažesnis, nes raidės didesnės, o jų linijos platesnės. Būk atsargus(-i) su plonais šriftais: W3C teigimu, glotninimas plonus ar neįprastus šriftus gali padaryti blankesnius nei jiems nustatyta spalva. W3C rekomenduoja storesnius šriftus arba spalvų porą, aiškiai viršijančią minimumą.

Kam reikalavimai netaikomi

• Neaktyviems komponentams, pavyzdžiui, išjungtam mygtukui.
• Grynai dekoracijai ir tekstui, kurio niekas nemato.
• Tekstui, kuris yra logotipo ar prekės ženklo pavadinimo dalis.
• Atsitiktiniam tekstui paveikslėlyje su kitu reikšmingu turiniu, pavyzdžiui, gatvės ženklui nuotraukoje.

Dažnos klaidos

• Šviesiai pilka ant baltos. Pilka datoms, paaiškinimams ar antraeiliam tekstui dažnai būna per blyški: #999999 ant baltos pasiekia tik 2.84:1. Šviesiausia gryna pilka, atitinkanti AA įprastam tekstui ant baltos, yra #767676 su 4.54:1.
• Tekstas ant paveikslėlių. Kontrastas keičiasi su kiekviena nuotraukos dalimi. W3C fono paveikslėlius be pakankamo kontrasto nurodo kaip neatitiktį (F83). Dėk tekstą ant vientisos srities, patamsink paveikslėlį už jo arba tekstą dėk šalia paveikslėlio. Tikrink šviesiausią vietą už teksto.
• Vietos rezervavimo tekstas. Pilka užuomina tuščiame įvesties lauke yra tekstas, ir jam taikomas 1.4.3. Šviesiai pilka, pavyzdžiui, #9ca3af ant baltos, pasiekia tik 2.53:1. Vietos rezervavimo tekstas taip pat nepakeičia matomos etiketės.
• Užvedimo ir fokuso būsenos. Tekstas, kuris atsiranda ar pasikeičia užvedus pelę ar suteikus fokusą klaviatūra, turi atitikti tas pačias vertes. Užvedimo efektas neturi mažinti valdiklio kontrasto ar silpninti fokuso indikatoriaus. Pačiam sukurtam fokuso indikatoriui reikia 3:1 gretimo fono atžvilgiu.
• Baltas tekstas ant ryškių prekės ženklo spalvų. Oranžiniai, geltoni, šviesiai žali ar turkio mygtukai su baltu tekstu dažnai neatitinka: balta ant #ff6600 pasiekia 2.93:1.
• Blyškūs rėmeliai ir piktogramos. Jei rėmelis yra vienintelis dalykas, rodantis, kur yra įvesties laukas, jam reikia 3:1: #cccccc ant baltos turi 1.60:1. Piktogramoms, kurios turi reikšmę be teksto, pavyzdžiui, išskleidžiamojo sąrašo rodyklei ar uždarymo piktogramai, taip pat reikia 3:1.
• Tikrinama tik viena tema. Jei tavo svetainė turi tamsųjį režimą, jo spalvų poras patikrink atskirai. Spalva, kuri tinka ant baltos, ant tamsaus fono gali neatitikti.

Pataisyk prekės ženklo paletę neprarasdamas(-a) prekės ženklo

1. 1Užsirašyk kiekvieną spalvą su jos vaidmeniu: text, background, accent ar mygtukas, border. Daug problemų prasideda tada, kai viena spalva atlieka visus darbus.
2. 2Prekės ženklo spalvą palik ten, kur taisykles lengviau įvykdyti arba jos netaikomos: logotipe, didelėse srityse, dekoracijai ir didelėms antraštėms.
3. 3Tekstui ir mažiems elementams naudok tamsesnį ar šviesesnį to paties atspalvio toną. Jei keičiasi tik šviesumas, spalva lieka atpažįstama: baltas tekstas ant #c74f00, tamsesnės oranžinės, pasiekia 4.61:1.
4. 4Arba pakeisk teksto spalvą. Tamsus tekstas ant ryškios prekės ženklo spalvos dažnai tinka geriau nei baltas: #1a1a1a ant #ff6600 pasiekia 5.92:1.
5. 5Antraeiliam tekstui nustatyk vieną reikalavimus atitinkančią pilką, pavyzdžiui, #767676 ant baltos, ir naudok ją visur vietoj kelių blyškių pilkų.
6. 6Patikrink kiekvieną būseną: įprastą, užvedimo, fokuso, klaidos ir tamsųjį režimą. Galutines spalvas išsaugok kaip kintamuosius savo stilių faile, kad niekas vėl rankiniu būdu nepasirinktų blyškios spalvos.

Patikrink savo spalvas su Do4U

Spalvų kontrasto patikra apskaičiuoja šias vertes tavo spalvoms. Įvedi savo spalvas, po vieną eilutėje, ir kiekvienai priskiri vaidmenį: text, background, accent (pavyzdžiui, mygtukas) arba border. Kodas kiekvieną prasmingą porą patikrina pagal AA ir AAA įprastam ir dideliam tekstui bei pagal 3:1 rėmeliams, piktogramoms ir mygtukų sritims, neapvalindamas į didesnę pusę. Kiekvienai neatitinkančiai porai gauni artimiausią atitinkančią spalvą, vieną tamsesnę ir vieną šviesesnę, to paties atspalvio. Do4U taip pat sukuria pakoreguotą paletę, dar kartą ją patikrina kaip visumą ir eksportuoja kaip CSS pasirinktines ypatybes, SCSS arba JSON. Viskas veikia kode, be DI, o patikra nemokama.

Patikra žino tik tavo įvestas spalvų poras. Ji nemato šrifto dydžių, paveikslėlių už teksto, permatomumo ar užvedimo ir fokuso būsenų, todėl išbandyk ir galutinius puslapius. Do4U sukuria juodraštį, o tu tikrini ir sprendi.