ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ຕົວກວດ WCAG Color Contrast ຟຣີ

ກວດວ່າສອງສີ ຕອບສະໜອງ WCAG AA ແລະ AAA ສຳລັບ accessibility. ຕົວຢ່າງ live ໃນຫຼາຍຂະໜາດ ພ້ອມຄຳແນະນຳ ເມື່ອ contrast ຕ່ຳ.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ຂໍ້ຄວາມຫົວໃຫຍ່

ຂໍ້ຄວາມກາງ (18px) ສຳລັບການອ່ານ.

ຂໍ້ຄວາມທຳມະດາ (16px) ສຳລັບວັກ.

ຂໍ້ຄວາມນ້ອຍ (14px) ສຳລັບ caption ແລະ metadata.

14,63:1

ອັດຕາ contrast

✓WCAG AA — ຂໍ້ຄວາມທຳມະດາ

ຕ້ອງການ 4.5:1 · ທ່ານມີ 14,63:1

✓WCAG AA — ຂໍ້ຄວາມໃຫຍ່

ຕ້ອງການ 3.0:1 · ທ່ານມີ 14,63:1

✓WCAG AAA — ຂໍ້ຄວາມທຳມະດາ

ຕ້ອງການ 7.0:1 · ທ່ານມີ 14,63:1

✓WCAG AAA — ຂໍ້ຄວາມໃຫຍ່

ຕ້ອງການ 4.5:1 · ທ່ານມີ 14,63:1

✓UI components / ວັດຖຸກຣາຟິກ

ຕ້ອງການ 3.0:1 · ທ່ານມີ 14,63:1

ຄ່າຕັ້ງຕົ້ນດ່ວນ

ອ້າງອີງ WCAG 2.1 contrast guidelines. ຂໍ້ຄວາມໃຫຍ່ = 18pt (24px) ທຳມະດາ ຫຼື 14pt (18.66px) ຕົວໜາ. ລະຫັດ hex ອັບເດດທັງສອງທາງ: ພິມ hex ຫຼືເລືອກສີ ທັງສອງ input ຊິງຄ໌ກັນ.

ການນຳໃຊ້ທົ່ວໄປ

  • ກວດກາ ເວບ ສາກຖາກາກ WCAGກວດສອບວ່າ ສີ ຂໍ້ຄວາມ ເວບໄຊຕ໌ ຂອງທ່ານ ປະຕູບໍລິ ມາດຕະຖານ ເພື່ອ ບໍ່ເຄົ້າ ໂລ WCAG AA ຫຼື AAA.
  • ກວດສອບ ລົວະລາຄົວ ສີ ແບຣນ້ັອທົດສອບ ສີ ປະພໍສາຍ ແບຣນ້ັອ ຂອງທ່ານ ເພື່ອ ກວດສອບວ່າ ມັນເຮັດວຽກ ສຳລັບ ເນື້ອຫາ ບໍ່ເຄົ້າ ໂລ.
  • ທົດສອບ ງົນີ້ຕົວ ສີ ອະວົກ ອະວົກຂໍ້ຄວາມ ອ່າວຮົດ ຢູ່ ພື້ນທີ່ ອະວົກ ຍັງ ສາມາດ ລົ້ມສັນລະໄຫ້ ເພື່ອ ກວດສອບວ່າ ສະພາບ ອະວົກ ທາງຂອງທ່ານ.
  • ສີ ປະພໍສາຍ ສຳລັບ ວັດສະດຸ ພິມໂປສເຕີ, ປ້າຍ, ແລະ ວັດສະດຸ ພິມ ກໍເຕ້ອງ ເປັນ ຄວາມສາມາດໃນການອ່ານ — ໂດຍສະເພາະ ສຳລັບ ຜູ້ເບົ້າກວ່າ.
  • ອອກແບບສີປຸ່ມທີ່ສາມາດເຂົ້າເຖິງໄດ້ໃຫ້ແນ່ໃຈວ່າ CTA, ປຸ່ມການກະ ທຳ ແລະ ສະ ໜ ອ ມ ຜ່ານ WCAG ທຽບກັບ ພື້ນ ຫລັງ ຂອງ ພວກ ມັນ.

ມັນເຮັດວຽກແນວໃດ

ການກວດຄວາມຄົມຊັດເຮັດວຽກທັງໝົດຢູ່ໃນບຣາວເຊີຂອງທ່ານໂດຍໃຊ້ອະລະກໍລິທຶມ relative luminance ຂອງ WCAG 2.1 — ບໍ່ມີໄລບຣາຣີ, ບໍ່ມີເຊີບເວີ, ພຽງແຕ່ເລກຄະນິດທີ່ຂຽນເອງທີ່ປະຕິບັດຕາມ spec ຢ່າງແທ້ຈິງ. ທຸກຜົນລັບອັບເດດໃນເວລາຈິງຂະນະທ່ານພິມ ຫຼືເລືອກສີ.

  1. 1
    ຂໍ້ມູນເຂົ້າ hex ແລະ ການປົກກະຕິ
    ຄ່າ hex ທັງ 3 ຫຼັກ (#abc) ແລະ 6 ຫຼັກ (#aabbcc) ຖືກຮັບ ແລະ ປົກກະຕິເປັນຊຸດ RGB ເຕັມ. ຂໍ້ມູນເຂົ້າທີ່ບໍ່ຖືກຕ້ອງຖືກປະຕິເສດທັນທີແທນທີ່ຈະໃຊ້ຄ່າສີດຳໂດຍງຽບໆ, ດັ່ງນັ້ນຂອບສີແດງປາກົດແທນຜົນຜ່ານທີ່ເຮັດໃຫ້ເຂົ້າໃຈຜິດ.
  2. 2
    ການຄິດໄລ່ luminance WCAG
    ແຕ່ລະສີຖືກແປງເປັນ relative luminance ໂດຍໃຊ້ສູດ WCAG 2.1: ຄ່າຊ່ອງ sRGB ຖືກ linearize ດ້ວຍການແກ້ໄຂ gamma ແບບເປັນສ່ວນ (ຫານດ້ວຍ 12.92 ຕ່ຳກວ່າ 0.03928, ຍົກກຳລັງ 2.4 ເໜືອນັ້ນ), ແລ້ວໃຫ້ນ້ຳໜັກເປັນ 0.2126R + 0.7152G + 0.0722B.
  3. 3
    ອັດຕາສ່ວນຄວາມຄົມຊັດ ແລະ ການກວດການປະຕິບັດຕາມ
    ອັດຕາສ່ວນຄວາມຄົມຊັດຖືກຄິດໄລ່ເປັນ (ອ່ອນກວ່າ + 0.05) / (ເຂັ້ມກວ່າ + 0.05) ແລະ ກວດກັບຂອບເຂດ WCAG ທັງຫ້າ: AA ຂໍ້ຄວາມທຳມະດາ (4.5:1), AA ຂໍ້ຄວາມໃຫຍ່ (3:1), AAA ຂໍ້ຄວາມທຳມະດາ (7:1), AAA ຂໍ້ຄວາມໃຫຍ່ (4.5:1), ແລະ ອົງປະກອບ UI (3:1). ຜົນລັບອັບເດດທຸກການກົດແປ້ນ.
  4. 4
    ຄຳແນະນຳການແກ້ໄຂທີ່ຮັກສາໂຕນສີ
    ເມື່ອຄູ່ບໍ່ຜ່ານ WCAG AA, ເຄື່ອງມືຄົ້ນຫາພື້ນທີ່ຄວາມສະຫວ່າງ HSL — ກ້າວອອກຈາກຄວາມສະຫວ່າງເດີມໃນທັງສອງທິດທາງ — ເພື່ອຊອກຫາຕົວແປທີ່ໃກ້ທີ່ສຸດຂອງແຕ່ລະສີທີ່ຜ່ານ 4.5:1 ໃນຂະນະຮັກສາໂຕນສີ ແລະ ຄວາມອີ່ມຕົວດຽວກັນ. EyeDropper API (Chromium) ຍັງມີໃຫ້ໃຊ້ເພື່ອສຸ່ມຕົວຢ່າງສີໃດກໍໄດ້ໂດຍກົງຈາກໜ້າຈໍຂອງທ່ານ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

👁️

ຕົວຈຳລອງ Color Blindness

ເບິ່ງ design ຂອງທ່ານໃຫ້ຄ້າຍຄຶ ຄົນທີ່ມີ color vision ບ່ຽງ. ຈຳລອງ protanopia, deuteranopia, tritanopia, achromatopsia ແລະ anomaly ເບົາ.

ລອງໃຊ້ໄຟລ໌ຢູ່ໃນທ້ອງຖິ່ນ
📐

ຄວາມລະອຽດໜ້າຈໍຂອງຂ້ອຍແມ່ນເທົ່າໃດ

ເບິ່ງຄວາມລະອຽດໜ້າຈໍຂອງທ່ານໃນຮູບແບບພິກເຊວ CSS ແລະ ພິກເຊວຕົວຈິງ, ຂະໜາດໜ້າຕ່າງ, ອັດຕາສ່ວນພິກເຊວ, ຄວາມເລິກຂອງສີ, HDR, ການຮອງຮັບການສຳຜັດ ແລະ ອັດຕາຣີເຟຣຊ, ພ້ອມຄັດລອກຂໍ້ມູນທັງໝົດໄດ້.

ລອງໃຊ້
🖥️

ເຄື່ອງມືກວດສອບ Dead Pixel

ກວດສອບຈໍພາບຂອງທ່ານເພື່ອຫາ dead pixel ຫຼື stuck pixel ດ້ວຍການສະແດງສີດຳ, ຂາວ, ແດງ, ຂຽວ, ຟ້າ ແລະ ເທົາເຕັມຈໍ, ພ້ອມເຄື່ອງມືແກ້ໄຂ stuck pixel ເສີມ.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ