Kontrollues Falas i Kontrastit të Ngjyrave

Testoni kombinimet e ngjyrave të tekstit dhe sfondit për pajtueshmëri aksesueshmërie WCAG 2.1. Merrni rezultate kalim/dështim menjëherë për standardet AA dhe AAA — pa regjistrim.

94,217+ kontrolle kontrasti të kryera

Raporti i Kontrastit

17.06:1

Pamje paraprake e Tekstit të Madh (24px)

Pamje paraprake e tekstit normal të trupit (16px). Dhelpra e shpejtë kafe kërcen mbi qenin dembel. Ky shembull tregon se si duket kombinimi juaj i ngjyrave në madhësinë tipike të tekstit të trupit.

Tekst i vogël (14px) — shpesh përdoret për titrat, shënimet dhe meta-të dhënat.

I përmbysur: sfond mbi ngjyrën e tekstit (17.06:1 — i njëjti raport)

Tekst Normal AA

Kërkon 4.5:1

KALON

Tekst i Madh AA

Kërkon 3:1

KALON

Tekst Normal AAA

Kërkon 7:1

KALON

Tekst i Madh AAA

Kërkon 4.5:1

KALON

Gati për të ndërtuar një faqe interneti të aksesueshme me këto ngjyra?

Ndërtoni me këto ngjyra

Çfarë Është një Kontrollues i Kontrastit të Ngjyrave?

Një kontrollues i kontrastit të ngjyrave është një mjet që mat ndryshimin e ndriçimit midis dy ngjyrave — zakonisht teksti i parëplanit dhe sfondi i tij — dhe llogarit një raport kontrasti sipas Udhëzimeve të Aksesueshmërisë së Përmbajtjes Web (WCAG). Ky raport përcakton nëse kombinimi juaj i ngjyrave është i lexueshëm për njerëzit me dëmtime vizuale, duke përfshirë verbërinë ndaj ngjyrave dhe shikimin e dobët.

Kontrolluesi i kontrastit të Kleap llogarit menjëherë raportin e kontrastit WCAG 2.1 dhe e teston ndaj të gjitha katër niveleve të pajtueshmërisë: Tekst Normal AA (4.5:1), Tekst i Madh AA (3:1), Tekst Normal AAA (7:1) dhe Tekst i Madh AAA (4.5:1). Nëse ngjyrat tuaja dështojnë, mjeti sugjeron alternativën më të afërt të aksesueshme që mund të rregulloni problemet e aksesueshmërisë pa ristilizuar të gjithë paletën tuaj të ngjyrave.

Shpjegimi i Niveleve të Kontrastit WCAG

Tekst Normal AA

Minimumi 4.5:1

Kërkon një raport kontrasti minimal 4.5:1. Ky është objektivi më i zakonshëm i pajtueshmërisë dhe zbatohet për tekstin e trupit nën 18pt (ose 14pt të trashë).

Tekst i Madh AA

Minimumi 3:1

Kërkon një raport kontrasti minimal 3:1. Zbatohet për tekstin që është të paktën 18pt (24px) ose 14pt të trashë (18.66px të trashë).

Tekst Normal AAA

Minimumi 7:1

Standardi më i lartë, që kërkon raport kontrasti 7:1. Siguron lexueshmëri për përdoruesit me shikim disi të dobët (rreth 20/80).

Tekst i Madh AAA

Minimumi 4.5:1

Kërkon 4.5:1 për tekst të madh në nivelin AAA. Ofron lexueshmëri të zgjeruar për titujt dhe tekstin e ekspozimit.

Këshilla për Dizajnin e Ngjyrave të Aksesueshme

1

Filloni me kontrastin

Zgjidhni ngjyrat e tekstit dhe sfondit me kontrastin parasysh që nga fillimi. Shtimi retroaktiv i aksesueshmërisë është shumë më i vështirë se ndërtimi i tij që në fillim.

2

Mos u mbështetni vetëm në ngjyrë

Përdorni ikona, modele, nënvizime ose etiketa së bashku me ngjyrën për të përcjellë kuptim. Rreth 8% e burrave kanë ndonjë formë verbërie ndaj ngjyrave.

3

Testoni në pajisje reale

Ngjyrat duken ndryshe në monitore, telefona dhe në dritën e fortë të diellit. Testoni raportet e kontrastit tuaj në pajisjet aktuale, jo vetëm në mjetin tuaj të dizajnit.

4

Kontrolloni edhe modalitetin e errët

Nëse faqja juaj mbështet modalitetin e errët, verifikoni raportet e kontrastit për të dy temat. Një çift ngjyrash që kalon në modalitetin e ndritshëm mund të dështojë në modalitetin e errët.

5

Kini parasysh peshën e fontit

Peshat e holla dhe të lehta të fontit zvogëlojnë kontrastin e perceptuar. Nëse përdorni pesha nën 400, synoni një raport kontrasti më të lartë se minimumi.

6

Kontrolloni gjendjet ndërvepruese

Gjendjet hover, focus dhe active shpesh përdorin ngjyra të ndryshme. Sigurohuni që të gjitha gjendjet ndërvepruese plotësojnë kërkesat e kontrastit, jo vetëm ajo e parazgjedhur.

Krahasimi i Kontrolluesit të Kontrastit

VeçoriKleapWebAIMCoolorsAdobe Color
ÇmimiFalasFalasFreemiumFalas (me llogari Adobe)
Pamje Paraprake në Kohë RealePo, tekst i gjallë mbi sfondPo, bazëPoPo
Ngjyra Më e Afërt e AksesueshmePo, e sugjeruar automatikishtJoJoPjesërisht
Nivelet WCAG të TestuaraAA + AAA (normal + i madh)AA + AAAVetëm AAAA + AAA
Ndërtues i Integruar i FaqevePo, i fuqizuar nga AIJoJoJo
Butoni Ndërrimit të NgjyravePoJoJoJo
Çift i Rastësishëm i AksesueshëmPoJoJoJo

Pyetjet e Bëra Shpesh

Çfarë është një raport kontrasti ngjyrash?+
Një raport kontrasti ngjyrash është një vlerë numerike që përfaqëson ndryshimin në ndriçim (ndriçimin e perceptuar) midis dy ngjyrave. Varion nga 1:1 (pa kontrast, ngjyra identike) deri në 21:1 (kontrast maksimal, e zezë mbi të bardhë). Raporti llogaritet duke përdorur formulën e ndriçimit relativ WCAG 2.1, e cila merr parasysh mënyrën se si syri njerëzor percepton gjatësi të ndryshme dallgësh të dritës.
Çfarë raporti kontrasti WCAG kam nevojë?+
Për pajtueshmëri WCAG 2.1 Niveli AA (standardi më i kërkuar gjerësisht), teksti normal i trupit ka nevojë për të paktën 4.5:1 kontrast, dhe teksti i madh (18pt+ ose 14pt+ të trashë) ka nevojë për të paktën 3:1. Për Nivelin AAA (standardi më i lartë), teksti normal ka nevojë për 7:1 dhe teksti i madh ka nevojë për 4.5:1. Shumica e kërkesave ligjore të aksesueshmërisë referojnë Nivelin AA.
Çfarë konsiderohet tekst i madh në WCAG?+
Teksti i madh në WCAG përkufizohet si tekst që është të paktën 18 pikë (24 pikselë CSS) ose 14 pikë të trashë (rreth 18.66 pikselë CSS të trashë). Kjo korrespondon me rreth tekstin me madhësi titulli. Teksti i madh ka kërkesa më të ulëta kontrasti sepse madhësia e tij më e madhe e bën natyrshëm më të lehtë për t'u lexuar.
A zbatohet WCAG për imazhet dhe ikonat?+
Po, Kriteri i Suksesit 1.4.11 i WCAG 2.1 kërkon që komponentët e ndërfaqes së përdoruesit (si ikonat, kufijtë e formave dhe treguesit e fokusit) dhe objektet grafike të kenë të paktën 3:1 kontrast ndaj ngjyrave ngjitur. Kjo është e ndarë nga kërkesat e kontrastit të tekstit dhe u prezantua në WCAG 2.1.
Si llogaritet raporti i kontrastit?+
Raporti i kontrastit përdor formulën e ndriçimit relativ: (L1 + 0.05) / (L2 + 0.05), ku L1 është ndriçimi i ngjyrës më të ndritshme dhe L2 është i ngjyrës më të errët. Ndriçimi relativ llogaritet duke konvertuar vlerat sRGB në dritë lineare (duke përdorur korrigjimin gamma) dhe duke i peshuar ato: 0.2126*R + 0.7152*G + 0.0722*B. Peshat reflektojnë ndjeshmërinë e syrit njerëzor — ne perceptojmë të gjelbrin si më të ndritshmin.
A është WCAG AA e mjaftueshme për faqen time të internetit?+
WCAG AA është standardi i referuar nga shumica e ligjeve të aksesueshmërisë në mbarë botën, duke përfshirë ADA (SHBA), EAA (BE) dhe EN 301 549 (Europë). Për shumicën e faqeve të internetit dhe aplikacioneve, pajtueshmëria AA është si ligjërisht e mjaftueshme ashtu edhe ofron lexueshmëri të mirë. AAA rekomandohet për faqet qeveritare, kujdesin shëndetësor dhe arsimin, por nuk kërkohet zakonisht me ligj.
Çfarë bëj nëse ngjyrat e markës sime dështojnë në kontrast?+
Keni disa opsione: rregulloni pak nuancën e ngjyrës suaj të markës (shpesh një ndryshim i vogël i ndriçimit është i mjaftueshëm), përdorni ngjyrën e markës vetëm për elementë dekorativë dhe zgjidhni një ngjyrë me kontrast të lartë për tekst, rritni madhësinë e fontit për t'u kualifikuar për pragun e tekstit të madh, ose shtoni një mbivendosje gjysmë-transparente pas tekstit të vendosur mbi sfonde me ngjyrë. Mjeti ynë sugjeron automatikisht ngjyrën më të afërt të aksesueshme.
A ka rëndësi kontrasti për modalitetin e errët?+
Absolutisht. Të njëjtat kërkesa kontrasti WCAG zbatohen pavarësisht skemës së ngjyrave. Në fakt, modaliteti i errët prezanton sfida unike: teksti i bardhë i pastër (#FFFFFF) mbi një sfond shumë të errët mund të shkaktojë alacion (një efekt shkëlqimi) për përdoruesit me astigmatizëm. Një bardhë pak e fikur (#E0E0E0 deri #F0F0F0) mbi gri të errët (#1A1A1A deri #2D2D2D) shpesh ofron lexueshmëri më të mirë duke plotësuar ende standardet AA.
A mund të shohin mjaftueshëm kontrast përdoruesit me verbëri ndaj ngjyrave?+
Raportet e larta të kontrastit ndihmojnë ndjeshëm përdoruesit me verbëri ndaj ngjyrave, por kontrasti vetëm nuk është i mjaftueshëm. WCAG kërkon gjithashtu që ngjyra të mos jetë mënyra e vetme për të përcjellë informacion (1.4.1). Për shembull, mos përdorni vetëm të kuqe/të gjelbër për të treguar gabim/sukses — shtoni ikona ose etiketa teksti. Formula e raportit të kontrastit merr parasysh ndriçimin, jo tonin, prandaj ndihmon në të gjitha llojet e verbërisë ndaj ngjyrave.
Si testoj kontrastin në faqen time ekzistuese të internetit?+
Mund të përdorni DevTools të shfletuesit (auditimi Lighthouse i Chrome përfshin kontrolle kontrasti), shtesa të shfletuesit si axe ose WAVE, ose ngjitni vlerat tuaja të sakta HEX/RGB në këtë mjet. Për testim gjithëpërfshirës, përdorni mjete automatike si Lighthouse për skanim të plotë të faqes, pastaj verifikoni manualisht çdo element të shënuar. Mos harroni të testoni gjendjet hover, stilet e fokusit dhe tekstin e mbajtalësit — këto shpesh nuk merren parasysh.

Ndërtoni një Faqe Interneti të Aksesueshme me AI

Përdorni kombinimet tuaja të aksesueshme të ngjyrave për të ndërtuar një faqe interneti të plotë, të pajtueshme me WCAG me ndërtuesin AI të faqeve të internetit të Kleap.

Filloni të Ndërtoni Falas

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Kontrollues Falas i Kontrastit të Ngjyrave | Mjet Aksesueshmërie WCAG 2026