A WCAG kontraszt ellenőrzés néhány egyszerű lépésből áll. Semmi sem hagyja el a böngésződet.
- Megadsz egy előtér és egy háttér színt. Az eszköz értelmezi a hex, rgb(), hsl() vagy névleges CSS színeket.
- Minden RGB csatorna linearizálásra kerül az sRGB transzferfüggvény segítségével.
- A lineáris értékek súlyozásra kerülnek az emberi szem érzékenysége szerint — 0.2126 a piros, 0.7152 a zöld, 0.0722 a kék esetében.
- A kontrasztarány (L1 + 0.05) ÷ (L2 + 0.05), ahol L1 a világosabb szín fényereje és L2 a sötétebbé.
- Az arány összehasonlításra kerül a WCAG küszöbértékekkel: AA normál szöveg ≥ 4.5:1, AA nagy szöveg ≥ 3:1, AAA normál szöveg ≥ 7:1, AAA nagy szöveg ≥ 4.5:1.
FAQ
Gyakori kérdések a WCAG kontraszt ellenőrzésről.
Mi a különbség az AA és az AAA között?
Az AA a minimális megfelelési szint a legtöbb webes tartalomhoz. Legalább 4.5:1 kontrasztarányt követel meg normál szöveghez és 3:1-et nagy szöveghez. Az AAA magasabb szabvány, 7:1-et normál és 4.5:1-et nagy szöveghez.
Mi számít "nagy szövegnek" a WCAG alatt?
A WCAG 2.x szerint a nagy szöveg legalább 18 pontos (24px) normál súlyozású, vagy 14 pontos (kb. 19px) vastag súlyozású szöveg.
Miért felel meg a párom az AA Nagynak, de az AA Normálnak nem?
Mert az AA Nagy csak 3:1 arányt követel meg, míg az AA Normál 4.5:1-et. Egy 4.0:1-es színpár átesik az AA Nagyon de megbukik az AA Normálon.
Használhatom ezt az eszközt egyedül a hozzáférhetőségi auditáláshoz?
Ez az eszköz egy dolgot ellenőriz — a WCAG 2.x kontrasztarányt két szín között. A valódi hozzáférhetőség többet foglal magában.
Milyen színformátumokat fogad el a bemenet?
Beilleszthetsz 3, 4, 6 vagy 8 számjegyű hex kódokat, rgb() és rgba() értékeket, hsl() és hsla(), hsv(), hwb() és a CSS Color Module Level 4 által definiált 150 névleges CSS szín bármelyikét.