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ēls krāsas Picker
Izvilkt krāsu paletes no dizaina maketiem.
CSS krāsu konvertētājs
Konvertēt starp CMYK, HSV, RGB, HSL un HEX formātus.

Krāsu kontrasta pārbaudītājs

Aprēķiniet WCAG kontrasta rādītājus priekšējā un fonā krāsām un parādīsiet kopīgus teksta izmēra rezultātus.

Ievade
Divas derīgas CSS krāsas un opcionāls priekšlikuma teksts.
Izvade
Kontrasta attiecība ar WCAG AA un AAA pāriem vai neveiksmēm.
Reālie ierobežojumi
Aprēķins aptver tikai luminance kontrastu; tas necertificē saskarni vai kontu font renderēšanas, kustības, fokusa vai bezkrāsainu izskatu.
Privātuma un datu apstrāde
divus derīgos CSS krāsas un opcionālas priekšskatīšanas teksts tiek apstrādāti šajā pārlūkprogrammas tabulā. konvertētājs to nesaņem vai uzglabā; lapas slēgšana vai pārlādēšana izskaidro darba stāvokli, ja vien rīks skaidri piedāvā vietējo 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 pāriem vai neveiksmīgi rādītāji, tad izlaidiet rīku.
  3. Pārskatiet kontrasta attiecību ar WCAG AA un AAA pāriem vai neveiksmēm rādītājiem pirms to kopēšanas vai lejupielādes.

Kopīgas neveiksmes režīms

Neesošas krāsas nevar izmērīt, un pārredzamība bez izšķīrētas fonā var padarīt attiecību bezjēdzīgu.

Noderīgs piemērs

Salīdziniet #f2937 tekstu #ffffff, lai pārskatītu tā attiecību par normālu un lielu tekstu.