ImageColorPicker.com

ຕົວກວດສອບຄວາມຄົມຊັດຂອງສີ

ທົດສອບອັດຕາສ່ວນຄວາມຄົມຊັດລະຫວ່າງສີພື້ນໜ້າ ແລະພື້ນຫຼັງເພື່ອຮັບປະກັນການເຂົ້າຫາ.

ກວດສອບສີຂອງທ່ານ

ທົດສອບການປະສົມສີເພື່ອຮັບປະກັນວ່າພວກມັນຕອບສະໜອງໄດ້ມາດຕະຖານການເຂົ້າເຖິງ WCAG ສຳລັບການອ່ານຂໍ້ຄວາມ.

7.03 ເຖິງ 1
ກົງກັນຂ້າມ
AAA
ຜົນຂໍ້ຄວາມ
ດີຫຼາຍ

ທີ່ເຊັກ: #FFFFFF ຢູ່ບົງ #6B4A8C

ຂໍ້ຄວາມ

16px, ປົກກະຕິ (400)

ນັບເປັນຂໍ້ຄວາມທົ່ວໄປ.

  • AA (WCAG 1.4.3): ຢ່າງໜ້ອຍ 4.5:1

    ຜ່ານ

  • AAA (WCAG 1.4.6): ຢ່າງໜ້ອຍ 7:1

    ຜ່ານ

ອົງປະກອນ UI ແລະກຣາຟິກ

ໄອຄອນ, ຂອບຊ່ອງປ້ອນຂໍ້ມູນ, ຕົວຊີ້ບອກໂຟກັສ ແລະສ່ວນອື່ນໆທີ່ທ່ານຕ້ອງເຫັນເພື່ອໃຊ້ສ່ວນຕິດຕໍ່ຜູ້ໃຊ້.

  • AA (WCAG 1.4.11): ຢ່າງໜ້ອຍ 3:1

    ຜ່ານ
7.03 ຕໍ່ 1. ຂໍ້ຄວາມ: ຜ່ານ AA, ຜ່ານ AAA. ອົງປະກອບ UI: ຜ່ານ.
ວິທີທີ່ກວດ
ສີທີ່ນຳມາເຊັກ (ຫຼັງການປອມ)
ຂໍ້ຄວາມ #FFFFFF ຢູ່ບົງ #6B4A8C
ຄວາມສະຫວ່າງສຳພັດ
ຂໍ້ຄວາມ 1.0000, ພື້ນຫຼັງ 0.0991
ສູດ
(L1 + 0.05) / (L2 + 0.05) ໂດຍທີ່ L1 ແມ່ນຄວາມສະຫວ່າງຂອງສີທີ່ອ່ອນກວ່າ ແລະ L2 ຂອງສີທີ່ເຂັ້ມກວ່າ.
ອັດຕາທີ່ແນະນຳ
7.0390 ຕໍ່ 1, ສະແດງເປັນ 7.03 ຕໍ່ 1. ຄ່າທີ່ສະແດງຖືກຕັດອອກ ບໍ່ໄດ້ປັດເສດ, ດັ່ງນັ້ນມັນຈະບໍ່ເບິ່ງດີກວ່າຄວາມເປັນຈິງ. ຄ່າທີ່ຖືກຕ້ອງແນ່ນອນແມ່ນຄ່າທີ່ນຳໄປປຽບທຽບກັບເງື່ອນໄຂ.

ຂະໜາດຂໍ້ຄວາມ: 16px, ປົກກະຕິ (400)

ນັບເປັນຂໍ້ຄວາມທົ່ວໄປ. ຂໍ້ຄວາມຂະໜາດໃຫຍ່ແມ່ນຢ່າງນ້ອຍ 24px (18pt), ຫຼືຢ່າງນ້ອຍ 18.67px (14pt) ຖ້າເປັນຕົວໜາ (ນ້ຳໜັກ 700 ຫຼືຫຼາຍກວ່າ). ຂະໜາດຖືກສະແດງແບບຕັດອອກ, ບໍ່ປັດເສດ.

ນັບເປັນຂໍ້ຄວາມທົ່ວໄປ. ຂໍ້ຄວາມຂະໜາດໃຫຍ່ແມ່ນຢ່າງນ້ອຍ 24px (18pt), ຫຼືຢ່າງນ້ອຍ 18.67px (14pt) ຖ້າເປັນຕົວໜາ (ນ້ຳໜັກ 700 ຫຼືຫຼາຍກວ່າ). ຂະໜາດຖືກສະແດງແບບຕັດອອກ, ບໍ່ປັດເສດ.

Aa
ຫົວຂໍ້ການເບິ່ງຕົວຢ່າງ

ໝາແມວສີນ້ຳຕານໄວໂດດຂ້າມໝາຂີ້ຄ້ານ

ຕົວຢ່າງຂໍ້ຄວາມຂະຫນາດນ້ອຍ (12px)

ຂໍ້ຄວາມ
#ffffff
ຄວາມເປັນມາ
#6b4a8c

ມາດຕະຖານ WCAG

ລະດັບ AA

ອັດຕາສ່ວນຄວາມຄົມຊັດຕໍ່າສຸດຂອງ 4.5:1 ສໍາລັບຂໍ້ຄວາມປົກກະຕິ ແລະ 3:1 ສໍາລັບຂໍ້ຄວາມຂະຫນາດໃຫຍ່. ຕ້ອງການສໍາລັບເວັບໄຊທ໌ສ່ວນໃຫຍ່.

ລະດັບ AAA

ປັບປຸງອັດຕາສ່ວນຄວາມຄົມຊັດຂອງ 7:1 ສໍາລັບຂໍ້ຄວາມປົກກະຕິ ແລະ 4.5:1 ສໍາລັບຂໍ້ຄວາມຂະຫນາດໃຫຍ່. ແນະນຳສຳລັບການເຂົ້າເຖິງທີ່ດີທີ່ສຸດ.

ຕົວກວດສອບຄວາມຄົມຊັດຂອງສີ

ຄິດໄລ່ອັດຕາສ່ວນກົງກັນຂ້າມຂອງຂໍ້ຄວາມ ແລະສີພື້ນຫຼັງ.

ເລືອກສີໂດຍໃຊ້ຕົວເລືອກສີສຳລັບຂໍ້ຄວາມ ແລະສີພື້ນຫຼັງ ຫຼືໃສ່ສີໃນຮູບແບບ RGB hexadecimal (ເຊັ່ນ: #259 ຫຼື #2596BE). ທ່ານສາມາດປັບຕົວເລື່ອນເພື່ອເລືອກສີ. ຂໍ້ແນະນຳການຊ່ວຍເຂົ້າເຖິງເນື້ອຫາເວັບ (WCAG) ມີຂໍ້ແນະນຳສະເພາະເພື່ອຊ່ວຍຊອກຫາວ່າຂໍ້ຄວາມສາມາດອ່ານໄດ້ສຳລັບຜູ້ໃຊ້ທີ່ເຫັນຫຼືບໍ່. ເງື່ອນໄຂນີ້ໃຊ້ສູດການຄິດໄລ່ສະເພາະເພື່ອວາງແຜນການປະສົມສີເປັນອັດຕາສ່ວນປຽບທຽບ. ການນໍາໃຊ້ສູດນີ້, WCAG ລະບຸວ່າອັດຕາສ່ວນສີ 4.5: 1 ກັບຂໍ້ຄວາມແລະພື້ນຫລັງຂອງມັນແມ່ນພຽງພໍສໍາລັບຂໍ້ຄວາມປົກກະຕິ (ຮ່າງກາຍ), ແລະຂໍ້ຄວາມຂະຫນາດໃຫຍ່ (18+ pt ປົກກະຕິ, ຫຼື 14+ pt bold) ຄວນມີຢ່າງຫນ້ອຍ 3: 1 ອັດຕາສ່ວນຄວາມຄົມຊັດຂອງສີ.

ຄຸນນະສົມບັດທີ່ສໍາຄັນ

  • ການຄິດໄລ່ອັດຕາສ່ວນກົງກັນຂ້າມໃນເວລາຈິງ
  • ການກວດສອບການປະຕິບັດຕາມ WCAG AA & AAA
  • ຕົວເລື່ອນ HSL ສໍາລັບການປັບລະອຽດ
  • ຮູບ​ແບບ​ຕົວ​ຢ່າງ​ຫຼາຍ​ຮູບ​ແບບ​

ເຄື່ອງມືຂັ້ນສູງ

  • ການແກ້ໄຂສີອັດຕະໂນມັດ
  • ຕົວຢ່າງຂໍ້ຄວາມ ແລະພື້ນຫຼັງ
  • ການກວດຫາຊື່ສີ
  • ສົ່ງອອກຜົນໄດ້ຮັບ

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

ສຳລັບການປະຕິບັດຕາມ WCAG AA, ຂໍ້ຄວາມທົ່ວໄປຕ້ອງມີອັດຕາສ່ວນຄວາມຄົມຊັດຢ່າງໜ້ອຍ 4.5:1 ແຕ່ຂໍ້ຄວາມຂະໜາດໃຫຍ່ (18pt ຫຼື 14pt ຕົວໜາ) ຕ້ອງມີ 3:1.

WCAG AAA ຕ້ອງການອັດຕາສ່ວນຄວາມຄົມຊັດສູງກວ່າ: 7:1 ສຳລັບຂໍ້ຄວາມທົ່ວໄປ ແລະ 4.5:1 ສຳລັບຂໍ້ຄວາມຂະໜາດໃຫຍ່, ເມື່ອທຽບກັບ 4.5:1 ແລະ 3:1 ຂອງ AA ຕາມລຳດັບ.

ໃຊ້ຟັງຊັນແກ້ໄຂອັດຕະໂນມັດເພື່ອປັບຂໍ້ຄວາມ ຫຼື ພື້ນຫຼັງ ໂດຍຮັກສາແນວຄິດການອອກແບບຂອງທ່ານ ຫຼື ປັບສີດ້ວຍຕົນເອງດ້ວຍຕົວເລື່ອນ HSL ທີ່ສະແດງໂຊນທີ່ດີທີ່ສຸດສຳລັບການປະຕິບັດຕາມ AA/AAA.

ໂຊນສີຂຽວ ແລະ ເຄື່ອງໝາຍ AA/AAA ສະແດງຂອບເຂດທີ່ດີທີ່ສຸດເພື່ອໃຫ້ປະຕິບັດຕາມ WCAG. ຄຳແນະນຳທິດທາງ (ສະຫວ່າງກວ່າ/ມືດກວ່າ) ຊ່ວຍນຳທ່ານໄປສູ່ຄວາມຄົມຊັດທີ່ດີກວ່າ ຕາມການປະສົມສີປັດຈຸບັນຂອງທ່ານ.

ໄດ້, ທ່ານສາມາດປ້ອນລະຫັດ HEX ໃດກໍໄດ້ ຫຼື ໃຊ້ຕົວເລືອກສີເພື່ອເລືອກສີທີ່ກຳນົດເອງ. URL ຈະອັບເດດອັດຕະໂນມັດ ເພື່ອໃຫ້ທ່ານແບ່ງປັນການປະສົມສີສະເພາະໄດ້.