ពិនិត្យភាពផ្ទុយពណ៌ WCAG ឥតគិតថ្លៃ
ពិនិត្យថាតើពណ៌ពីរបំពេញតាមស្ដង់ដារ contrast WCAG AA និង AAA សម្រាប់ accessibility ឬអត់។ ការមើលជាមុនផ្ទាល់ k្នុងទំហំអក្សរច្រើន ជាមួយការណែនាំស្វ័យប្រវត្តិ នៅពេល contrast ទាបពេក។
អត្ថបទក្បាលធំ
អត្ថបទអំណានទម្ងន់មធ្យម (18px)។
អត្ថបទអំណានធម្មតា (16px) សម្រាប់កថាខណ្ឌ។
អត្ថបទតូច (14px) សម្រាប់ caption និង metadata។
សមាមាត្រ contrast
ត្រូវការ 4.5:1 · អ្នកមាន 14.63:1
ត្រូវការ 3.0:1 · អ្នកមាន 14.63:1
ត្រូវការ 7.0:1 · អ្នកមាន 14.63:1
ត្រូវការ 4.5:1 · អ្នកមាន 14.63:1
ត្រូវការ 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ធាតុចូល hex និងធ្វើឱ្យស្តង់ដារតម្លៃ hex ទាំង 3-ខ្ទង់ (#abc) និង 6-ខ្ទង់ (#aabbcc) ត្រូវបានទទួល និងធ្វើឱ្យស្តង់ដារទៅ RGB triple ពេញលេញ។ ធាតុចូលមិនត្រឹមត្រូវត្រូវបានបដិសេធភ្លាមៗជំនួសឱ្យលំនាំដើមទៅខ្មៅដោយស្ងៀមស្ងាត់ ដូច្នេះគែមក្រហមលេចឡើងជំនួសឱ្យលទ្ធផលឆ្លងកាត់ដែលបំភាន់។
- 2ការគណនា luminance WCAGពណ៌នីមួយៗត្រូវបានប្តូរទៅ luminance ដែលទាក់ទងគ្នាដោយប្រើរូបមន្ត WCAG 2.1៖ តម្លៃប៉ុស្តិ៍ sRGB ត្រូវបាន linearized ជាមួយការកែតម្រូវ gamma piecewise (ចែកនឹង 12.92 ក្រោម 0.03928 លើកទៅកម្លាំង 2.4 ខាងលើវា) រួចផ្តល់ទម្ងន់ជា 0.2126R + 0.7152G + 0.0722B។
- 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ការណែនាំកែសម្រួលរក្សា hueនៅពេលគូបរាជ័យ WCAG AA ឧបករណ៍ស្វែងរកលំហភាពភ្លឺ HSL — ជំហានចេញពីភាពភ្លឺដើមក្នុងទិសដៅទាំងពីរ — ដើម្បីរកកំណែជិតបំផុតរបស់ពណ៌នីមួយៗដែលឆ្លងកាត់ 4.5:1 ខណៈរក្សា hue និងសម្បើមដូចគ្នា។ EyeDropper API (Chromium) ក៏មានដែរដើម្បីយកគំរូពណ៌ណាមួយដោយផ្ទាល់ពីអេក្រង់របស់អ្នក។
ឧបករណ៍ពាក់ព័ន្ធ
ក្លែងធ្វើការឃើញពណ៌ខ្វាក់
មើលថាការរចនារបស់អ្នកមើលទៅបែបណាចំពោះមនុស្សដែលមានជំងឺ color vision。 Simulate protanopia, deuteranopia, tritanopia, achromatopsia, និង anomaly ស្រាល។
តើគុណភាពបង្ហាញអេក្រង់របស់ខ្ញុំជាអ្វី
មើលកម្រិតបង្ហាញអេក្រង់របស់អ្នកជា CSS និងភីកសែលពិតប្រាកដ ទំហំបង្អួច សមាមាត្រភីកសែល ជម្រៅពណ៌ HDR ការគាំទ្រការប៉ះ និង refresh rate ព្រមទាំងចម្លងទាំងអស់បាន។
ការធ្វើតេស្តភីកសែលងាប់
ពិនិត្យអេក្រង់របស់អ្នករកមើល dead pixel ឬ stuck pixel ជាមួយអេក្រង់ពេញពណ៌ខ្មៅ ស ក្រហម បៃតង ខៀវ និងប្រផេះ ព្រមទាំងឧបករណ៍ជួសជុល stuck pixel តាមជម្រើស។