Utilia

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.

Litur texta
Bakgrunnslitur
Birtuskilahlutfall
–

Niðurstöður WCAG 2.2

AAAAA
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ð)

Hnappur

Tillögur

Næsti textalitur sem stenst
–
Næsti bakgrunnslitur sem stenst
–

Hvernig á að nota birtuskilaprófarann

  1. 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 og navy.
  2. Birtuskilahlutfall uppfærist um leið og þú skrifar, frá 1:1 (engin birtuskil) upp í 21:1 (svart á hvítu).
  3. 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.
  4. 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.
  5. 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.