WCAG krāsu kontrasta pārbaudītājs

Novērtējiet teksta un fona krāsu kontrasta attiecību saskaņā ar WCAG 2.1 vadlīnijām. Nekavējoties ģenerējiet pieejamus krāsu pielāgojumus.

HEX/RGB/HSL
HEX/RGB/HSL
Viss darbojas lokāli jūsu pārlūkprogrammā.

Tiešraides teksta priekšskatījums

Liels virsraksts (18pt treknrakstā / 24pt parastā)

Tas ir priekšskats par lielo tekstu nosaukuma stilu.

Parasts teksts (zem 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elita.

Kontrasta attiecība

18.6:1

WCAG 2.1 atbilstības statuss

WCAG AA prasības
Parasts teksts (4.5:1) PASS
Liels teksts (3.0:1) PASS
WCAG AAA prasības
Parasts teksts (7.0:1) PASS
Liels teksts (4.5:1) PASS

WCAG 2.1 vadlīnijas

Viegli pārbaudiet kontrasta standartus, lai izveidotu pieejamas saskarnes, kas atbilst 508. sadaļai, ADA un WCAG AA vai AAA vadlīnijām.

Ieteikumu dzinējs

Automātiski pielāgo krāsas progresīvi gar HSL koordinātus, lai atrastu tuvākās alternatīvas, kas atbilst kontrasta attiecības kritērijiem.

Pilnībā klienta pusē

Aprēķini tiek veikti lokāli jūsu pārlūkprogrammas kontekstā. Mūsu serveriem netiek pārsūtītas krāsas, faili vai telemetrijas koordinātes.

Saistītie krāsu rīki

HEX RGB HSL krāsu pārveidotājs
Pārvērst krāsas un pielāgot gaišuma koordinātes.
Attēla krāsu atlasītājs
Izvilkt krāsu paletes no dizaina maketiem.
CSS krāsu konvertētājs
Konvertēt starp CMYK, HSV, RGB, HSL un HEX formātiem.

Krāsu kontrasta pārbaudītājs

Aprēķiniet WCAG kontrasta attiecības priekšplāna un fona krāsām un parādiet kopīgus teksta izmēra rezultātus.

Ievade
Divas derīgas CSS krāsas un izvēles priekšskatījuma teksts.
Izvade
Kontrasta attiecība ar WCAG AA un AAA iztur vai neiztur indikatoriem.
Reālie ierobežojumi
Aprēķins aptver tikai spilgtuma kontrastu; tas neapstiprina saskarni vai neņem vērā fontu renderēšanu, kustību, fokusu vai krāsu norādes.
Privātums un datu apstrāde
divas derīgas CSS krāsas un izvēles priekšskatījuma teksts tiek apstrādāti šajā pārlūkprogrammas cilnē. Convertr to nesaņem un neuzglabā; lapas aizvēršana vai pārlādēšana notīra darba stāvokli, ja vien rīks skaidri nepiedāvā vietēju lejupielādi.

Kā izmantot šo rīku

  1. Iegūstiet divas derīgas CSS krāsas un opcionālu priekšskatīšanas tekstu rīku kontrolēs.
  2. Izvēlieties iestatījumus, kas ietekmē kontrasta attiecību ar WCAG AA un AAA izturēšanas vai neizturēšanas indikatoriem, tad palaidiet rīku.
  3. Pārskatiet kontrasta attiecību ar WCAG AA un AAA izturēšanas vai neizturēšanas indikatoriem pirms tās kopēšanas vai lejupielādes.

Biežākie atteices veidi

Nederīgas krāsas nevar izmērīt, un caurspīdīgums bez noteikta fona var padarīt attiecību bezjēdzīgu.

Noderīgs piemērs

Salīdziniet #1f2937 tekstu uz #ffffff, lai pārskatītu tā kontrasta attiecību normālam un lielam tekstam.