Kako da proverim da li moje boje teksta i pozadine zadovoljavaju WCAG?

Unesite heksadecimalne kodove u polja Boja teksta i Boja pozadine ili koristite birače. Odnos kontrasta se pojavljuje sa Uspešno ili Ne prolazi za AA i AAA normalan i veliki tekst, plus UI komponente.

Koji odnos kontrasta zahteva WCAG AA?

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

Šta se smatra velikim tekstom?

Alat tretira 18pt (24px) običan tekst ili 14pt (18,66px) podebljan tekst kao veliki. Manji tekst mora da zadovolji više pragove za normalan tekst.

Moje boje ne prolaze AA. Kako da ih popravim?

Koristite predloge jednim klikom Popravi boju teksta ili Popravi pozadinu. Oni podešavaju svetlinu zadržavajući istu nijansu dok par ne dostigne 4,5:1.

Koje formate boja prihvata i mogu li da biram sa ekrana?

Prihvata trocifrene i šestocifrene heksadecimalne vrednosti, kao što su #abc ili #1e293b. Dugme Preuzmi boju sa ekrana se pojavljuje u pregledačima koji podržavaju EyeDropper API, kao što je Chromium.

Da li je zaista besplatno?

Da. Svaka alatka je besplatna za korišćenje, bez naloga i bez kreditne kartice. Obrada se obavlja na vašem uređaju, a ne na našim serverima, što omogućava da ostane besplatna.

Da li radi na mobilnim uređajima?

Da. Radi u aktuelnim mobilnim pregledačima na iOS-u i Androidu, bez instalacije.

🌓

WCAG provera kontrasta boja — besplatno

Proverite da li dve boje ispunjavaju WCAG AA i AAA standarde kontrasta za pristupačnost. Pregled uživo u više veličina teksta sa automatskim predlozima kada je kontrast prenizak.

Radi u pregledačuBez registracije, bez iskačućih prozoraNije potrebna prijavaBesplatno zauvek

Radi van mreže kada se učita

Boja teksta

Boja pozadine

Veliki naslovni tekst

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

Normalni tekst tela (16px) za pasuse.

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

14,63:1

Odnos kontrasta

✓WCAG AA — Normalni tekst

Zahteva 4.5:1 · Imate 14,63:1

✓WCAG AA — Veliki tekst

Zahteva 3.0:1 · Imate 14,63:1

✓WCAG AAA — Normalni tekst

Zahteva 7.0:1 · Imate 14,63:1

✓WCAG AAA — Veliki tekst

Zahteva 4.5:1 · Imate 14,63:1

✓UI komponente / grafički objekti

Zahteva 3.0:1 · Imate 14,63:1

Brzi unapred podešeni

Zasnovano na smernicama kontrasta WCAG 2.1. Veliki tekst = 18pt (24px) normalni ili 14pt (18.66px) podebljani. HEX kodovi se ažuriraju u oba smera: unesite hex ili izaberite boju, oba polja ostaju sinhronizovana.

Uobičajene upotrebe

Revidirajte veb stranice za WCAG usklađenostProverite da boje teksta vašeg sajta ispunjavaju WCAG AA ili AAA standarde kontrasta za dostupnost.
Verifikujte kombinacije brendovskih bojaTestirajte kombinacije palete brendovske boje da biste osigurali da funkcionišu za dostupan UI dizajn.
Testirajte palete boja tamnog režimaSvetla tekstura na temnoj pozadini i dalje može neuspešan kontrast - proverite kombinacije palete tamnog režima ovde.
Kombinacije boja za štampane materijalePosteri, znakovi i štampani materijali takođe trebaju čitljiv kontrast - posebno za starije čitače.
Dizajniranje pristupačnih boja dugmadiUverite se da CTA, akciona dugmad i veza proze WCAG-a prema pozadini.

Kako funkcioniše

Provera kontrasta se u potpunosti izvršava u vašem pregledaču koristeći algoritam relativne luminance WCAG 2.1 — bez biblioteke, bez servera, samo ručno napisana matematika koja tačno prati specifikaciju. Svaki rezultat se ažurira u realnom vremenu dok kucate ili birate boju.

1
Heksadecimalni unos i normalizacija
Prihvataju se i 3-cifrene (#abc) i 6-cifrene (#aabbcc) heksadecimalne vrednosti i normalizuju u pune RGB trojke. Nevalidan unos se odmah odbija umesto da tiho pređe na crnu boju, tako da se pojavljuje crvena ivica umesto zavaravajućeg pozitivnog rezultata.
2
WCAG izračunavanje luminance
Svaka boja se pretvara u relativnu luminancu koristeći WCAG 2.1 formulu: vrednosti sRGB kanala se linearizuju delimičnom gama korekcijom (deljenjem sa 12,92 ispod 0,03928, podizanjem na stepen 2,4 iznad toga), zatim se ponderišu kao 0,2126R + 0,7152G + 0,0722B.
3
Odnos kontrasta i provere usklađenosti
Odnos kontrasta se izračunava kao (svetlija + 0,05) / (tamnija + 0,05) i proverava se prema svih pet WCAG pragova: AA normalan tekst (4,5:1), AA veliki tekst (3:1), AAA normalan tekst (7:1), AAA veliki tekst (4,5:1), i UI komponente (3:1). Rezultati se ažuriraju pri svakom pritisku tastera.
4
Predlozi popravke koji čuvaju nijansu
Kada par ne prođe WCAG AA, alatka pretražuje prostor HSL osvetljenosti — koračajući prema spolja od originalne osvetljenosti u oba smera — da pronađe najbližu varijantu svake boje koja prolazi 4,5:1 zadržavajući istu nijansu i zasićenje. EyeDropper API (Chromium) je takođe dostupan da uzorkuje bilo koju boju direktno sa vašeg ekrana.

Slične alatke

👁️

Simulator daltonizma

Vidite kako vaš dizajn izgleda osobama sa oštećenjem percepcije boja. Simulira protanopiju, deuteranopiju, tritanopiju, ahromatopsiju i blaže anomalije.

IsprobajteFajlovi ostaju lokalni

📐

Koja je rezolucija mog ekrana

Pogledajte rezoluciju ekrana u CSS i stvarnim pikselima, veličinu prozora, odnos piksela, dubinu boje, HDR, podršku za dodir i brzinu osvežavanja i sve to kopirajte.

Isprobajte

🖥️

Test mrtvih piksela

Proverite da li na ekranu ima mrtvih ili zaglavljenih piksela pomoću celog ekrana u crnoj, beloj, crvenoj, zelenoj, plavoj i sivoj boji, plus opcioni popravljač zaglavljenih piksela.