Värvikontrast WCAG järgi: mida tähendab 4.5:1 ja kuidas saavutada?
Tahad teada, kuidas sinu enda leht seisab?
Küsi tasuta audititVärvi kontrast on #1 ligipääsetavuse viga maailmas. Selgitame matemaatika, näitame tööriistad ja anname disainerile praktilised soovitused.
Autor: Meiko Neuman
Asutaja ja veebistrateeg, Kodulehe Haldus
Miks kontrast on oluline?
WebAIM Million 2024 raporti järgi on madal kontrast 81% kodulehtede peamine viga – ja kõige lihtsam parandada.
Kontrast ei mõjuta ainult nägemispuudega inimesi. See aitab: - Vanemaid kasutajaid (40+ aastat, väsinud silmad) - Mobiilikasutajaid päikese käes - Värvipimedaid (8% meestest, Colour Blind Awareness)
WCAG nõuded
| Sisu tüüp | AA | AAA |
|---|---|---|
| Tavaline tekst (<18pt) | 4.5:1 | 7:1 |
| Suur tekst (≥18pt või 14pt bold) | 3:1 | 4.5:1 |
| UI elemendid, ikoonid | 3:1 | — |
| Logod | väljas | väljas |
Kuidas kontrastsust mõõdetakse?
Suhet 21:1 (must valgel) kuni 1:1 (sama värv). Valem on W3C dokumenteeritud:
(L1 + 0.05) / (L2 + 0.05)
kus L1 ja L2 on värvide relatiivne luminantsus.
Tööriistad
- WebAIM Contrast Checker – kõige populaarsem
- Coolors Contrast
- Chrome DevTools – Inspecti element → Styles → klõpsa värvil
- Stark – Figma plugin disaineritele
Tüüpilised vead
Hall tekst valgel `#999` valgel on **2.85:1** – läbikukkunud. Kasuta **#767676** (4.54:1).
Sinine link valgel `#0066CC` on 5.74:1 – ok. Aga lihtsalt sinine `#0000FF` on 8.59:1 – paremini.
Disclaimers ja "fine print" Väike hall tekst footeris on klassika. Tee see vähemalt **#595959** (7:1) valgel.
Buttonid gradiendiga Kui tekst on gradiendi peal, mõõda kontrast **mõlema otsa** suhtes.
Mis siis, kui brändivärvid ei vasta?
Sagedasim mure: "meie pruun/oranž bränd ei lähe valgega kokku."
Lahendused: 1. Tumesta värvi ainult tekstile – brand jääb, tekstil on tumedam variatsioon 2. Kasuta värvi taustana – tekst valgel taustal, värv jääb aktsendiks 3. Lisa varjud või kontuuri – nuppudel, päises 4. Loo tonaalne palett – meie B2B kodulehe strateegia artikkel selgitab
Praktiline tegevuskava
- Auditi praegune leht WAVE-iga
- Tee Excel-tabel kõigist värvide paaridest
- Paranda kriitilised (alla 3:1)
- Lisa CSS muutujad ligipääsetavate variantide jaoks
- Dokumenteeri disain-süsteemi reeglitena
Loe ka WCAG 2.2 juhend ja veebi disaini trendid 2026.
Vajad värvi paleti auditeerimist? Vaata kodulehe disaini teenust.
Vajad abi oma kodulehega?
Meie meeskond hooldab, optimeerib ja kaitseb sinu kodulehte. Hinna lepime kokku mahu järgi.
Küsi pakkumistArtikli autor
Meiko Neuman — Asutaja ja veebistrateeg, Kodulehe Haldus. Meiko juhib Kodulehehalduse tiimi ja on üle kümne aasta aidanud Eesti ettevõtetel kodulehti hallata, optimeerida ja müügitulemusi parandada. Kirjutab kodulehe haldusest, SEO-st, AEO/GEO-st ja veebi ärilisest poolest.