Aksesueshmëri

Kontrasti i ngjyrave

Raporti midis ngjyrës së tekstit dhe sfondit; mjeti nuk e mat — e shënon si kontroll që duhet bërë me dorë.

Çfarë është

Kontrasti është raporti midis ndriçimit të tekstit dhe atij të sfondit. Ai shprehet si numër nga 1:1 (e padukshme) deri 21:1 (e zezë mbi të bardhë).

Kërkesat e nivelit AA janë: 4,5:1 për tekst normal dhe 3:1 për tekst të madh (mbi 18 pt, ose 14 pt të trashë). Niveli AAA kërkon 7:1 dhe 4,5:1.

Kërkesa vlen edhe për komponentët jo-tekstualë — kufijtë e fushave, ikonat funksionale, treguesin e fokusit — me prag 3:1.

Matja kërkon të dyja ngjyrat e renderuara përfundimisht, pra pasi të jenë zbatuar të gjitha rregullat CSS, trashëgimia dhe shtresat.

Pse ka rëndësi

Kontrasti i ulët është një nga barrierat më të përhapura në ueb, dhe prek shumë më tepër njerëz sesa mendohet: jo vetëm ata me shikim të dobët, por këdo që lexon në diell, në një ekran të lirë, ose thjesht pas moshës dyzet.

Teksti gri i çelët mbi sfond të bardhë është zgjedhja estetike më e zakonshme dhe njëkohësisht dështimi më i zakonshëm. Ai duket elegant në ekranin e dizajnerit dhe i palexueshëm në telefonin e një klienti jashtë.

Rasti më i keq është te informacioni kritik: një njoftim gabimi me të kuqe të hapur mbi të bardhë, ose teksti i një butoni pagese. Aty mospërdorshmëria kthehet në humbje të drejtpërdrejtë.

Dhe një rast që harrohet gjithnjë: teksti mbi një imazh sfondi. Kontrasti ndryshon nga piksel në piksel dhe shpesh është i papranueshëm në gjysmën e sipërfaqes.

Si rregullohet

Mat me një mjet kontrasti, jo me sy. Mjetet e zhvilluesit të shfletuesit e tregojnë raportin te paneli i ngjyrave.
Fillo nga paleta, jo nga faqja. Përcakto çifte ngjyrash që e kalojnë pragun dhe përdor vetëm ato.
4,5:1 minimum për tekst normal, 3:1 për tekst të madh dhe për kufij e ikona.
Teksti mbi imazh ka nevojë për një shtresë të errët ose një kuti sfondi; mos u mbështet te imazhi.
Kontrollo gjendjet: :hover, :focus, :disabled dhe temën e errët kanë kontrast të vetin.
Treguesi i fokusit duhet të jetë i dukshëm — 3:1 kundrejt sfondit, dhe kurrë outline: none pa zëvendësim.

Si e mat ky mjet

Nuk e mat. AccessibilityAnalyzer::checkColorContrast() (services/AccessibilityAnalyzer.php:181) nuk lexon asnjë ngjyrë. Ai shton një kontroll te totali, i jep gjysmë pike (:185), dhe prodhon një konstatim informativ që thotë se kontrolli automatik i kontrastit ka saktësi të kufizuar dhe duhet përdorur një mjet i posaçëm (:186).

Ky konstatim shfaqet në çdo raport, për çdo faqe, pavarësisht përmbajtjes.

Çfarë NUK e mat

Ky nuk është kontroll; është kujtesë. Mjeti nuk ka asnjë të dhënë mbi ngjyrat: ai nuk e renderon faqen, nuk i zbaton rregullat CSS, dhe nuk i njeh ngjyrat e trashëguara apo shtresat.

Gjysma e pikës që i jep vetes te nota e aksesueshmërisë është e pamerituar — ajo shtohet pa u matur asgjë, dhe e ngre lehtë notën e përgjithshme.

Matja e vërtetë kërkon një motor renderimi. Ajo nuk mund të bëhet nga analiza statike e HTML-së, sepse ngjyra përfundimtare varet nga kaskada e plotë e CSS-së, nga gjendja e elementit dhe nga tema aktive. Nëse faqja jote ka nevojë për këtë matje, përdor një mjet që e hap faqen në shfletues.

Kodi që e kryen matjen

services/AccessibilityAnalyzer.php:181 — AccessibilityAnalyzer::checkColorContrast
services/AccessibilityAnalyzer.php:186 — contrast_check