Ingyenes eszköz
Contrast Checker
Írd be a szöveg és a háttér színét bármilyen formában — hex, rgb(), hsl() vagy színnév — és megmondom, átmegy-e a WCAG AA / AAA vizsgálaton.
Hogy kell kiszámolni?
A kontrasztarány két szín világosságának — pontosabban relatív luminanciájának — az aránya. Értéke 1:1-től 21:1-ig terjed, a számítás módját pedig a WCAG 2.x szabvány határozza meg.
Relatív luminancia
Először minden színcsatornát visszaalakítunk az sRGB gammából (linearizáljuk), majd a három csatornát súlyozottan összeadjuk. A zöld kapja a legnagyobb súlyt, mert az emberi szem erre a legérzékenyebb — ezért tűnik egy élénk sárga sokkal világosabbnak, mint egy hasonló értékű kék.
L = 0.2126·R + 0.7152·G + 0.0722·BA kontrasztarány
A világosabb szín luminanciáját elosztjuk a sötétebbével. A képletben szereplő 0.05 a környezeti fény és a kijelző tökéletlenségeit közelíti, ezért a maximális arány 21:1.
arány = (Lvilágos + 0.05) / (Lsötét + 0.05)Miért problémás a sárga?
A sárga különösen trükkös szín. Fehér szöveg élénk sárga háttéren (#f5a524) csak ~2:1 kontrasztot ad, így megbukik az akadálymentességi követelményeken. Ugyanez a sárga sötét szöveggel már ~9:1. A sárga eleve világos szín, így a világos szövegnek kevés „tartaléka” marad a megkülönböztetéshez.