ກວດສອບຄວາມຕ່າງຂອງຊຸດສີ

ຄວາມສາມາດ ກວດສອບຄວາມຕ່າງຂອງຊຸດສີ ກວດສອບຄູ່ສີໃນຊຸດສີການອອກແບບຂອງທ່ານວ່າສອດຄ່ອງກັບ WCAG (ຄຳແນະນຳການເຂົ້າເຖິງເນື້ອຫາເວັບ) ຫຼືບໍ່ ກ່ອນນຳໃຊ້ກັບທີມຂອງທ່ານ.

ພາບລວມ

ຄວາມສາມາດນີ້ຮັບປະກັນວ່າໂຄງສີຂອງເວັບໄຊຂອງທ່ານຕອບສະໜອງມາດຕະຖານການເຂົ້າເຖິງ ໂດຍກວດສອບອັດຕາຄວາມຕ່າງລະຫວ່າງສີຂໍ້ຄວາມ ແລະ ສີພື້ນຫຼັງ. ມັນຊ່ວຍປ້ອງກັນການຈັບຄູ່ສີທີ່ອາດອ່ານຍາກສຳລັບຜູ້ໃຊ້ທີ່ມີຄວາມບົກພ່ອງທາງສາຍຕາ.

ຮູບແບບຂໍ້ມູນນຳເຂົ້າ

ຄວາມສາມາດນີ້ຮັບຊຸດສີເປັນຂໍ້ມູນນຳເຂົ້າ:

{
  "colors": [
    {
      "name": "primary",
      "hex": "#678233"
    },
    {
      "name": "text",
      "hex": "#ffffff"
    },
    {
      "name": "background",
      "hex": "#f5f5f5"
    }
  ],
  "wcag_level": "AA"
}

ພາຣາມິເຕີ

Parameter	Type	Required	Description
`colors`	array	ແມ່ນ	ອາເຣຂອງອອບເຈັກສີທີ່ມີຄຸນສົມບັດ `name` ແລະ `hex`
`wcag_level`	string	ບໍ່	ລະດັບການສອດຄ່ອງ WCAG: "A", "AA" (ຄ່າເລີ່ມຕົ້ນ), ຫຼື "AAA"
`pairs_to_check`	array	ບໍ່	ຄູ່ສີສະເພາະທີ່ຈະກວດສອບ (ເຊັ່ນ `["primary-text", "background-text"]`)

ລະດັບ WCAG ທີ່ກວດສອບ

ຄວາມສາມາດນີ້ກວດສອບອັດຕາຄວາມຕ່າງຕາມມາດຕະຖານ WCAG:

ລະດັບ	ຂໍ້ຄວາມປົກກະຕິ	ຂໍ້ຄວາມຂະໜາດໃຫຍ່	ອັດຕາສ່ວນຂັ້ນຕ່ຳ
A	3:1	3:1	3:1
AA	4.5:1	3:1	4.5:1
AAA	7:1	4.5:1	7:1

ຂໍ້ຄວາມປົກກະຕິ — ຂໍ້ຄວາມທີ່ນ້ອຍກວ່າ 18pt (ຫຼື 14pt ຕົວໜາ)
ຂໍ້ຄວາມຂະໜາດໃຫຍ່ — ຂໍ້ຄວາມ 18pt ຫຼື ໃຫຍ່ກວ່າ (ຫຼື 14pt ຕົວໜາ ຫຼື ໃຫຍ່ກວ່າ)

ໂຄງສ້າງຜົນລັບ

ຄວາມສາມາດນີ້ສົ່ງຄືນລາຍງານການກວດສອບແບບລະອຽດ:

{
  "compliant": true,
  "wcag_level": "AA",
  "pairs": [
    {
      "pair": "primary-text",
      "color1": "#678233",
      "color2": "#ffffff",
      "contrast_ratio": 5.2,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": false,
      "status": "pass"
    },
    {
      "pair": "background-text",
      "color1": "#f5f5f5",
      "color2": "#333333",
      "contrast_ratio": 12.1,
      "wcag_a": true,
      "wcag_aa": true,
      "wcag_aaa": true,
      "status": "pass"
    }
  ],
  "summary": {
    "total_pairs": 2,
    "passing": 2,
    "failing": 0,
    "recommendations": []
  }
}

ຟິວຜົນລັບ

Field	Type	Description
`compliant`	boolean	ຊຸດສີທັງໝົດຕອບສະໜອງລະດັບ WCAG ທີ່ລະບຸໄວ້ຫຼືບໍ່
`wcag_level`	string	ລະດັບ WCAG ທີ່ຖືກກວດສອບ
`pairs`	array	ຜົນລັບແບບລະອຽດສຳລັບແຕ່ລະຄູ່ສີ
`contrast_ratio`	number	ອັດຕາຄວາມຕ່າງທີ່ຄຳນວນໄດ້ (1:1 ຫາ 21:1)
`status`	string	"pass" ຫຼື "fail" ສຳລັບແຕ່ລະຄູ່
`recommendations`	array	ຄຳແນະນຳສຳລັບປັບປຸງຄູ່ທີ່ບໍ່ຜ່ານ

ຕົວຢ່າງການໃຊ້

ພຣອມພ໌:

ກວດສອບວ່າຊຸດສີຂອງຂ້ອຍຕອບສະໜອງມາດຕະຖານ WCAG AA ຫຼືບໍ່. ຂ້ອຍມີສີຫຼັກ #678233, ສີຂໍ້ຄວາມ #ffffff, ແລະ ພື້ນຫຼັງ #f5f5f5.

ຜົນລັບ: ຄວາມສາມາດນີ້ກວດສອບການຈັບຄູ່ສີທັງໝົດ ແລະ ສົ່ງຄືນ:

✅ ສີຫຼັກ + ຂໍ້ຄວາມ: ອັດຕາ 5.2:1 (ຜ່ານ WCAG AA)
✅ ພື້ນຫຼັງ + ຂໍ້ຄວາມ: ອັດຕາ 12.1:1 (ຜ່ານ WCAG AAA)
ໂດຍລວມ: ສອດຄ່ອງກັບ WCAG AA

ການເຊື່ອມລວມກັບ Theme Builder

ເມື່ອໃຊ້ການເລືອກທິດທາງການອອກແບບຂອງ Theme Builder, ຄວາມສາມາດກວດສອບຄວາມຕ່າງຂອງຊຸດສີຈະ:

ວິເຄາະຊຸດສີທີ່ທ່ານເລືອກ
ກວດສອບການຈັບຄູ່ຂໍ້ຄວາມ-ພື້ນຫຼັງທັງໝົດ
ກວດຢືນຢັນຕາມລະດັບ WCAG ທີ່ທ່ານເລືອກ
ໃຫ້ຄຳແນະນຳສຳລັບຄູ່ທີ່ບໍ່ສອດຄ່ອງ
ປ້ອງກັນການນຳໃຊ້ໂຄງສີທີ່ເຂົ້າເຖິງໄດ້ຍາກ

ແນວປະຕິບັດທີ່ດີ

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

ຄູ່ທີ່ບໍ່ຜ່ານ ແລະ ຄຳແນະນຳ

ຖ້າຄູ່ສີໃດໜຶ່ງບໍ່ຜ່ານການກວດຢືນຢັນ, ຄວາມສາມາດນີ້ຈະໃຫ້ຄຳແນະນຳ:

{
  "pair": "primary-text",
  "status": "fail",
  "contrast_ratio": 2.8,
  "wcag_aa": false,
  "recommendations": [
    "Lighten the text color to #ffffff (ratio would be 5.2:1)",
    "Darken the background color to #556b2f (ratio would be 4.8:1)",
    "Use a different primary color like #4a6b1f (ratio would be 6.1:1)"
  ]
}

ສ້າງໂລໂກ້ SVG — ສ້າງໂລໂກ້ດ້ວຍຊຸດສີທີ່ທ່ານກວດຢືນຢັນແລ້ວ
ສ້າງເມນູ — ສ້າງການນຳທາງດ້ວຍສີທີ່ເຂົ້າເຖິງໄດ້

ພາບລວມ​

ຮູບແບບຂໍ້ມູນນຳເຂົ້າ​

ພາຣາມິເຕີ​

ລະດັບ WCAG ທີ່ກວດສອບ​

ໂຄງສ້າງຜົນລັບ​

ຟິວຜົນລັບ​

ຕົວຢ່າງການໃຊ້​

ການເຊື່ອມລວມກັບ Theme Builder​

ແນວປະຕິບັດທີ່ດີ​

ຄູ່ທີ່ບໍ່ຜ່ານ ແລະ ຄຳແນະນຳ​

ຄວາມສາມາດທີ່ກ່ຽວຂ້ອງ​