Kontrasztellenőrző

A kontrasztellenőrző használata

1. Add meg a Szöveg színe és a Háttér színe értéket. Használd a színmintákat, vagy írj be bármilyen CSS-értéket a mezőkbe: HEX-kódot, például #595959-et, rgb(89 89 89)-et, hsl(0 0% 35%)-ot vagy nevet, például navy-t.
2. A Kontrasztarány gépelés közben frissül, 1:1-től (nincs kontraszt) 21:1-ig (fekete fehéren).
3. A WCAG 2.2 eredmények táblázat Megfelel vagy Nem felel meg értéket mutat a Normál szöveg, a Nagy szöveg és a Felületi elemek és grafikák esetén, AA és AAA szinten.
4. Nézd meg az Előnézetet: normál szöveget, nagy szöveget, nagy félkövér szöveget, gombkeretet és ikont mutat a két színeddel.
5. Ha egy szint nem teljesül, válassz Célt a Javaslatok alatt. Az eszköz felajánlja a Legközelebbi megfelelő szövegszínt és a Legközelebbi megfelelő háttérszínt. Kattints a Használat gombra az egyik alkalmazásához. A Színek felcserélése felcseréli a szöveget és a hátteret.

Minden a böngésződben számolódik; semmit nem küldünk el sehová.

Hogyan számolódik a kontrasztarány?

A WCAG 2.x az arányt (L1 + 0,05) / (L2 + 0,05) képlettel határozza meg, ahol L1 a világosabb szín, L2 a sötétebb szín relatív fénysűrűsége. A relatív fénysűrűséget a linearizált sRGB-csatornákból számítják: minden csatornát az sRGB átviteli görbével dekódolnak, majd L = 0,2126 R + 0,7152 G + 0,0722 B. A zöld nyom a legtöbbet, mert a szemünk arra a legérzékenyebb, ezért látszik egy tiszta zöld sokkal fényesebbnek, mint egy ugyanolyan „erősségű” tiszta kék.

Az arányt soha nem kerekítik fel. A #777777 fehéren körülbelül 4,48:1-et ad, és nem felel meg az AA szintnek normál szövegnél, pedig „4,5-nek” látszik. Ez az eszköz két tizedesre csonkolja a megjelenített értéket, így azt látod, amit a WCAG ellenőriz.

Ha a szöveg színe félig átlátszó (például rgb(0 0 0 / 60%)), előbb összekeverjük a háttérrel, ahogyan a böngésző is megrajzolná. A háttérszín átlátszóságát figyelmen kívül hagyjuk, mert nem tudhatjuk, mi van az oldal mögött.

A WCAG-szintek egy pillantásra

A „nagy szöveg” legalább 18 pontos (24 CSS-pixeles) vagy 14 pontos félkövér (kb. 18,66 px) szöveget jelent. A logókra és a tisztán díszítő szövegekre nincs követelmény. A felületi elemekre vonatkozó 3:1 szabály (1.4.11 sikerkritérium) a beviteli mezők és gombok szegélyeire, a fókuszjelzőkre, az ikonokra és azokra a diagramvonalakra vonatkozik, amelyeket a felhasználóknak látniuk kell.

Hogyan működnek a javaslatok?

A javasolt színek az OKLCH térben megtartják a színed árnyalatát és krómáját, és csak a világosságát változtatják, sötétebbre vagy világosabbra, amíg el nem érik a célarányt. Az eszköz ezután azt a két irány közül választja, amelyik vizuálisan közelebb van az eredeti színedhez, OKLab-ban mérve. Az eredményt a HEX-kódra kerekítés után újra ellenőrizzük, így valóban megfelel. Ha egyetlen világosság sem éri el a célt (például 7:1 egy közepes szürkével szemben), az eszköz ezt jelzi.

Az APCA-ról

Az APCA (Accessible Perceptual Contrast Algorithm) egy újabb kontrasztmodell, amelyet a jövőbeli WCAG 3-hoz fontolgatnak. Figyelembe veszi a betűvastagságot, a méretet és a polaritást (sötét világoson szemben világos sötéten). Még tervezet, és nem jogi vagy normatív követelmény, ezért ez az eszköz WCAG 2.x eredményeket jelez, amelyek továbbra is a viszonyítási alapot adják az EN 301 549 európai akadálymentességi szabványhoz, a Section 508-hoz és a legtöbb törvényhez.