Kontrollues kontrasti

Kontrollues falas i kontrastit WCAG. Shkruaj ngjyrën e tekstit dhe të sfondit për raportin e kontrastit, rezultatet AA/AAA dhe ngjyrën më të afërt që kalon.

Ngjyra e tekstit

Ngjyra e sfondit

Raporti i kontrastit

–

Rezultatet WCAG 2.2

	AA	AAA
Tekst normal
Tekst i madh
Komponentë ndërfaqeje dhe grafika		–

Pamja paraprake

Tekst normal (16 px). Dhjetë dhelpra të shpejta kërcejnë mbi qenin e përtuar.

Tekst i madh (24 px)

Tekst i madh i trashë (18,66 px i trashë)

Buton

Sugjerime

Objektivi

Ngjyra më e afërt e tekstit që kalon

–

Ngjyra më e afërt e sfondit që kalon

–

Si ta përdorësh kontrolluesin e kontrastit

Shkruaj Ngjyrën e tekstit dhe Ngjyrën e sfondit. Përdor mostrat e ngjyrave ose shkruaj çdo vlerë CSS në fusha: një kod HEX si #595959, rgb(89 89 89), hsl(0 0% 35%) ose një emër si navy.
Raporti i kontrastit përditësohet ndërkohë që shkruan, nga 1:1 (pa kontrast) deri në 21:1 (e zeza mbi të bardhë).
Tabela Rezultatet WCAG 2.2 tregon Kalon ose Dështon për Tekst normal, Tekst i madh dhe Komponentë ndërfaqeje dhe grafika, në nivelet AA dhe AAA.
Shiko Pamjen paraprake: shfaq tekst normal, tekst të madh, tekst të madh të trashë, konturin e një butoni dhe një ikonë në dy ngjyrat e tua.
Nëse një nivel dështon, zgjidh një Objektiv te Sugjerime. Mjeti propozon Ngjyrën më të afërt të tekstit që kalon dhe Ngjyrën më të afërt të sfondit që kalon. Kliko Përdor për ta aplikuar njërën. Këmbe ngjyrat ndërron tekstin me sfondin.

Gjithçka llogaritet në shfletuesin tënd; asgjë nuk dërgohet askund.

Si llogaritet raporti i kontrastit

WCAG 2.x e përcakton raportin si (L1 + 0,05) / (L2 + 0,05), ku L1 është shkëlqimi relativ i ngjyrës më të çelët dhe L2 i më të errëtës. Shkëlqimi relativ llogaritet nga kanalet sRGB të linearizuara: çdo kanal dekodohet me kurbën e transferimit sRGB, pastaj L = 0,2126 R + 0,7152 G + 0,0722 B. E gjelbra peshon më shumë sepse syri ynë është më i ndjeshëm ndaj saj, prandaj një e gjelbër e pastër duket shumë më e ndritshme se një blu e pastër me të njëjtën “forcë”.

Raporti nuk rrumbullakohet kurrë lart. #777777 mbi të bardhë jep rreth 4,48:1 dhe dështon në AA për tekst normal, edhe pse duket si “4,5”. Ky mjet e ndërpret vlerën e shfaqur në dy shifra pas presjes, që ajo që sheh të jetë ajo që kontrollon WCAG.

Nëse ngjyra e tekstit është gjysmëtejdukshme (për shembull rgb(0 0 0 / 60%)), së pari përzihet me sfondin, siç do ta vizatonte shfletuesi. Tejdukshmëria në ngjyrën e sfondit shpërfillet, sepse ajo që ndodhet pas faqes nuk dihet.

Nivelet WCAG me një vështrim

Përmbajtja	AA	AAA
Tekst normal	4,5:1	7:1
Tekst i madh (24 px, ose 18,66 px i trashë)	3:1	4,5:1
Komponentë ndërfaqeje dhe grafika me kuptim	3:1	–

“Tekst i madh” do të thotë të paktën 18 pt (24 piksele CSS), ose 14 pt i trashë (rreth 18,66 px). Logot dhe tekstet thjesht dekorative nuk kanë kërkesë. Rregulli 3:1 për komponentët e ndërfaqes (kriteri 1.4.11) vlen për kornizat e fushave dhe butonave, treguesit e fokusit, ikonat dhe vijat e grafikëve që përdoruesit duhet t’i shohin.

Si funksionojnë sugjerimet

Ngjyrat e sugjeruara ruajnë nuancën dhe kromën e ngjyrës sate në hapësirën OKLCH dhe ndryshojnë vetëm ndriçimin, më të errët ose më të çelët, derisa të arrihet raporti objektiv. Pastaj mjeti zgjedh cilin nga dy drejtimet është vizualisht më afër ngjyrës origjinale, e matur në OKLab. Rezultati kontrollohet përsëri pas rrumbullakimit në kod HEX, kështu që kalon realisht. Nëse asnjë ndriçim nuk e arrin objektivin (7:1 përballë një gri të mesme, për shembull), mjeti e thotë këtë.

Rreth APCA

APCA (Accessible Perceptual Contrast Algorithm) është një model më i ri kontrasti që po shqyrtohet për një WCAG 3 të ardhshëm. Merr parasysh peshën e shkronjave, madhësinë dhe polaritetin (e errët mbi të çelët kundrejt të çelëtës mbi të errët). Është ende draft dhe nuk është kërkesë ligjore apo normative, prandaj ky mjet jep rezultate WCAG 2.x, që mbeten referenca për standardin evropian të aksesueshmërisë EN 301 549, Section 508 dhe shumicën e ligjeve.

Pyetje të shpeshta

Çfarë raporti kontrasti më duhet për tekstin kryesor?

Të paktën 4,5:1 për nivelin AA, që është niveli që kërkojnë shumica e ligjeve dhe politikave. Synoje 7:1 (AAA) për lexim të gjatë ose për audienca me shikim të dobët.

A kalon teksti i bardhë mbi ngjyrën e markës sime?

Shkruaj të bardhën si ngjyrë teksti dhe ngjyrën e markës si sfond. Shumë blu, portokalli dhe të gjelbra të mesme arrijnë vetëm 3:1: në rregull për tituj të mëdhenj dhe butona me etiketa të mëdha, jo për tekst të vogël. Përdor ngjyrën e sugjeruar të sfondit nëse të duhet AA për tekst normal.

Pse radha e ngjyrave nuk e ndryshon raportin?

Formula e pjesëton gjithmonë shkëlqimin më të madh me më të voglin, prandaj e errëta mbi të çelëtën dhe e çelëta mbi të errëtën japin të njëjtin raport. Kontrasti i perceptuar mund të ndryshojë prapë paksa, dhe ky është një nga problemet që përpiqet të zgjidhë APCA.

A mjafton 4,49:1 për të kaluar?

Jo. Pragjet WCAG janë minimume të rrepta: 4,49:1 dështon në AA për tekst normal. Përdor sugjerimin për të marrë një ngjyrë që kalon realisht.

A funksionon kontrolluesi për tekstin vendmbajtës ose të çaktivizuar?

Teksti vendmbajtës duhet të plotësojë të njëjtin minimum 4,5:1 kur përcjell informacion. Kontrollet e çaktivizuara përjashtohen nga kërkesat e kontrastit, por gjendjet e çaktivizuara të lexueshme ndihmojnë prapë përdoruesit.