Kontrasti (minimi)

Mitä kriteeri vaatii

Tekstin ja tekstiä sisältävien kuvien kontrastisuhteen täytyy olla vähintään 4,5:1 taustaan nähden. Suurelle tekstille — joksi määritellään 18 pt (24 px) normaalipainoinen tai 14 pt (18,66 px) lihavoitu — riittää 3:1. Suhde lasketaan etualan ja taustan suhteellisesta luminanssista. Logot, brändin nimet ja puhtaasti koristeellinen teksti on vapautettu vaatimuksesta. Passiiviset kontrollit on myös vapautettu, mutta huomio: poikkeus on kapeampi kuin suunnittelijat usein olettavat.

Miten vaatimus täytetään

• Ajetaan jokainen teksti-tausta-yhdistelmä kontrastintarkistimen läpi (axe DevTools, WebAIM, Stark, Figma-liitännäiset). Pyritään vähintään 4,5:1-suhteeseen.
• Lomakekenttien vaaleanharmaa paikkamerkintäteksti nostetaan vähintään 4,5:1-kontrastiin kentän taustan suhteen — paikkamerkintä on tekstiä.
• Auditoidaan tekstiä sisältävät hero-osiot kuvan päällä. Taustaväri vaihtelee pikselittäin, joten tarkistetaan pahin alue tai lisätään tumma peite.
• Dark modessa lasketaan jokainen suhde uudelleen — värireferenssit, jotka läpäisevät vaatimuksen valkoisella, epäonnistuvat usein lähes mustalla.
• Brändiväreihin, jotka eivät läpäise vaatimusta valkoisella, tummennetaan vain tekstivarianttia; alkuperäistä käytetään grafiikassa.
• Painikkeissa tekstin ja painikkeen taustan välinen kontrasti on ratkaiseva — ei painikkeen ja sivun välinen.

Yleisiä epäonnistumisia

• Lomakekenttien vaaleanharmaa ohjeteksti (#999 valkoisella = 2,85:1) — epäonnistuu selvästi.
• Valkoinen teksti brändivärisellä painikkeella, kun brändiväri on keskivärikylläinen (oranssi, keltavihreä, turkoosi).
• Hero-otsikoita kuvan päällä ilman tummennettu peite — kontrasti vaihtelee kuvassa ja putoaa usein alle 3:1.
• Paikkamerkintäteksti samassa värissä kuin kenttämerkintä mutta pienemmällä paksuudella — sivun heikkokontrasteellisin elementti.
• “Passiiviset” tai “poistetut käytöstä” painikkeet 2:1-kontrastilla, mikä on sallittua vain jos ne todella eivät ole interaktiivisia — mutta ne usein ovat silti taulukoitavissa, mikä rikkoo poikkeuksen.
• Dark mode -referenssit, jotka peilaavat light modea ilman suhteiden uudelleenlaskentaa — #bbb mustanharmaalla #222 on lähes vaatimusten mukainen mutta ei aivan.

Miksi kriteeri on tärkeä

1.4.3 on eniten mainittu yksittäinen epäonnistuminen WCAG-auditoinneissa, piste. Lighthouse, axe, Stark ja kaikki automatisoidut työkalut tunnistavat sen luotettavasti, joten se on myös halvin havaita. Korjaus on tavallisesti yksi suunnittelurefaktimuutos, joka leviää koko järjestelmään — tehdään kerran, testataan kerran, julkaistaan. Sen ohittaminen on lähes aina brändin ja saavutettavuuden välinen kompromissi, joka päättyy valitukseen.