Birtuskilaprófari
Ókeypis WCAG birtuskilaprófari. Sláðu inn lit texta og bakgrunns og fáðu birtuskilahlutfallið, niðurstöður AA/AAA og næsta lit sem stenst.
Niðurstöður WCAG 2.2
| AA | AAA | |
|---|---|---|
| Venjulegur texti | ||
| Stór texti | ||
| Viðmótsþættir og grafík | – |
Forskoðun
Venjulegur texti (16 px). Kæmi ný öxi hér ykist þjófum nú bæði víl og ádrepa.
Stór texti (24 px)
Stór feitletraður texti (18,66 px feitletrað)
Tillögur
Hvernig á að nota birtuskilaprófarann
- Sláðu inn Litur texta og Bakgrunnslitur. Notaðu litasýnin eða sláðu inn hvaða CSS-gildi sem er í reitina: HEX-kóða eins og
#595959,rgb(89 89 89),hsl(0 0% 35%)eða nafn eins ognavy. - Birtuskilahlutfall uppfærist um leið og þú skrifar, frá 1:1 (engin birtuskil) upp í 21:1 (svart á hvítu).
- Taflan Niðurstöður WCAG 2.2 sýnir Stenst eða Fellur fyrir Venjulegur texti, Stór texti og Viðmótsþættir og grafík, á stigunum AA og AAA.
- Skoðaðu Forskoðun: hún sýnir venjulegan texta, stóran texta, stóran feitletraðan texta, útlínur hnapps og tákn í litunum þínum tveimur.
- Ef stig fellur skaltu velja Markmið undir Tillögur. Tólið leggur til Næsti textalitur sem stenst og Næsti bakgrunnslitur sem stenst. Smelltu á Nota til að beita einum. Víxla litum skiptir á texta og bakgrunni.
Allt er reiknað í vafranum þínum; ekkert er sent neitt.
Hvernig birtuskilahlutfallið er reiknað
WCAG 2.x skilgreinir hlutfallið sem (L1 + 0,05) / (L2 + 0,05), þar sem L1 er afstæður ljósstyrkur ljósari litarins og L2 þess dekkri. Afstæður ljósstyrkur er reiknaður úr línulegum sRGB-rásum: hver rás er afkóðuð með sRGB-ferlinum og síðan er L = 0,2126 R + 0,7152 G + 0,0722 B. Grænt vegur mest vegna þess að augu okkar eru næmust fyrir því, og þess vegna lítur hreint grænt út fyrir að vera miklu bjartara en hreint blátt af sama „styrk“.
Hlutfallið er aldrei námundað upp á við. #777777 á hvítu gefur um 4,48:1 og fellur á AA fyrir venjulegan texta, þótt það líti út fyrir að vera „4,5“. Þetta tól sker birt gildi niður í tvo aukastafi svo það sem þú sérð sé það sem WCAG athugar.
Ef textaliturinn er hálfgagnsær (til dæmis rgb(0 0 0 / 60%)) er honum fyrst blandað yfir bakgrunninn, eins og vafrinn myndi teikna hann. Gegnsæi í bakgrunnslit er hunsað, því óvíst er hvað liggur á bak við síðuna.
WCAG-stigin í hnotskurn
| Efni | AA | AAA |
|---|---|---|
| Venjulegur texti | 4,5:1 | 7:1 |
| Stór texti (24 px, eða 18,66 px feitletraður) | 3:1 | 4,5:1 |
| Viðmótsþættir og þýðingarmikil grafík | 3:1 | – |
„Stór texti“ þýðir að minnsta kosti 18 pt (24 CSS-pixlar), eða 14 pt feitletraður (um 18,66 px). Lógó og eingöngu skrautlegur texti hafa engin skilyrði. Regla 3:1 fyrir viðmótsþætti (árangursviðmið 1.4.11) gildir um ramma innsláttarreita og hnappa, fókusvísa, tákn og línur í línuritum sem notendur þurfa að sjá.
Hvernig tillögurnar virka
Litirnir sem lagðir eru til halda litblæ og litmettun þíns litar í OKLCH-rýminu og breyta aðeins ljósleikanum, dekkri eða ljósari, þar til markhlutfallinu er náð. Tólið velur síðan þá átt sem er sjónrænt næst upprunalega litnum þínum, mælt í OKLab. Niðurstaðan er athuguð aftur eftir námundun í HEX-kóða, svo hún stenst í raun. Ef enginn ljósleiki nær markmiðinu (til dæmis 7:1 á móti meðalgráum) segir tólið frá því.
Um APCA
APCA (Accessible Perceptual Contrast Algorithm) er nýrra birtuskilalíkan sem horft er til fyrir framtíðar WCAG 3. Það tekur tillit til þykktar letursins, stærðar og skautunar (dökkt á ljósu á móti ljósu á dökku). Það er enn í drögum og ekki lagaleg eða bindandi krafa, svo þetta tól birtir niðurstöður WCAG 2.x, sem eru áfram viðmiðið fyrir evrópska aðgengisstaðalinn EN 301 549, Section 508 og flest lög.
Algengar spurningar
Hvaða birtuskilahlutfall þarf ég fyrir meginmál?
Að minnsta kosti 4,5:1 fyrir stig AA, sem er stigið sem flest lög og reglur krefjast. Stefndu á 7:1 (AAA) fyrir langan lestur eða fyrir lesendur með skerta sjón.
Stenst hvítur texti á vörumerkislitnum mínum?
Sláðu inn hvítt sem textalit og vörumerkislitinn sem bakgrunn. Margir meðaldökkir bláir, appelsínugulir og grænir litir ná aðeins 3:1: í lagi fyrir stórar fyrirsagnir og hnappa með stórum texta, ekki fyrir smáan texta. Notaðu tillöguna að bakgrunnslit ef þú þarft AA fyrir venjulegan texta.
Hvers vegna breytir röð litanna ekki hlutfallinu?
Formúlan deilir alltaf ljósari ljósstyrknum með þeim dekkri, þannig að dökkt á ljósu og ljóst á dökku gefa sama hlutfall. Skynjað birtuskil getur þó verið örlítið ólíkt, og það er eitt af því sem APCA reynir að taka á.
Er 4,49:1 nógu nálægt til að standast?
Nei. WCAG-þröskuldar eru ströng lágmörk: 4,49:1 fellur á AA fyrir venjulegan texta. Notaðu tillöguna til að fá lit sem stenst í raun.
Virkar birtuskilaprófarinn fyrir ábendingartexta eða óvirkan texta?
Ábendingartexti (placeholder) verður að uppfylla sama lágmark 4,5:1 þegar hann miðlar upplýsingum. Óvirkir stjórnhlutir eru undanþegnir kröfum um birtuskil, en læsileg óvirk staða hjálpar notendum samt.
Tengd verkfæri
- Litaveljari Ókeypis litaveljari á netinu. Veldu hvaða lit sem er og afritaðu strax HEX-, RGB-, HSL-, HSV- og CMYK-kóða hans, með birtuskilum á hvítu og svörtu.
- Litblinduhermir Ókeypis litblinduhermir. Sjáðu hvaða mynd sem er með protanopiu, deuteranopiu, tritanopiu, vægari gerðum eða achromatopsiu, hlið við hlið eða með sleða.
- Ljósari og dekkri litir Búðu til ljósari og dekkri tóna hvaða lits sem er í 5, 10, 20 eða 25% skrefum, blandaða í OKLCH eða sRGB, og fluttu þá út sem CSS-breytur eða Tailwind.