5. osa · Kontrast

Kontrasti õppekeskus

Kontrast on veebis kõige levinum ligipääsetavuse viga — ja kõige lihtsam kontrollida. Muuda allolevaid värve ja vaata, kuidas tulemus muutub.

Kontrastiplats

Vali teksti ja tausta värv, määra suurus ja paksus ning vaata, kuidas sama paar käitub nuppudes, tekstis, linkides ja vormiväljadel.

Teksti värv

Taust

Kirja suurus: 16px

Rasvane tekst

Sinu enda tekst

Proovi eelseadet

Iga õppija väärib teksti, mida ta suudab tegelikult lugeda.

Peamine tegevusTeiseneTekstilink

E-posti aadress

Kontrastisuhe

4.54:1

Loetakse tavatekstiks

AA — kehatekst (4.5:1)Läbib

AAA — kehatekst (7:1)Ei läbi

AA — suur tekst (3:1)Läbib

Mittetekst: ääred, ikoonid, fookusrõngas (3:1)Läbib

Kuidas arv arvutatakse

WCAG võrdleb kahe värvi relatiivset heledust: (heledam + 0.05) / (tumedam + 0.05). Värvitooni see ei arvesta — kaks väga erinevat värvi võivad ikkagi läbi kukkuda.

Piirmäärad, mida tasub meelde jätta

WCAG kontrasti piirmäärad
Mis	AA	AAA
Tavatekst (alla 24px või alla 18.66px rasvane)	4.5:1	7:1
Suur tekst (24px+ või 18.66px+ rasvane)	3:1	4.5:1
Ikoonid, väljade ääred, fookusrõngad	3:1	3:1
Logod ja keelatud juhtelemendid	—	—

Keerulisemad juhtumid

Nõrk fookusnäidik

1px helehall joon valgel on umbes 1.4:1 — paljudele nähtamatu.

Tugev fookusnäidik

3px rõngas nihkega, vähemalt 3:1 nii nupu kui lehe suhtes.

Miks hea näide on parem

Piisav kontrast aitab kõiki: vaegnägijaid, vananevaid silmi, päikest telefoniekraanil, odavaid projektoreid.
Suurem ja paksem tekst vajab vähem kontrasti, seega kirjasuurus ja värvivalik käivad käsikäes.
Ääred, ikoonid ja fookusrõngad järgivad oma 3:1 reeglit, mis kipub meelest minema.

Mõju ligipääsetavusele

Vaegnägijad: Madala kontrastiga tekst pole lihtsalt raskem lugeda — see võib olla täiesti loetamatu.
Vanemad kasutajad: Kontrastitundlikkus väheneb vanusega, seega 4.5:1 on põrand, mitte eesmärk.
Kõik õues: Peegeldus mobiiliekraanil muudab 3:1 paari olematuks.

Praktiline järeldus

Kontrolli kontrasti värvide valimise ajal, mitte pärast avaldamist. Sihi kehatekstis 7:1, siis läbid ka siis, kui keegi kirjasuurust vähendab.

WCAG 2.2

1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast

EN 301 549 punktid: 9.1.4.3

See õppetükk avab enesehindamise ala — vaata järgmisena üle oma leht või materjalid.

Vaata üle — Värv ja kontrast

Kas said õppetüki läbi? Märgi see ära, et õpitee oleks ajakohane.