Nola egiazta dezaket nire testuaren eta atzeko planoaren koloreek WCAG betetzen duten?

Sartu hex kodeak Text color eta Background color eremuetan, edo erabili hautatzaileak. Contrast ratio balioak Pass edo Fail erakusten du AA eta AAA mailetarako, testu arruntarentzat eta handiarentzat, baita interfazeko osagaientzat ere.

Zer kontraste-erlazio eskatzen du WCAG AAk?

AA mailak 4,5:1 behar du testu arruntarentzat eta 3:1 testu handiarentzat. AAA mailak 7:1 testu arruntarentzat eta 4,5:1 testu handiarentzat. Interfazeko osagaiek eta objektu grafikoek 3:1 behar dute.

Zer hartzen da testu handitzat?

Tresnak 18 pt-ko (24 px) testu arrunta edo 14 pt-ko (18,66 px) testu lodia hartzen ditu testu handitzat. Tamaina txikiagoko testuek testu arruntari dagozkion atalase altuagoak bete behar dituzte.

Nire koloreek ez dute AA betetzen. Nola konpon ditzaket?

Erabili klik bakarreko Konpondu testu kolorea edo Konpondu atzekoa iradokizunak. Argitasuna doitzen dute tonu bera mantenduz, bikoteak 4,5:1 lortu arte.

Zer kolore-formatu onartzen ditu, eta hautatu al dezaket pantailatik?

3 eta 6 digituko hex balioak onartzen ditu, hala nola #abc edo #1e293b. Hautatu kolorea pantailatik botoia EyeDropper APIa onartzen duten arakatzaileetan agertzen da, Chromium-en adibidez.

Bai. Tresna guztiak doakoak dira, konturik gabe eta kreditu-txartelik gabe. Lanak zure gailuan egiten dira gure zerbitzarietan egin beharrean, eta horri esker mantentzen da doakoa.

Mugikorrean funtzionatzen al du?

Bai. iOS eta Android-eko mugikorretako oraingo nabigatzaileetan funtzionatzen du, ezer instalatu gabe.

🌓

WCAG Kolore Kontraste Egiaztatzailea doan

Egiaztatu bi kolorek WCAG AA eta AAA kontraste estandarrak betetzen dituzten irisgarritasunerako. Zuzeneko aurrebista hainbat testu-tamainatan kontrastea baxuegia denean iradokizpen automatikoekin.

Nabigatzailean exekutatzen daEz erregistrorik, ez leihatila gainerakorikEz da saioa hasi beharBetiko doan

Linez kanpo funtzionatzen du behin kargatuta

Testuaren kolorea

Atzeko planoaren kolorea

Goiburu-testu handia

Gorputz-testu ertaina (18px) irakurketa eta edukietarako.

Gorputz-testu normala (16px) paragrafoetarako.

Gorputz-testu txikia (14px) azpititulu eta metadaturako.

14,63:1

Kontraste-erlazioa

✓WCAG AA — Testu normala

4.5:1 behar da · 14,63:1 duzu

✓WCAG AA — Testu handia

3.0:1 behar da · 14,63:1 duzu

✓WCAG AAA — Testu normala

7.0:1 behar da · 14,63:1 duzu

✓WCAG AAA — Testu handia

4.5:1 behar da · 14,63:1 duzu

✓UI osagaiak / objektu grafikoak

3.0:1 behar da · 14,63:1 duzu

Aurrezarpen azkarrak

WCAG 2.1 kontraste-jarraibideetan oinarrituta. Testu handia = 18pt (24px) normala edo 14pt (18.66px) lodia. Hex kodeak bi norabideetan eguneratzen dira: idatzi hex bat edo aukeratu kolore bat, bi sarrerak sinkronizatuta geratzen dira.

Ohiko erabilerak

Aztertu Web Orria WCAG BateragarriEgiaztatu zure sitio test koloreak bete WCAG AA edo AAA kontraste estandar ikurtzaile.
Egiaztatu Brand Koloreak KonbinazioProbatu zure brand kolore paleta aleak lanean ikurtzaile UI diseinu.
Test Ilun Modua Kolore PaletaArgua test-beltz atzealdean baiño koloreak egon daiteke - egiaztatu zure ilun aleak hemen.
Kolore Aleak Inprimaki MaterialAfixak, seinale eta inprimaki material ere behar irakurri kontraste - bereziki zaharra ikusleentzat.
Ditzaitu Koloreak Accessibility BotoienZiurtatu CTAs, aksio-botoiak eta loturak WCAG igarotzen direla haien atzean.

Nola Funtzionatzen Du

Kontrastearen egiaztapena erabat zure nabigatzailean funtzionatzen du WCAG 2.1 luminantzia erlatiboaren algoritmoa erabiliz — liburutegirik ez, zerbitzaririk ez, espezifikazioa zehazki jarraitzen duen eskuz idatzitako matematika baino ez. Emaitza bakoitza denbora errealean eguneratzen da idatzi edo kolore bat aukeratu ahala.

1
Hamaseitarreko sarrera eta normalizazioa
3 digituko (#abc) eta 6 digituko (#aabbcc) hamaseitarreko balioak onartzen dira eta RGB hirukote osoetara normalizatzen dira. Sarrera baliogabea berehala baztertzen da isilean beltzera lehenetsi beharrean, beraz ertz gorri bat agertzen da emaitza engainagarri baten ordez.
2
WCAG luminantzia-kalkulua
Kolore bakoitza luminantzia erlatibora bihurtzen da WCAG 2.1 formula erabiliz: sRGB kanal-balioak lerrokatzen dira gamma-zuzenketa zatikakoa erabiliz (12,92z zatituz 0,03928 azpitik, 2,4 berreturaraino goratuz gainetik), gero 0,2126R + 0,7152G + 0,0722B gisa haztatzen dira.
3
Kontraste-erlazioa eta betetze-egiaztapenak
Kontraste-erlazioa (argiagoa + 0,05) / (ilunagoa + 0,05) gisa kalkulatzen da eta WCAG-ren bost atalaseen aurka egiaztatzen da: AA testu arrunta (4,5:1), AA testu handia (3:1), AAA testu arrunta (7:1), AAA testu handia (4,5:1), eta UI osagaiak (3:1). Emaitzak teklatze-sakada bakoitzean eguneratzen dira.
4
Ñabardura mantentzen duten konponketa-iradokizunak
Bikoteak WCAG AA hutsegiten duenean, tresnak HSL argitasun-espazioa bilatzen du — jatorrizko argitasunetik kanporantz bi noranzkoetan urratsak eginez — tonu eta saturazio bera mantenduz %4,5:1 gainditzen duen kolore bakoitzaren bertsio hurbilena aurkitzeko. EyeDropper API (Chromium) ere eskuragarri dago zure pantailatik zuzenean edozein kolore laginketa egiteko.

Erlazionatutako tresnak

👁️

Koloreen Itsutasun Simulagailua

Ikusi nola ikusten duten zure diseinua kolore-ikusmen arazoak dituzten pertsonek. Simulatzen ditu protanopia, deuteranopia, tritanopia, acromatopsia eta anomalia arinagoak.

ProbatuFitxategiak lokalean geratzen dira

📐

Zein da nire pantailaren bereizmena?

Ikusi zure pantailaren bereizmena CSS pixeletan eta benetako pixeletan, leihoaren tamaina, pixel-erlazioa, kolore-sakonera, HDR, ukipen-euskarria eta freskatze-tasa, eta kopiatu dena.

Probatu

🖥️

Pixel hilen proba

Egiaztatu zure pantailan pixel hilik edo trabaturik dagoen pantaila osoko beltz, zuri, gorri, berde, urdin eta grisarekin, gehi trabatutako pixelak konpontzeko aukerako tresna batekin.