Kontrollues i kontrastit

Vendosni një ngjyrë teksti dhe sfondi për të parë raportin e kontrastit WCAG dhe cilët nivele AA dhe AAA kalojnë.

—Raporti i kontrastit
Tekst normalAA4.5:1—
Tekst normalAAA7:1—
Tekst i madhAA3:1—
Tekst i madhAAA4.5:1—
Ndërfaqe dhe grafika3:1—
Vendosni një ngjyrë teksti dhe sfondi për të kontrolluar.

Çdo kontroll kryhet në shfletuesin tuaj. Asgjë që shkruani nuk ngarkohet në BroBroGo.

Pyetje të shpeshta

Çfarë nënkuptojnë rezultatet AA dhe AAA?

AA është niveli që synojnë shumica e faqeve: kërkon një raport prej të paktën 4.5:1 për tekstin normal dhe 3:1 për tekstin e madh. AAA është më i rreptë — 7:1 për tekstin normal dhe 4.5:1 për tekstin e madh. Raporti shkon nga 1:1 (pa kontrast) deri në 21:1 (e zezë në të bardhë).

Çfarë konsiderohet si tekst i madh?

Teksti nga 18pt (rreth 24px), ose 14pt (rreth 18.5px) kur është i trashë (bold). Teksti më i madh mbetet i lexueshëm në kontrast më të ulët, kështu që ai kalon AA në 3:1 dhe AAA në 4.5:1 në vend të pragjeve më të rrepta të tekstit normal.

Cilat formate ngjyrash mund të vendos?

Shkruani një vlerë hex si #1a1a1a, një vlerë rgb() si rgb(26, 26, 26), ose një vlerë hsl() — ose klikoni mbi njërën nga paletat për të zgjedhur një ngjyrë. Përdorni butonin e ndërrimit për të ndryshuar vendet e ngjyrës së tekstit dhe të sfondit.

A është kjo WCAG 2 apo metoda më e re APCA?

Ai përdor formulën WCAG 2.1 / 2.2, atë të cilës i referohen rregullat dhe auditimet e aksesueshmërisë sot. APCA është një metodë më e re, më perceptuese, që ende po hartohet për WCAG 3 — premtuese, por ende jo një standard pajtueshmërie, kështu që rezultatet e kalimit këtu nuk e përdorin atë.

Shkruar dhe rishikuar nga ekipi editorial i BroBroGo.Përditësuar së fundmi:

Si funksionon kontrolli i kontrastit sipas standardeve WCAG 2.1 / 2.2

Ky mjet ju lejon të vendosni një ngjyrë teksti dhe një ngjyrë sfondi për të përcaktuar raportin e tyre të kontrastit sipas standardeve WCAG 2.1 / 2.2. Pas vendosjes së vlerave, ai ju tregon se cilat nivele të aksesueshmërisë (AA dhe AAA) kalon kombinimi i zgjedhur i ngjyrave për tekstin normal, tekstin e madh dhe komponentët e ndërfaqes (UI).

Mjeti përdor formulën zyrtare WCAG 2.1 / 2.2 për të kryer llogaritjet. Si vlerë fillestare, mjeti ngarkon ngjyrën #4f46e5 për tekstin dhe #ffffff për sfondin, gjë që jep një raport kontrasti prej 6.29. Për të lehtësuar punën, butoni i ndërrimit ju lejon të ndryshoni vendet e ngjyrës së tekstit dhe të sfondit me një klikim.

Të dhënat e hyrjes dhe formatet e pranuara

Për të kryer kontrollin, ju duhet të plotësoni dy fusha kryesore:

  • Ngjyra e tekstit: Vlera e ngjyrës që dëshironi të përdorni për tekstin tuaj.
  • Ngjyra e sfondit: Vlera e ngjyrës mbi të cilën do të vendoset teksti.

Të dyja këto fusha pranojnë formate të ndryshme të përcaktimit të ngjyrave:

  • Vlerat Hex (për shembull, #1a1a1a).
  • Vlerat rgb() (për shembull, rgb(26, 26, 26)).
  • Vlerat hsl().

Nëse vendoset një vlerë e pavlefshme, sistemi do të shfaqë mesazhe gabimi për t'ju udhëzuar:

  • Nëse ngjyra e tekstit nuk është e saktë, shfaqet mesazhi: "Vendosni një ngjyrë teksti të vlefshme, si #1a1a1a or rgb(26, 26, 26).".
  • Nëse ngjyra e sfondit nuk është e saktë, shfaqet mesazhi: "Vendosni një ngjyrë sfondi të vlefshme, si #ffffff ose rgb(255, 255, 255).".

Rezultatet e llogaritjes dhe interpretimi i tyre

Pasi të keni vendosur ngjyrat e vlefshme, mjeti do të gjenerojë automatikisht këto rezultate:

  • Raporti i kontrastit: Raporti i llogaritur midis ngjyrës së tekstit dhe asaj të sfondit, i shfaqur në formatin "X:1". Ky raport varion nga 1:1 (pa kontrast fare) deri në 21:1 (kontrasti maksimal, si e zezë mbi të bardhë).
  • Tekst normal: Tregon "Kalon" ose "Dështon" për nivelet AA dhe AAA.
  • Tekst i madh: Tregon "Kalon" ose "Dështon" për nivelet AA dhe AAA.
  • Ndërfaqe dhe grafika: Tregon "Kalon" ose "Dështon" bazuar në një prag të vetëm prej 3:1. Kjo radhë nuk ka ndarje midis niveleve AA dhe AAA; mjeti shfaq vetëm një rezultat të vetëm për të.

Në fund, mjeti shfaq një përmbledhje të rezultatit përmes një mesazhi të qartë (Verdict):

  • "Kalon AA dhe AAA për tekstin normal."
  • "Kalon AA për tekstin normal."
  • "Kalon AA vetëm për tekstin e madh."
  • "Nën minimumin e AA — rritni kontrastin."

Rregullat e kontrastit dhe pragjet e kalueshmërisë

Për të siguruar që dizajni juaj të jetë i aksesueshëm, duhet të njihni pragjet minimale të përcaktuara nga standardet WCAG:

  • Teksti normal: Kërkon një raport kontrasti prej të paktën 4.5:1 për të kaluar nivelin AA, dhe të paktën 7:1 për të kaluar nivelin më të rreptë AAA.
  • Teksti i madh: Duke qenë se është më i lehtë për t'u lexuar, kërkon një raport prej të paktën 3:1 për nivelin AA, dhe të paktën 4.5:1 për nivelin AAA. Teksti i madh përkufizohet si tekst me madhësi nga 18pt (rreth 24px) e lart, ose nga 14pt (rreth 18.5px) e lart kur është i trashë (bold).
  • Ndërfaqe dhe grafika: Kërkon një raport minimal prej 3:1. Ky është i vetmi seksion që ka një prag të vetëm dhe nuk ndahet në nivele të veçanta AA dhe AAA.

Kush ka nevojë për këtë mjet dhe privatësia e të dhënave

Ky kontrollues kontrasti është krijuar për të ndihmuar profile të ndryshme profesionale që punojnë me produkte digjitale:

  • Dizajnerët që duan të kontrollojnë lexueshmërinë e teksteve dhe të komponentëve të ndryshëm grafikë.
  • Zhvilluesit që duhet të sigurohen që kodimi i tyre përmbush standardet zyrtare të aksesueshmërisë.
  • Ekipet e përmbajtjes që verifikojnë nëse kontrastet e ngjyrave në materialet e tyre janë të përshtatshme për të gjithë përdoruesit.

Sa i përket sigurisë së të dhënave tuaja, çdo kontroll kryhet në shfletuesin tuaj. Asgjë që shkruani nuk ngarkohet në BroBroGo, duke garantuar privatësinë e plotë të punës suaj.

Pyetje të shpeshta (FAQ)

Çfarë nënkuptojnë rezultatet AA dhe AAA? AA është niveli që synojnë shumica e faqeve: kërkon një raport prej të paktën 4.5:1 për tekstin normal dhe 3:1 për tekstin e madh. AAA është më i rreptë — 7:1 për tekstin normal dhe 4.5:1 për tekstin e madh. Raporti shkon nga 1:1 (pa kontrast) deri në 21:1 (e zezë në të bardhë).

Çfarë konsiderohet si tekst i madh? Teksti nga 18pt (rreth 24px), ose 14pt (rreth 18.5px) kur është i trashë (bold). Teksti më i madh mbetet i lexueshëm në kontrast më të ulët, kështu që ai kalon AA në 3:1 dhe AAA në 4.5:1 në vend të pragjeve më të rrepta të tekstit normal.

Cilat formate ngjyrash mund të vendos? Shkruani një vlerë hex si #1a1a1a, një vlerë rgb() si rgb(26, 26, 26), ose një vlerë hsl() — ose klikoni mbi njërën nga paletat për të zgjedhur një ngjyrë. Përdorni butonin e ndërrimit për të ndryshuar vendet e ngjyrës së tekstit dhe të sfondit.

A është kjo WCAG 2 apo metoda më e re APCA? Ai përdor formulën WCAG 2.1 / 2.2, atë të cilës i referohen rregullat dhe auditimet e aksesueshmërisë sot. APCA është një metodë më e re, më perceptuese, që ende po hartohet për WCAG 3 — premtuese, por ende jo një standard pajtueshmërie, kështu që rezultatet e kalimit këtu nuk e përdorin atë.

Konvertues i ngjyraveKonvertoni ngjyrat midis HEX, RGB, HSL, HSV, CMYK dhe LAB — ndryshoni çdo fushë dhe të tjerat përditësohen gjatë shkrimit.Përzgjedhësi i Ngjyrave nga ImazhiZgjidhni çdo piksel nga një imazh dhe lexoni vlerat e tij HEX, RGB dhe HSL, me një zmadhues për kampionim të saktë.Konvertuesi i Formatit të ImazheveKonvertoni imazhet JPG, PNG, WebP, HEIC dhe AVIF në shfletuesin tuaj.Llogaritësi i Raportit të PamjesKtheni çdo gjerësi × lartësi në një raport të pastër si 16:9, ose zgjidhni një raport dhe plotësoni anën që mungon — për video, foto dhe ekrane njësoj.Gjenerator i Box ShadowTërhiqni rrëshqitësit për të formësuar një box-shadow, mbivendosni shtresa për thellësi dhe kopjoni CSS-në e përfunduar menjëherë.Gjenerator i gradienteveNdërtoni një gradient linear, radial ose konik, shtoni ndalesa ngjyrash dhe vendosni drejtimin, pastaj kopjoni CSS-në me një klikim.Paketa e Testimit të MonitoritKontrolloni çdo ekran me modele testimi me ekran të plotë — pikselë të vdekur, rrjedhje e dritës së prapme, fasha ngjyrash, gama, ghosting, shpejtësi rifreskimi dhe më shumë.