UX / UI Magas hatás Egyszerű 20–40 perc

Szöveg kontrasztja a háttérhez képest

A szövegnek elegendő kontraszttal kell rendelkeznie (WCAG AA 4,5:1).

Mi ez

A kontraszt a szöveg és a háttér világossága közötti különbség. A világosszürke szöveg fehér háttéren alacsony kontrasztú és rosszul olvasható. A WCAG AA legalább 4,5:1 arányt követel a szokásos szöveghez.

Miért foglalkozzon vele

Az alacsony kontraszt kizárja a gyengénlátó felhasználókat és rontja az olvashatóságot mindenki számára, főleg mobilon napsütésben. Gyakori akadálymentességi hiányosság, és a Google jelzi az auditokban.

Hogyan csinálja

1Ellenőrizze a kontrasztarányt (böngészőbeli eszköz vagy online kontraszt-ellenőrző).
2A szokásos szövegnél célozzon ≥ 4,5:1-et, a nagy szövegnél ≥ 3:1-et.
3Kerülje a világosszürke szöveget (#ccc, #ddd) fehér háttéren.
4Ne tompítsa a szöveget túl alacsony átlátszósággal (opacity).

Példa

Rosszul

.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — olvashatatlan */

Helyesen

.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Összegzés

Az elegendő kontraszt az olvashatóság és az akadálymentesség alapja. A statikus heurisztikánk figyelmeztet a nyilvánvalóan világos színekre, de a pontos arányt ellenőrizze a böngészőben. A sötétebb szöveg világos háttéren (és fordítva) biztos választás.

Kapcsolódó témák