Használata
- Adja meg a szöveg (előtér) színét és a háttérszínt HEX, rgb(), hsl() vagy más CSS formátumban, vagy használja a színválasztókat.
- Olvassa le a kontrasztarányt, valamint hogy az egyes WCAG-követelményeknek megfelel-e.
- Ha egy követelmény nem teljesül, válasszon célt, és alkalmazza a javasolt színt, amely megtartja a színárnyalatot, és csak a világosságot változtatja.
- A „Csere” gombbal ellenőrizheti a fordított kombinációt, például világos szöveget sötét gombon.
Hogyan működik
Az arány a WCAG 2.2 meghatározását követi: minden szín relatív luminanciája az sRGB csatornáiból számítandó, az arány pedig (világosabb + 0,05) ÷ (sötétebb + 0,05). Értéke 1:1 (azonos színek) és 21:1 (fekete fehéren) között mozog.
Ellenőrzött követelmények: az 1.4.3-as sikerkritérium (AA) normál szövegnél 4,5:1, nagy szövegnél 3:1 arányt ír elő; az 1.4.6 (AAA) 7:1, illetve 4,5:1 arányt; az 1.4.11 pedig 3:1 arányt a felhasználói felület részeinél és a jelentéssel bíró grafikáknál, például beviteli mezők szegélyénél és ikonoknál. A nagy szöveg legalább 24px normál vagy körülbelül 18,66px félkövér. A WCAG nem engedi a felfelé kerekítést, így a 4,49:1 sem felel meg AA-nak, még ha közel is van; az itt megjelenő arány csonkolt, nem kerekített.
A javaslat a szövegszín árnyalatát és krómáját OKLCH-ban tartja, és megkeresi a legközelebbi világosságértéket – sötétebbet vagy világosabbat –, amely eléri a célt. A kontrasztarány az olvashatóság egyik összetevője: a betűvastagság, a betűméret és a színlátás eltérései is számítanak, a WCAG 2.2 pedig a legtöbb akadálymentesítési jogszabály által hivatkozott aktuális W3C ajánlás.
Példák
Szürke szöveg, amely majdnem átmegy
A #777777 fehéren 4,48:1 arányt ad. Ez nagy szövegnél és felületi elemeknél megfelel, de normál szövegnél nem teljesíti az AA szintet. A legközelebbi megfelelő szürke körülbelül #767676, amely eléri a 4,54:1 arányt.
Fehér szöveg márkaszínű gombon
A fehér #ff8800-on körülbelül 2,4:1 arányt ad, ami még a 3:1 nagy szövegre vonatkozó szintet sem teljesíti. A szokásos megoldás a narancs sötétítése vagy sötét szöveg használata; a javaslat megmutatja, milyen sötétnek kellene lennie a szövegszínnek.
Űrlapmező szegélyének ellenőrzése
A világosszürke #cccccc szegély fehéren körülbelül 1,6:1. Az 1.4.11-es kritérium szerint a beviteli mezőt azonosító szegélynek 3:1 arányúnak kell lennie, ezért körülbelül #949494 vagy sötétebb szükséges.
Gyakori kérdések
Milyen kontrasztarányra van szükségem a WCAG AA-hoz?
Normál törzsszövegnél 4,5:1, nagy szövegnél 3:1 (24px vagy 18,66px félkövér), felhasználói felületi elemeknél és jelentéssel bíró grafikáknál pedig 3:1. Az AAA normál szövegnél 7:1-re, nagy szövegnél 4,5:1-re emeli a követelményt.
A logószövegnek vagy a letiltott gomb szövegének is meg kell felelnie?
Nem. A WCAG mentesíti a logókban és márkanevekben szereplő szöveget, a tisztán dekoratív szöveget és az inaktív (letiltott) felhasználói felületi elemekben lévő szöveget.
Miért tér el kissé az eredményem egy másik ellenőrzőtől?
Egyes eszközök egy tizedesjegyre kerekítik az arányt, vagy felfelé kerekítenek. A WCAG a pontos értéket veszi figyelembe, ezért ez az eszköz két tizedesjegyre csonkol. Apró eltérések az alfa-csatornával megadott színekből is adódhatnak.
Mi a helyzet az új APCA kontrasztmódszerrel?
Az APCA egy másik módszer, amelyet egy jövőbeli WCAG-verzióhoz javasoltak. Nem része a WCAG 2.2-nek, amelyet ez az eszköz mér, és amelyre a jelenlegi akadálymentességi szabályok hivatkoznak.
Adatvédelem
A színek ellenőrzése a böngészőjében történik. Semmi nem kerül feltöltésre vagy tárolásra.