1. Shkruani ngjyrën e tekstit
Shkruani kodin e ngjyrës në format HEX, RGB ose HSL – ose zgjidhni ngjyrën nga zgjedhësi.
Kontroll i kontrastit dhe lexueshmërisë së ngjyrave
Shkruani ngjyrën e tekstit dhe sfondit dhe mjeti tregon nëse kontrasti është i mjaftueshëm. Llogaritjet bazohen në standardin ndërkombëtar të aksesibilitetit WCAG 2.1.
Raporti i kontrastit
21.00 : 1
Tekst i zakonshëm
AA (min. 4,5:1)AAA (min. 7:1)
Tekst shembull i kontrastit WCAG 2.1
Tekst i madh / i trashë
AA (min. 3:1)AAA (min. 4,5:1)
Tekst shembull i kontrastit WCAG 2.1
Ikonë
AA (min. 3:1)
Pse është e rëndësishme lexueshmëria e ngjyrave?
Lexueshmëria është ndryshimi i ndriçimit midis ngjyrës së tekstit dhe ngjyrës së sfondit. Sa më i madh ndryshimi, aq më lehtë lexohet teksti. Kontrasti shumë i ulët e bën përmbajtjen të vështirë për t'u lexuar – veçanërisht për personat me paaftësi shikimi, të moshuarit ose në kushte të vështira drite.
Sipas Organizatës Botërore të Shëndetësisë (OBSH) rreth 2.2 miliardë njerëz në botë kanë ndonjë formë të paaftësisë së shikimit.
Mjeti llogarit raportin e kontrastit duke përdorur formulën e përcaktuar në WCAG 2.1 – udhëzime ndërkombëtare për aksesibilitetin digjital.
Si të përdorni kontrolluesin e kontrastit të ngjyrave
Kontrolli i lexueshmërisë zgjat vetëm pak sekonda:
2. Shkruani ngjyrën e sfondit
Shkruani ngjyrën e sfondit ku do të shfaqet teksti.3. Lexoni rezultatet
Mjeti llogarit raportin e kontrastit dhe tregon nëse ngjyrat plotësojnë kërkesat WCAG për tekst normal, tekst të madh dhe ikona.4. Rregulloni ngjyrat
Nëse kontrasti është shumë i ulët, funksioni Match sugjeron automatikisht një variant ngjyre që plotëson pragun e zgjedhur.
Raporti i kontrastit
8.59:1
Tekst normal
AA (min. 4.5:1)AAA (min. 7:1)
Si të interpretoni rezultatet e testit të lexueshmërisë
Pasi të shkruani ngjyrat, mjeti tregon rezultate në tre seksione:
- Tekst normal – kërkon kontrast 4.5:1 (AA) ose 7:1 (AAA). Vlen për tekst nën 18pt (24px) ose nën 14pt bold.
- Tekst i madh / bold – kërkon kontrast 3:1 (AA) ose 4.5:1 (AAA). Vlen për tituj, butona dhe tekst të theksuar.
- Ikona – kërkon kontrast 3:1 (AA). Vlen për ikona dhe elemente grafike UI që mbajnë informacion.
Treguesi i gjelbër do të thotë se kërkesa është plotësuar. Treguesi i kuq do të thotë se kontrasti është shumë i ulët dhe duhet korrigjuar.
Çfarë do të thonë nivelet AA dhe AAA në standardin WCAG?
| Funkcja | Niveli AA (minimum) | Niveli AAA (i zgjeruar) |
|---|---|---|
| Tekst normal – min. 4.5:1 | ||
| Tekst normal – min. 7:1 | ||
| Tekst i madh / bold – min. 3:1 | ||
| Tekst i madh / bold – min. 4.5:1 | ||
| Ikona dhe elemente UI – min. 3:1 | ||
| Kërkesë ligjore (direktiva BE) | ||
| Rekomandohet për përmbajtjen kryesore |
Niveli AA (minimum)
- Tekst normal – min. 4.5:1
- Tekst normal – min. 7:1
- Tekst i madh / bold – min. 3:1
- Tekst i madh / bold – min. 4.5:1
- Ikona dhe elemente UI – min. 3:1
- Kërkesë ligjore (direktiva BE)
- Rekomandohet për përmbajtjen kryesore
Niveli AAA (i zgjeruar)
- Tekst normal – min. 4.5:1
- Tekst normal – min. 7:1
- Tekst i madh / bold – min. 3:1
- Tekst i madh / bold – min. 4.5:1
- Ikona dhe elemente UI – min. 3:1
- Kërkesë ligjore (direktiva BE)
- Rekomandohet për përmbajtjen kryesore
Pyetjet më të shpeshta për kontrolluesin e kontrastit të ngjyrave
Zbuloni mjete të tjera falas
Konvertues JPG/PNG në WebP
Zvogëloni madhësinë e skedarëve të imazheve pa humbur cilësinë. Konvertoni JPG dhe PNG në WebP dhe përshpejtoni faqen tuaj.
Redaktues imazhesh
Përgatitni prerjen perfekte për rrjetet sociale ose faqen tuaj. Zgjidhni një format të gatshëm ose shkruani dimensione të personalizuara.
Gjenerues favicon
Gjeneroni favicon.ico dhe ikona PNG nga një imazh i vetëm, në përputhje me kërkesat e shfletuesit dhe Lighthouse.
Kontrollues meta titull dhe përshkrim
Kontrolloni numrin e karaktereve dhe shikoni parapamjen e faqes në Google. Shmangni titujt dhe përshkrimet e prera në rezultatet e kërkimit.
Numerëes fjalësh dhe karakteresh
Kontrolloni gjatësinë e tekstit dhe vlerësoni nëse është e përshtatshme për faqen kryesore, faqen e shërbimeve, artikullin e blogut ose përshkrimin e produktit.
Gjenerues nënshkrimi email
Krijoni një nënshkrim profesional email në pak minuta. Kopjoni kodin HTML të gatshëm në Gmail ose Outlook.
Kontrollues kontrasti ngjyrave
Kontrolloni nëse ngjyrat e tekstit dhe sfondit janë të lexueshme. Mjeti llogarit kontrastin sipas WCAG dhe ndihmon në zgjedhjen e ngjyrës së duhur.
Nxjerrës ngjyrash nga imazhi
Ngarkoni një foto ose logo dhe mjeti do të nxjerrë ngjyrat dominuese. Kopjoni kodet e ngjyrave të gjeneruara me një klikim.
Gjenerues paletash ngjyrash
Zgjidhni një ngjyrë dhe gjeneroni 9 paleta: monokromatike, komplementare, triadike dhe më shumë.
Gjenerues kodi QR falas
Krijoni një kod QR për faqe interneti, vCard, menu ose fletushkë. Eksportoni në PNG dhe SVG, pa hyrje, pa kufizime.