ImageColorPicker.com

Kolore kontraste egiaztatzailea

Probatu aurrekaldeko eta atzeko koloreen arteko kontraste-ratioa irisgarritasuna ziurtatzeko.

Egiaztatu zure koloreak

Probatu kolore-konbinazioak WCAG irisgarritasun estandarrak betetzen dituztela ziurtatzeko testuaren irakurgarritasunerako.

10.62:1
Kontrastea
AAA
Testuaren emaitza
Oso ona

Konparatutakoak: #000000 gainean #00D1A0

Testua

16px, Regular (400)

Testu arruntatzat kontatzen da.

  • AA (WCAG 1.4.3): gutxienez 4.5:1

    Gainditua

  • AAA (WCAG 1.4.6): gutxienez 7:1

    Gainditua

UI osagaiak eta grafikoak

Ikonoak, sarrera-margenak, fokus adierazleak eta interfazean erabiltzeko ikusi behar dituzun bestelako zatiak.

  • AA (WCAG 1.4.11): gutxienez 3:1

    Gainditua
10.62:1. Testua: AA betetzen du, AAA betetzen du. UI osagaiak: betetzen du.
Nola egiaztatzen da hau
Konparatutako koloreak (nahasketaren ondoren)
Testua #000000 gainean, atzealdea #00D1A0
Erlatibo distira
Testua 0.0000, atzealdea 0.4813
Formula
(L1 + 0.05) / (L2 + 0.05) non L1 argiagoaren distira den eta L2 ilunagoaren distira.
Erlazio zehatza
10.6277:1, erakusten bezala 10.62:1. Erakutsitako balioa moztuta dago, ez biribilduta, beraz ez da inoiz benetakoa baino hoberik iruditzen. Zehatza da eskakizunarekin konparatzen dena.

Testuaren tamaina: 16px, Regular (400)

Testu arruntatzat kontatzen da. Testu handia gutxienez 24px (18pt) da, edo gutxienez 18.67px (14pt) loditzean (700 edo gehiago). Tamainak moztuta erakusten dira, ez biribilduta.

Testu arruntatzat kontatzen da. Testu handia gutxienez 24px (18pt) da, edo gutxienez 18.67px (14pt) loditzean (700 edo gehiago). Tamainak moztuta erakusten dira, ez biribilduta.

Aa
Aurrebista izenburua

Azeri arrea azkarra txakur alferra gainetik jauzi egiten du

Testu txikiaren adibidea (12px)

Testua
#000000
Atzeko planoa
#00d1a0

WCAG estandarrak

AA maila

Gutxieneko kontraste ratioa 4.5:1 testu normala eta 3:1 letra handietarako. Gehiengo webguneetan beharrezkoa.

AAA maila

Hobekuntza duten kontraste ratioa 7:1 testu normalerako eta 4.5:1 letra handietarako. Irisgarritasun optimoa gomendatua.

Kolore kontraste egiaztatzailea

Testuaren eta atzeko koloreen kontraste-ratioa kalkulatu.

Hautatu kolore bat testurako eta atzeko plano kolorerako kolore hautagailua erabiliz edo sartu kolore bat RGB hexadezimal formatuan (adibidez, #259 edo #2596BE). Ezarlekua doi dezakezu kolorea hautatzeko. Web Eduki Irisgarritasun Jarraibideek (WCAG) testua ikusmen normala duten erabiltzaileentzat irakurgarria den jakiteko jarraibide espezifikoa du. Irizpide honek kolore konbinazioak ratio konparagarrietan mapatzeko algoritmo jakin bat erabiltzen du. Formula hau erabiliz, WCAGek dio testu arruntarentzat (gorputz testua) eta letra larrietan (18+ pt arrunt, edo 14+ pt lodia) gutxienez 3:1 kolore kontrastea izan behar dutela.

Ezaugarri nagusiak

  • Kontraste ratioaren kalkulu denbora errealean
  • WCAG AA eta AAA betetze egiaztapena
  • HSL irristailuak doikuntza zehatzetarako
  • Aurrebista formatu anitzak

Tresna aurreratuak

  • Kolore zuzenketa automatikoa
  • Testu eta atzeko plano laginak
  • Kolore izenaren detekzioa
  • Emaitzak esportatu

Ohiko galderak

WCAG AA betetzeko, testu arruntak gutxienez 4,5:1eko kontraste-ratioa behar du, eta testu handiak (18pt edo 14pt lodia) 3:1ekoa.

WCAG AAA kontraste-ratio altuagoak eskatzen ditu: 7:1 testu arrunterako eta 4,5:1 testu handirako, AA-n berriz 4,5:1 eta 3:1 hurrenez hurren.

Erabili gure zuzenketa automatikoko funtzioa testuaren edo atzeko planoaren kolorea egokitzeko diseinuaren asmoa mantenduz, edo doitu koloreak eskuz HSL irristailuen bidez, AA/AAA betetzeko eremu onenak erakusten dituzten ikusmen-adierazleekin.

Eremu berdeek eta AA/AAA markek WCAG betetzeko barruti onenak erakusten dituzte. Norabide-argibideek (Argiagoa/Ilunagoa) kontraste hobe baterantz gidatzen zaituzte, une honetako kolore-konbinazioaren arabera.

Bai, edozein hex kolore-kode sar dezakezu edo kolore-hautatzailea erabili kolore pertsonalizatuak aukeratzeko. URLa automatikoki eguneratzen da, kolore-konbinazio zehatzak partekatu ahal izateko.