Hogyan használd?
- Írd be vagy válaszd ki a szövegszínt és a háttérszínt (hex, rgb(), hsl() is jó), vagy vedd fel a képernyőről a pipettával.
- Nézd meg az arányt és a táblázatot: AA normál szöveghez 4,5:1, nagy szöveghez és ikonhoz 3:1 kell.
- Ha nem felel meg, kattints a „Javítsd ki” sorban a javasolt színre.
- Próbáld ki az előnézetet színtévesztő szemmel is, majd másold ki a linket a kollégáidnak.
Mit mér a kontrasztarány?
A WCAG (Web Content Accessibility Guidelines) a két szín relatív fényerejét veti össze: (világosabb + 0,05) / (sötétebb + 0,05). Az eredmény 1:1 (két egyforma szín) és 21:1 (fekete a fehéren) között van.
| Szint | Normál szöveg | Nagy szöveg* | Ikon, keret, űrlapelem |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | – |
*Nagy szöveg: legalább 24 px, vagy 18,66 px félkövér (18 pt, illetve 14 pt).
Az arányt lefelé kerekítve mutatjuk két tizedesre. Így egy 4,499-es arány nem látszik „4,50”-nek, miközben valójában megbukik.
„Javítsd ki”: a legközelebbi megfelelő szín
A legtöbb ellenőrző csak annyit mond, hogy nem jó. Mi megkeressük azt a színt, amely a legkisebb változtatással megfelel: megtartjuk a színezetet és a telítettséget, és csak a világosságot mozgatjuk, sötétebb és világosabb irányba is. A kettő közül a közelebbit ajánljuk.
Javaslatot kapsz a szövegszínre és a háttérszínre is, AA-ra és AAA-ra külön. Így a márkaszín felismerhető marad, csak egy árnyalattal sötétebb vagy világosabb lesz.
Átlátszóság, színtévesztés, pipetta
- Átlátszó szín: a csúszkával megadhatod az előtér fedését. Ilyenkor a tényleges, háttérre rámosott színnel számolunk, ahogy a böngésző is kirajzolja.
- Színtévesztés-szimuláció: protanópia, deuteranópia, tritanópia és teljes színtévesztés (Machado–Oliveira–Fernandes-modell). A kontraszt a fényerőn múlik, ezért egy jó pár így is olvasható marad, de a „piros = hiba, zöld = rendben” jelzés nem.
- Pipetta: Chrome-ban és Edge-ben a képernyő bármely pontjáról felveheted a színt.
- Megosztható link: a két szín a link # részébe kerül, amit a böngésző el sem küld a szerverünknek.
Miért nem APCA?
Az APCA a WCAG 3 tervezetének kontrasztmodellje, és sok esetben pontosabban becsüli az olvashatóságot. Ma azonban nem szabvány: sem az EU akadálymentességi irányelve (EN 301 549), sem a magyar jogszabályok nem hivatkoznak rá. Ezért nálunk a WCAG 2.2 aránya dönt.
Gyakori kérdések
Mennyi kontraszt kell a szövegnek?
AA szinten normál szövegnél 4,5:1, nagy szövegnél 3:1. AAA szinten 7:1, illetve 4,5:1.
Mi számít nagy szövegnek?
Legalább 24 px-es normál, vagy legalább 18,66 px-es félkövér betű.
Kell-e kontraszt a gomboknak és ikonoknak?
Igen, a WCAG 1.4.11 szerint a felismeréshez szükséges grafikus elemeknek legalább 3:1 kell a környezetükhöz képest.
Ugyanazt az arányt adja, mint a WebAIM?
Igen, ugyanazzal a WCAG-képlettel számolunk, és két tizedesre lefelé kerekítünk.
Elküldi valahova a színeket?
Nem. Minden a böngésződben számolódik.