Tutorial
Kako popraviti preslab kontrast boja
Ukratko
Normalan tekst treba omjer kontrasta najmanje 4.5:1 prema pozadini, velik tekst (od 24px, ili 18.66px podebljano) najmanje 3:1. Grafički elementi i stanja sučelja (rubovi, ikone, fokus) trebaju najmanje 3:1. Izmjeri omjer alatom za kontrast i zatamni boju dok vrijednost ne prođe.
Ukratko po koracima
Izmjeri omjer
Provjeri boju teksta i pozadine alatom za kontrast i očitaj omjer.
Odaberi prag
4.5:1 za normalan tekst, 3:1 za velik tekst (od 24px ili 18.66px podebljano).
Prilagodi boju
Zatamni tekst ili pojačaj pozadinu dok vrijednost ne dosegne prag.
Provjeri elemente sučelja
I rubovi, ikone i indikatori fokusa trebaju najmanje 3:1 (1.4.11).
Preslab kontrast daleko je najčešća automatski mjerljiva pogreška. Pogađa više od slijepih korisnika: na suncu, na jeftinim zaslonima ili sa slabovidnošću zbog dobi, svijetlosivi tekst na bijelom postaje nečitljiv. Dobra strana: kontrast je tvrd, deterministički mjerljiv kriterij.
Pragovi
| Sadržaj | Minimum (AA) |
|---|---|
| Normalan tekst (< 24px, ili < 18.66px podebljano) | 4.5:1 |
| Velik tekst (od 24px, ili od 18.66px podebljano) | 3:1 |
| Grafika i elementi sučelja (rubovi, ikone, fokus) | 3:1 |
Problem
/* #999999 auf #ffffff = 2.85:1 -> faellt durch (Minimum 4.5:1) */
.text {
color: #999999;
background: #ffffff;
}
/* Button-Rand kaum sichtbar: #e2e2e2 auf #ffffff = 1.2:1 */
.btn {
color: #ffffff;
background: #ffffff;
border: 1px solid #e2e2e2;
}#999999 na bijeloj daje samo 2.85:1, znatno ispod 4.5:1. Gumb ima rub, ali s 1.2:1 praktički je nevidljiv: pada na 1.4.11 (Kontrast ne-tekstualnog sadržaja).
Rješenje
/* #595959 auf #ffffff = 7:1 -> besteht deutlich */
.text {
color: #595959;
background: #ffffff;
}
/* Fuellung UND Rand tragen jetzt Kontrast:
Text #ffffff auf #1d4ed8 = 6.3:1, Rand vs. Umgebung >= 3:1 (1.4.11) */
.btn {
color: #ffffff;
background: #1d4ed8;
border: 1px solid #1d4ed8;
}#595959 na bijeloj daje 7:1, znatno iznad praga. Gumb sada nosi jaku ispunu, pa su i tekst i sam oblik zamjetljivi.
Ispravno mjerenje
- Mjeri stvarno prikazane boje, ne dizajnerske tokene: prozirnost i naslagani slojevi mijenjaju rezultat.
- Tekst preko slike je poseban slučaj: kontrast varira po slici. Stavi neprozirni sloj ili gradijent iza teksta.
- Tanko pismo (font-weight 300) djeluje slabijeg kontrasta nego što sam broj sugerira: u nedoumici zatamni.
Percelia mjeri kontrast na prikazanom DOM-u uključujući CSS, prijavljuje svaki manjak s točnom bojom i omjerom i može granični slučaj preko slike uputiti na ljudsku provjeru.
Povezani WCAG kriteriji
Česta pitanja
- Što se računa kao velik tekst?
- Od 24px normalno ili od 18.66px (14pt) podebljano. Za velik tekst dovoljno je 3:1 umjesto 4.5:1.
- Vrijedi li kontrast i za onemogućene elemente?
- Ne. Tekst u neaktivnim (disabled) kontrolama izuzet je od 1.4.3. Aktivni gumbi, poveznice i normalan tekst moraju ispuniti prag.
- Je li točno 4.5:1 dovoljno?
- Da, točno 4.5:1 prolazi. Ipak preporučujemo malu rezervu jer se prikazane boje mogu blago pomaknuti zbog zaglađivanja i zaslona.
Zatražite besplatno skeniranje
Recite nam svoju domenu — provodimo besplatno početno skeniranje i pokazujemo najvažnije prepreke.