Krāsu kontrasts tekstam, pogām un ikonām

Kāpēc kontrasts ir svarīgs

Blāvs teksts maksā lasītājus. Cilvēkiem ar vāju redzi, vecākiem lasītājiem un ikvienam, kas skatās telefonā spilgtā gaismā, vajadzīga skaidra atšķirība starp tekstu un fonu. Tāpēc W3C tīmekļa satura piekļūstamības vadlīnijas (WCAG) nosaka minimālās vērtības tekstam, vadīklām, piemēram, pogām un ievades laukiem, kā arī ikonām un grafikai. Tās var izmērīt un pārbaudīt pirms palaišanas.

Kā darbojas kontrasta attiecība

Kontrasta attiecība salīdzina, cik gaišas ir divas krāsas. WCAG skatās nevis uz toni, bet uz relatīvo spilgtumu: vērtību no 0 tumšākajam melnajam līdz 1 gaišākajam baltajam. Trīs kanālus – sarkano, zaļo un zilo – pārrēķina un izsver: zaļais skaitās visvairāk, sarkanais mazāk un zilais vismazāk. Attiecība ir (L1 + 0.05) / (L2 + 0.05), kur L1 ir gaišākās krāsas spilgtums. Rezultāts ir starp 1:1 divām vienādām krāsām un 21:1 melnam uz balta.

Praksē svarīgi ir divi W3C noteikumi. Pirmkārt, vērtības netiek noapaļotas: attiecība 4.499:1 neatbilst robežai 4.5:1. Otrkārt, kontrastu mēra pret fonu, kas iestatīts tekstam. Ja lapa iestata tikai teksta krāsu un nekādu fona krāsu, W3C to uzskata par neatbilstību, jo apmeklētāja noklusējuma fons nav zināms. Vienmēr iestati abas krāsas kopā.

Trīs veiksmes kritēriji

• 1.4.3 Kontrasts (minimālais), AA līmenis: tekstam un teksta attēliem vajadzīgs vismaz 4.5:1, lielam tekstam vismaz 3:1.
• 1.4.6 Kontrasts (uzlabotais), AAA līmenis: tekstam vajadzīgs vismaz 7:1, lielam tekstam vismaz 4.5:1. Tas ir stingrākais līmenis un visvairāk palīdz ar gariem tekstiem.
• 1.4.11 Neteksta kontrasts, AA līmenis: vismaz 3:1 pret blakus esošajām krāsām visam, kas jāredz, lai atpazītu vadīklu un tās stāvokli (piemēram, ievades lauka apmalei vai fokusa indikatoram), un tām grafikas daļām, kas vajadzīgas satura izpratnei, piemēram, ikonām vai līnijām diagrammā.

Kas skaitās liels teksts

Liels teksts ir vismaz 18 punktu vai vismaz 14 punktu treknrakstā. W3C to pārrēķina aptuveni 24 pikseļos un aptuveni 18.5 pikseļos treknrakstā. Lielam tekstam drīkst būt mazāks kontrasts, jo burti ir lielāki un to līnijas platākas. Uzmanies ar plāniem fontiem: pēc W3C teiktā, nogludināšana (anti-aliasing) var likt plāniem vai neparastiem fontiem izskatīties blāvākiem par to noteikto krāsu. Tas iesaka biezākus fontus vai krāsu pāri, kas ir skaidri virs minimuma.

Kam nav jāatbilst

• Neaktīviem komponentiem, piemēram, atspējotai pogai.
• Tīrai dekorācijai un tekstam, ko neviens nevar redzēt.
• Tekstam, kas ir daļa no logotipa vai zīmola nosaukuma.
• Nejaušam tekstam attēlā ar citu nozīmīgu saturu, piemēram, ielas zīmei fotogrāfijā.

Biežas kļūdas

• Gaiši pelēks uz balta. Pelēkais datumiem, parakstiem vai sekundāram tekstam bieži ir pārāk blāvs: #999999 uz balta sasniedz tikai 2.84:1. Gaišākais tīri pelēkais, kas uz balta atbilst AA parastam tekstam, ir #767676 ar 4.54:1.
• Teksts uz attēliem. Kontrasts mainās ar katru fotogrāfijas daļu. W3C fona attēlus bez pietiekama kontrasta min kā neatbilstību (F83). Novieto tekstu uz vienkrāsainas virsmas, aptumšo attēlu aiz tā vai novieto tekstu blakus attēlam. Pārbaudi gaišāko vietu aiz teksta.
• Vietturu teksts. Pelēkā norāde tukšā ievades laukā ir teksts, un uz to attiecas 1.4.3. Gaiši pelēks, piemēram, #9ca3af uz balta, sasniedz tikai 2.53:1. Vietturis arī neaizstāj redzamu etiķeti.
• Hover un fokusa stāvokļi. Tekstam, kas parādās vai mainās, kad virs tā novieto peli vai tam piešķir tastatūras fokusu, jāatbilst tām pašām vērtībām. Hover efekts nedrīkst samazināt vadīklas kontrastu vai vājināt fokusa indikatoru. Paša veidotam fokusa indikatoram vajadzīgs 3:1 pret blakus esošo fonu.
• Balts teksts uz spilgtām zīmola krāsām. Oranžas, dzeltenas, gaiši zaļas vai tirkīza pogas ar baltu tekstu bieži neatbilst: balts uz #ff6600 sasniedz 2.93:1.
• Blāvas apmales un ikonas. Ja apmale ir vienīgais, kas parāda, kur ir ievades lauks, tai vajadzīgs 3:1: #cccccc uz balta ir 1.60:1. Arī ikonām, kas nes nozīmi bez teksta, piemēram, nolaižamās izvēlnes bultai vai aizvēršanas ikonai, vajadzīgs 3:1.
• Pārbaudīta tikai viena tēma. Ja tavai vietnei ir tumšais režīms, pārbaudi tā krāsu pārus atsevišķi. Krāsa, kas darbojas uz balta, var neatbilst uz tumša fona.

Izlabo zīmola paleti, nezaudējot zīmolu

1. 1Pieraksti katru krāsu ar tās lomu: teksts, fons, akcents vai poga, apmale. Daudzas problēmas sākas, kad viena krāsa dara visus darbus.
2. 2Paturi zīmola krāsu tur, kur noteikumus ir vieglāk izpildīt vai tie neattiecas: logotipā, uz lielām virsmām, dekorācijai un lieliem virsrakstiem.
3. 3Tekstam un maziem elementiem izmanto tumšāku vai gaišāku tā paša toņa nokrāsu. Ja mainās tikai gaišums, krāsa paliek atpazīstama: balts teksts uz #c74f00, tumšākas oranžas, sasniedz 4.61:1.
4. 4Vai tā vietā nomaini teksta krāsu. Tumšs teksts uz spilgtas zīmola krāsas bieži darbojas labāk nekā balts: #1a1a1a uz #ff6600 sasniedz 5.92:1.
5. 5Nosaki vienu pelēko sekundāram tekstam, kas atbilst, piemēram, #767676 uz balta, un izmanto to visur vairāku blāvu pelēko vietā.
6. 6Pārbaudi katru stāvokli: parasto, hover, fokusa, kļūdas un tumšo režīmu. Saglabā galīgās krāsas kā mainīgos savā stila lapā, lai neviens vairs manuāli neizvēlētos blāvu krāsu.

Pārbaudi savas krāsas ar Do4U

Krāsu kontrasta pārbaude aprēķina šīs vērtības tavām krāsām. Tu ievadi savas krāsas, vienu rindā, un katrai piešķir lomu: teksts, fons, akcents (piemēram, poga) vai apmale. Kods pārbauda katru saprātīgu pāri pret AA un AAA parastam un lielam tekstam un pret 3:1 apmalēm, ikonām un pogu virsmām, nenoapaļojot uz augšu. Katram pārim, kas neatbilst, tu saņem tuvāko atbilstošo krāsu – vienreiz tumšāku un vienreiz gaišāku – tajā pašā tonī. Do4U arī izveido pielāgotu paleti, vēlreiz pārbauda to kopumā un eksportē kā CSS pielāgotos rekvizītus, SCSS vai JSON. Viss darbojas kodā, bez AI, un pārbaude ir bezmaksas.

Pārbaude zina tikai tos krāsu pārus, ko tu ievadi. Tā neredz fontu izmērus, attēlus aiz teksta, caurspīdīgumu vai hover un fokusa stāvokļus, tāpēc pārbaudi arī gatavās lapas. Do4U izveido melnrakstu, tu pārbaudi un izlem.