A WCAG 2.1 / 2.2 kontrasztarányok működése
A webes akadálymentesítés egyik legfontosabb eleme a szöveges tartalom és a háttér közötti megfelelő vizuális elkülönülés. A Kontrasztellenőrző eszköz a WCAG 2.1 / 2.2 szabvány hivatalos képletét használja a színek közötti kontrasztarány kiszámítására. Ez a matematikai képlet a két szín relatív fénysűrűségét hasonlítja össze.
A számított kontrasztarány egy skálán mozog, ahol a legkisebb érték az 1:1 (amikor a szöveg és a háttér színe teljesen megegyezik, így nincs kontraszt), a maximális elérhető érték pedig a 21:1 (amely a tiszta fekete és a tiszta fehér színek párosításakor adódik). Az eszköz kezdeti beállítása a #4f46e5 szövegszínt és a #ffffff háttérszínt alkalmazza, ami pontosan 6.29 kontrasztarányt eredményez.
Színformátumok és bemeneti értékek
A Kontrasztellenőrző rugalmasan kezeli a webes tervezés során leggyakrabban használt színformátumokat. A bemeneti mezőkben az alábbi formátumok adhatók meg:
- Hexadecimális értékek: Például
#1a1a1a. - RGB értékek: Például
rgb(26, 26, 26). - HSL értékek: Például
hsl()formátumban megadott színkódok.
Ha a megadott érték nem felel meg a támogatott formátumoknak, az eszköz hibaüzenetet jelenít meg. Érvénytelen szövegszín esetén a következő figyelmeztetés látható: "Adjon meg egy érvényes szövegszínt, például: #1a1a1a or rgb(26, 26, 26).". Érvénytelen háttérszín megadásakor pedig az "Adjon meg egy érvényes háttérszínt, például: #ffffff vagy rgb(255, 255, 255)." hibaüzenet jelenik meg. Az interfészen található csere gomb segítségével a szöveg és a háttér színe egyetlen kattintással felcserélhető.
Megfelelőségi szintek és követelmények
A WCAG szabvány különböző kategóriákra és megfelelőségi szintekre (AA és AAA) osztja a kontrasztkövetelményeket a tartalom típusa és mérete alapján.
| Kategória | AA szintű követelmény | AAA szintű követelmény |
|---|---|---|
| Normál szöveg | Legalább 4.5:1 | Legalább 7:1 |
| Nagy szöveg | Legalább 3:1 | Legalább 4.5:1 |
| UI és grafika | Legalább 3:1 (egyetlen küszöbérték) | Nincs külön AAA szint |
A felhasználói felületek elemei és a grafikus komponensek (UI és grafika) esetében a szabvány nem tesz különbséget az AA és AAA szintek között; itt egyetlen 3:1 arányú küszöbértéknek kell teljesülnie a "Sikeres" minősítéshez.
A normál és a nagy szöveg meghatározása
Az akadálymentesítési irányelvek különbséget tesznek a szövegméretek között, mivel a nagyobb betűméret alacsonyabb kontraszt mellett is olvasható marad.
- Nagy szöveg: Minden olyan szöveg, amely legalább 18pt (körülbelül 24px) méretű, vagy félkövér (bold) szedés esetén eléri a legalább 14pt (körülbelül 18.5px) méretet.
- Normál szöveg: Minden olyan szöveges tartalom, amely nem éri el a fenti méreghatárokat.
Mivel a nagy szövegek könnyebben olvashatók, az AA szint eléréséhez elegendő a 3:1 arány, míg az AAA szinthez a 4.5:1 arány teljesítése.
Az eredmények és a végső értékelés értelmezése
Az eszköz valós időben elemzi a megadott színeket, és minden kategóriához hozzárendeli a "Sikeres" vagy "Sikertelen" jelölést. Az összesített eredmény alapján az alábbi szöveges értékelések (verdiktek) jelenhetnek meg:
- "Megfelel az AA és AAA szintnek normál szöveg esetén." – A színkombináció kiemelkedő kontrasztot biztosít, elérve a legszigorúbb követelményeket is.
- "Megfelel az AA szintnek normál szöveg esetén." – A színek teljesítik az általános akadálymentesítési elvárásokat normál méretű szövegeknél.
- "Csak nagy szöveg esetén felel meg az AA szintnek." – A kontraszt elegendő a nagyméretű vagy félkövér feliratokhoz, de a normál szövegekhez túl alacsony.
- "Az AA minimum alatt van — növelje a kontrasztot." – A színek közötti különbség nem éri el a minimálisan elvárt szintet, így a kombináció nem akadálymentes.
Adatkezelés és biztonság
A Kontrasztellenőrző használata során a megadott adatok teljes biztonságban vannak. Minden számítás és ellenőrzés közvetlenül a felhasználó böngészőjében fut le. Semmilyen beírt színkód, szöveg vagy egyéb adat nem kerül feltöltésre a BroBroGo szervereire.
Gyakran Ismételt Kérdések
Mit jelentenek az AA és AAA eredmények?
A legtöbb webhely az AA szintet célozza meg: ehhez normál szövegnél legalább 4.5:1, nagy szövegnél pedig 3:1 arány szükséges. Az AAA szint szigorúbb – normál szövegnél 7:1, nagy szövegnél pedig 4.5:1 arányt követel meg. A kontrasztarány 1:1-től (nincs kontraszt) egészen 21:1-ig (fekete a fehéren) terjedhet.
Mi számít nagy szövegnek?
A legalább 18pt (kb. 24px) méretű szövegek, vagy félkövér szedés esetén a legalább 14pt (kb. 18.5px) méretű szövegek számítanak nagynak. A nagyobb szövegek alacsonyabb kontraszt mellett is olvashatók maradnak, így a szigorúbb normál szöveghatárok helyett a nagyméretű szövegeknél az AA szinthez 3:1, az AAA szinthez pedig 4.5:1 arány is elegendő.
Milyen színformátumokat adhatok meg?
Beírhat hexadecimális értéket (pl. #1a1a1a), rgb() értéket (pl. rgb(26, 26, 26)) vagy hsl() értéket is – vagy kattintson bármelyik mintára a szín kiválasztásához. A csere gombbal felcserélheti a szöveg és a háttér színét.
Ez a WCAG 2 vagy az újabb APCA módszer?
Ez az eszköz a WCAG 2.1 / 2.2 képletet használja, amelyre az akadálymentesítési szabályok és auditok jelenleg hivatkoznak. Az APCA egy újabb, inkább az emberi érzékelésen alapuló módszer, amelyet még csak most dolgoznak ki a WCAG 3-hoz – ígéretes, de még nem hivatalos megfelelőségi szabvány, így az itt látható eredmények nem ezt használják.