Kako da provjerim zadovoljavaju li moje boje teksta i pozadine WCAG kriterije?

Unesite heksadecimalne kodove u Boja teksta i Boja pozadine ili koristite birače. Omjer kontrasta se prikazuje s oznakom Uspjeh ili Ne prolazi za AA i AAA normalan i veliki tekst, plus UI komponente.

Koji omjer kontrasta zahtijeva WCAG AA?

AA zahtijeva 4,5:1 za normalan tekst i 3:1 za veliki tekst. AAA zahtijeva 7:1 za normalan tekst i 4,5:1 za veliki tekst. UI komponente i grafički objekti trebaju 3:1.

Što se smatra velikim tekstom?

Alat tretira 18pt (24px) običnog teksta ili 14pt (18,66px) podebljanog teksta kao veliki. Manji tekst mora zadovoljiti više pragove za normalan tekst.

Moje boje ne prolaze AA. Kako da ih popravim?

Koristite prijedloge jednim klikom Ispravi boju teksta ili Ispravi pozadinu. Oni prilagođavaju svjetlinu zadržavajući istu nijansu dok par ne dosegne 4,5:1.

Koje formate boja prihvaća i mogu li odabrati boju sa zaslona?

Prihvaća troznamenkaste i šesteroznamenkaste heksadecimalne vrijednosti, poput #abc ili #1e293b. Gumb Odaberi boju sa zaslona pojavljuje se u preglednicima koji podržavaju EyeDropper API, poput Chromiuma.

Je li stvarno besplatno?

Da. Svaki alat je besplatan za korištenje, bez računa i bez kreditne kartice. Rad se odvija na vašem uređaju, a ne na našim poslužiteljima, što omogućuje da ostane besplatan.

Radi li na mobilnim uređajima?

Da. Radi u aktualnim mobilnim preglednicima na iOS-u i Androidu, bez instalacije.

🌓

WCAG provjera kontrasta boja — besplatno

Provjerite ispunjavaju li dvije boje WCAG AA i AAA standarde kontrasta za pristupačnost. Živi pregled pri više veličina teksta s automatskim prijedlozima kad je kontrast prenizak.

Radi u preglednikuBez registracije, bez skočnih prozoraNije potrebna prijavaBesplatno zauvijek

Radi offline nakon učitavanja

Boja teksta

Boja pozadine

Veliki naslovni tekst

Srednji tekst tijela (18px) za čitanje i sadržaj.

Normalni tekst tijela (16px) za odlomke.

Mali tekst tijela (14px) za natpise i metapodatke.

14,63:1

Omjer kontrasta

✓WCAG AA — Normalni tekst

Zahtijeva 4.5:1 · Imate 14,63:1

✓WCAG AA — Veliki tekst

Zahtijeva 3.0:1 · Imate 14,63:1

✓WCAG AAA — Normalni tekst

Zahtijeva 7.0:1 · Imate 14,63:1

✓WCAG AAA — Veliki tekst

Zahtijeva 4.5:1 · Imate 14,63:1

✓UI komponente / grafički objekti

Zahtijeva 3.0:1 · Imate 14,63:1

Brzi unaprijed postavljeni

Temeljeno na smjernicama kontrasta WCAG 2.1. Veliki tekst = 18pt (24px) normalni ili 14pt (18.66px) podebljani. HEX kodovi se ažuriraju u oba smjera: unesite hex ili odaberite boju, oba polja ostaju sinkronizirana.

Uobičajene namjene

Revidirajte web stranice za WCAG sukladnostProvjerite da boje teksta vašeg web-mjesta ispunjavaju WCAG AA ili AAA standarde kontrasta za dostupnost.
Provjerite kombinacije brendovskih bojaTestirajte kombinacije palete brendovske boje da biste osigurali da funkcioniraju za dostupan UI dizajn.
Testirajte palete boja tamnog režimaSvjetla tekstura na tamnoj pozadini i dalje može neuspješno kontrastirati - provjerite kombinacije palete tamnog režima ovdje.
Kombinacije boja za tiskane materijalePosteri, znakovi i tiskani materijali također trebaju čitljiv kontrast - posebno za starije čitače.
Dizajn dostupnih boja gumbaProvjerite je li CTA, akcijski gumbi i veze proslijedili WCAG prema njihovim pozadinama.

Kako funkcionira

Provjera kontrasta radi u potpunosti u vašem pregledniku koristeći WCAG 2.1 algoritam relativne svjetline — bez biblioteke, bez poslužitelja, samo ručno napisana matematika koja točno prati specifikaciju. Svaki rezultat se ažurira u stvarnom vremenu dok tipkate ili birate boju.

1
Heks unos i normalizacija
Prihvaćaju se i 3-znamenkaste (#abc) i 6-znamenkaste (#aabbcc) heks vrijednosti te se normaliziraju u pune RGB trojke. Nevaljan unos se odmah odbija umjesto da tiho postane crna, pa se pojavljuje crveni obrub umjesto zavaravajućeg rezultata prolaza.
2
Izračun WCAG svjetline
Svaka boja se pretvara u relativnu svjetlinu koristeći WCAG 2.1 formulu: vrijednosti sRGB kanala se lineariziraju s dijelovnom gama korekcijom (dijeljenje s 12,92 ispod 0,03928, dizanje na potenciju 2,4 iznad toga), zatim se ponderiraju kao 0,2126R + 0,7152G + 0,0722B.
3
Omjer kontrasta i provjere usklađenosti
Omjer kontrasta izračunava se kao (svjetlija + 0,05) / (tamnija + 0,05) i provjerava se prema svih pet WCAG pragova: AA obični tekst (4,5:1), AA veliki tekst (3:1), AAA obični tekst (7:1), AAA veliki tekst (4,5:1) i UI komponente (3:1). Rezultati se ažuriraju pri svakom pritisku tipke.
4
Prijedlozi popravaka koji čuvaju nijansu
Kada par ne prođe WCAG AA, alat pretražuje HSL prostor svjetline — koračajući prema van od izvorne svjetline u oba smjera — kako bi pronašao najbližu varijantu svake boje koja prolazi 4,5:1 zadržavajući istu nijansu i zasićenje. EyeDropper API (Chromium) također je dostupan za uzorkovanje bilo koje boje izravno s vašeg zaslona.

Srodni alati

👁️

Simulator sljepoće za boje

Pogledajte kako vaš dizajn izgleda osobama s nedostacima u prepoznavanju boja. Simulira protanopiju, deuteranopiju, tritanopiju, akromatopsiju i blaže anomalije.

IsprobajteDatoteke ostaju lokalne

📐

Koja je moja rezolucija zaslona

Pogledajte razlučivost zaslona u CSS i stvarnim pikselima, veličinu prozora, omjer piksela, dubinu boje, HDR, podršku za dodir i brzinu osvježavanja te sve kopirajte.

Isprobajte

🖥️

Test mrtvih piksela

Provjerite ima li vaš zaslon mrtvih ili zaglavljenih piksela s crnom, bijelom, crvenom, zelenom, plavom i sivom bojom preko cijelog zaslona, plus opcionalni popravljač zaglavljenih piksela.