WCAG kontrastni kontrolor boje

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

HEX/RGB/HSL
HEX/RGB/HSL
Sve se radi lokalno u vašem pregledniku.

Pregled teksta

Velika glava (18pt Bold / 24pt Regular)

Ovo je predviđanje velikog naslovnog teksta.

Normalni tekst (manje od 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

kontrastni rat

18.6:1

WCAG 2.1 Status usklađenosti

WCAG AA zahtjevi
Normalni tekst (4.5:1) PASS
Veliki tekst (3.0:1) PASS
WCAG AAA zahtjevi
Normalni tekst (7.0:1) PASS
Veliki tekst (4.5:1) PASS

WCAG 2.1 Upravljački uvjeti

Jednostavno provjerite standarde kontrasta kako biste izgradili pristupačne sučelje koje se pridržavaju smjernica odjeljka 508, ADA i WCAG AA ili AAA.

Moč prijedloga

Automatski prilagoditi boje incrementalno duž HSL koordinata kako bi pronašli najbliže alternative koje zadovoljavaju kriterije kontrastnog omjera.

Potpuno strano od strane klijenta

Računalni podaci se izvode lokalno u kontekstu vašeg pretraživača. nijedna boja, datoteke ili telemetrijske koordinate ne prenose se na naše servere.

Slijedila boja alata

HEX RGB HSL Boja pretvornik
Konvertirati boje i prilagoditi koordinate svjetlosti.
Fotografija: Color Picker
Izvadite palete boje iz dizajnerskih mockups.
CSS boja konverter
Konvertirati između CMYK, HSV, RGB, HSL i HEX formata.

Kontrast boje kontrolor

Izračunajte WCAG kontrastne razmjere za prednjeg i pozadine boje i prikazati zajedničke rezultate veličine teksta.

Uvod
Dvije valjane CSS boje i opcionalni tekst predviđanja.
Izlazak
Kontrastni omjer s WCAG AA i AAA proći ili neuspjeti pokazatelji.
Prava ograničenja
Izračun pokriva samo kontrast svjetlosti; ne potvrđuje sučelje ili račun za font rendering, pokretanje, fokusiranje ili ne-barvne kuze.
Privatnost i obrada podataka
Dvije valjane CSS boje i opcionalni preview tekst obrađuju se u ovoj kartici pretraživača.Converter ne primaju ili pohranjuju; zatvaranje ili ponovna preuzimanja stranice očisti radno stanje, osim ako alat izričito nudi lokalnu preuzimanje.

Kako koristiti ovaj alat

  1. Pružite dvije valjane CSS boje i opcionalni preview tekst u kontrolama alata.
  2. Odaberite postavke koje utječu na kontrastni omjer s WCAG AA i AAA prolaze ili pokazatelji neuspjeha, a zatim pokrenite alat.
  3. Provjerite kontrastni omjer s WCAG AA i AAA proći ili neuspjeti pokazatelji prije kopiranja ili preuzimanja.

Uobičajeni načini neuspjeha

Nevažeće boje se ne mogu mjeriti, a transparentnost bez rješenog pozadine može učiniti omjer besmislen.

Korisni primjer

Usporedite tekst #f2937 na #ffffff kako biste pročitali njegovu omjeru za normalni i veliki tekst.