រំលងទៅខ្លឹមសារមេ

ពិនិត្យភាពផ្ទុយពណ៌ WCAG ឥតគិតថ្លៃ

ពិនិត្យថាតើពណ៌ពីរបំពេញតាមស្ដង់ដារ contrast WCAG AA និង AAA សម្រាប់ accessibility ឬអត់។ ការមើលជាមុនផ្ទាល់ k្នុងទំហំអក្សរច្រើន ជាមួយការណែនាំស្វ័យប្រវត្តិ នៅពេល 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 ទាំងពីររក្សាការធ្វើសមកាលកម្ម។

ការប្រើប្រាស់ទូទៅ

  • ពិនិត្យលម្អាងពិនិត្យលម្អាងលម្អាង។
  • ពិនិត្យលម្អាងពិនិត្យលម្អាងលម្អាង។
  • ពិនិត្យលម្អាងពិនិត្យលម្អាងលម្អាង។
  • ពិនិត្យលម្អាងពិនិត្យលម្អាងលម្អាង។
  • ដាក់ឌីហ្សាញ ប៊ូតុង ដែល អាច ចូល ប្រើ បានធានាថា CTA នឹង ប៊ូតុង សកម្មភាព និង តំណ ឆ្លងកាត់ WCAG ប្រឆាំងនឹង ផ្ទៃ របស់វា។

វាដំណើរការដោយរបៀបណា

ការត្រួតពិនិត្យភាពផ្ទុយគ្នាដំណើរការទាំងស្រុងនៅក្នុងកម្មវិធីរុករករបស់អ្នកដោយប្រើក្បួនដោះស្រាយ luminance ដែលទាក់ទងគ្នា WCAG 2.1 — គ្មានបណ្ណាល័យ គ្មានម៉ាស៊ីនមេទេ គ្រាន់តែជាគណិតវិទ្យាសរសេរដោយដៃដែលអនុវត្តតាមលក្ខណៈបច្ចេកទេសពិតប្រាកដ។ លទ្ធផលនីមួយៗធ្វើបច្ចុប្បន្នភាពក្នុងពេលវេលាពិតនៅពេលអ្នកវាយ ឬជ្រើសរើសពណ៌។

  1. 1
    ធាតុចូល hex និងធ្វើឱ្យស្តង់ដារ
    តម្លៃ hex ទាំង 3-ខ្ទង់ (#abc) និង 6-ខ្ទង់ (#aabbcc) ត្រូវបានទទួល និងធ្វើឱ្យស្តង់ដារទៅ RGB triple ពេញលេញ។ ធាតុចូលមិនត្រឹមត្រូវត្រូវបានបដិសេធភ្លាមៗជំនួសឱ្យលំនាំដើមទៅខ្មៅដោយស្ងៀមស្ងាត់ ដូច្នេះគែមក្រហមលេចឡើងជំនួសឱ្យលទ្ធផលឆ្លងកាត់ដែលបំភាន់។
  2. 2
    ការគណនា luminance WCAG
    ពណ៌នីមួយៗត្រូវបានប្តូរទៅ luminance ដែលទាក់ទងគ្នាដោយប្រើរូបមន្ត WCAG 2.1៖ តម្លៃប៉ុស្តិ៍ sRGB ត្រូវបាន linearized ជាមួយការកែតម្រូវ gamma piecewise (ចែកនឹង 12.92 ក្រោម 0.03928 លើកទៅកម្លាំង 2.4 ខាងលើវា) រួចផ្តល់ទម្ងន់ជា 0.2126R + 0.7152G + 0.0722B។
  3. 3
    ការត្រួតពិនិត្យសមាមាត្រភាពផ្ទុយគ្នា និងការអនុលោម
    សមាមាត្រភាពផ្ទុយគ្នាត្រូវបានគណនាជា (lighter + 0.05) / (darker + 0.05) និងត្រូតពិនិត្យនឹងកម្រិត WCAG ទាំងប្រាំ៖ AA អត្ថបទធម្មតា (4.5:1), AA អត្ថបទធំ (3:1), AAA អត្ថបទធម្មតា (7:1), AAA អត្ថបទធំ (4.5:1) និងធាតុ UI (3:1)។ លទ្ធផលធ្វើបច្ចុប្បន្នភាពនៅរាល់ការចុចគ្រាប់ចុច។
  4. 4
    ការណែនាំកែសម្រួលរក្សា hue
    នៅពេលគូបរាជ័យ WCAG AA ឧបករណ៍ស្វែងរកលំហភាពភ្លឺ HSL — ជំហានចេញពីភាពភ្លឺដើមក្នុងទិសដៅទាំងពីរ — ដើម្បីរកកំណែជិតបំផុតរបស់ពណ៌នីមួយៗដែលឆ្លងកាត់ 4.5:1 ខណៈរក្សា hue និងសម្បើមដូចគ្នា។ EyeDropper API (Chromium) ក៏មានដែរដើម្បីយកគំរូពណ៌ណាមួយដោយផ្ទាល់ពីអេក្រង់របស់អ្នក។

ឧបករណ៍ពាក់ព័ន្ធ

សំណួរដែលសួរជាញឹកញាប់