WCAG 2.1 / 2.2 კონტრასტის სახელმძღვანელო პრინციპები
ინტერნეტის ხელმისაწვდომობის უზრუნველსაყოფად, ფერების სწორად შერჩევას გადამწყვეტი მნიშვნელობა აქვს. „კონტრასტის შემმოწმებელი“ არის ინსტრუმენტი, რომელიც საშუალებას გაძლევთ შეიყვანოთ ტექსტის ფერი და ფონის ფერი, რათა დაადგინოთ მათ შორის კონტრასტის კოეფიციენტი WCAG 2.1 / 2.2 სტანდარტების შესაბამისად. ხელსაწყო იყენებს სწორედ WCAG 2.1 / 2.2 ფორმულას, რომელიც წარმოადგენს დღევანდელი ხელმისაწვდომობის წესებისა და აუდიტების საფუძველს.
ეს ინსტრუმენტი აჩვენებს, თუ ხელმისაწვდომობის რომელ დონეებს (AA და AAA) აკმაყოფილებს თქვენ მიერ შერჩეული ფერების კომბინაცია ჩვეულებრივი ტექსტისთვის, დიდი ტექსტისთვის და ინტერფეისის ელემენტებისთვის. კონტრასტის კოეფიციენტი მერყეობს 1:1-დან (რაც ნიშნავს, რომ კონტრასტი საერთოდ არ არის) 21:1-მდე (რაც არის მაქსიმალური კონტრასტი, მაგალითად, შავი თეთრზე).
ხელსაწყოს შესაყვანი მონაცემები და მხარდაჭერილი ფორმატები
ხელსაწყოში ფერების შესაყვანად გამოიყენება ორი ძირითადი ველი:
- ტექსტის ფერი: ფერის მნიშვნელობა, სადაც მისაღები ფორმატებია Hex მნიშვნელობები (მაგალითად,
#1a1a1a),rgb()მნიშვნელობები (მაგალითად,rgb(26, 26, 26)) ანhsl()მნიშვნელობები. - ფონის ფერი: ფერის მნიშვნელობა, სადაც ასევე მხარდაჭერილია Hex მნიშვნელობები (მაგალითად,
#1a1a1a),rgb()მნიშვნელობები (მაგალითად,rgb(26, 26, 26)) ანhsl()მნიშვნელობები.
ხელსაწყოში ჩაშენებულია ადგილების შესაცვლელი ღილაკი, რომელიც ტექსტისა და ფონის ფერებს ურთიერთგადაცვლის. საწყის ეტაპზე, ხელსაწყოში ავტომატურად მითითებულია ტექსტის ფერად #4f46e5, ხოლო ფონის ფერად #ffffff, რაც იძლევა 6.29 კონტრასტის კოეფიციენტს.
თუ შეიყვანთ არავალიდურ მონაცემებს, სისტემა აჩვენებს შესაბამის შეცდომებს:
- ტექსტის არასწორი ფერის შემთხვევაში გამოჩნდება შეტყობინება: „შეიყვანეთ ტექსტის ვალიდური ფერი, მაგალითად: #1a1a1a ან rgb(26, 26, 26).“.
- ფონის არასწორი ფერის შემთხვევაში გამოჩნდება შეტყობინება: „შეიყვანეთ ფონის ვალიდური ფერი, მაგალითად: #ffffff ან rgb(255, 255, 255).“.
შედეგების ინტერპრეტაცია და შეფასების კრიტერიუმები
ფერების შეყვანის შემდეგ, ხელსაწყო ითვლის და აჩვენებს შემდეგ მონაცემებს:
- კონტრასტის კოეფიციენტი: გამოითვლება ტექსტისა და ფონის ფერებს შორის და ეკრანზე გამოდის ფორმატით „X:1“.
- ჩვეულებრივი ტექსტი: აჩვენებს სტატუსს „გაიარა“ ან „ვერ გაიარა“ როგორც AA, ისე AAA დონეებისთვის.
- დიდი ტექსტი: აჩვენებს სტატუსს „გაიარა“ ან „ვერ გაიარა“ AA და AAA დონეებისთვის.
- ინტერფეისი და გრაფიკა: აჩვენებს სტატუსს „გაიარა“ ან „ვერ გაიარა“ მხოლოდ ერთი, 3:1 ზღვრის მიმართ. ამ სტრიქონს არ გააჩნია AA და AAA დონეების დიფერენცირება — ხელსაწყო მისთვის მხოლოდ ერთ შედეგს აჩვენებს.
- ვერდიქტი: შემაჯამებელი შეტყობინება, რომელიც მიუთითებს უმაღლეს გავლილ დონეს. შეტყობინებები შეიძლება იყოს შემდეგი:
- „აკმაყოფილებს AA და AAA სტანდარტებს ჩვეულებრივი ტექსტისთვის.“
- „აკმაყოფილებს AA სტანდარტს ჩვეულებრივი ტექსტისთვის.“
- „აკმაყოფილებს AA სტანდარტს მხოლოდ დიდი ტექსტისთვის.“
- „AA მინიმუმზე დაბალია — გაზარდეთ კონტრასტი.“
კონტრასტის წესები და ზღვრები სხვადასხვა ელემენტისთვის
სტანდარტის მიხედვით, სხვადასხვა ტიპის კონტენტს განსხვავებული მოთხოვნები აქვს:
- ჩვეულებრივი ტექსტი: AA დონის მისაღწევად საჭიროა მინიმუმ 4.5:1 კონტრასტის კოეფიციენტი. AAA დონისთვის კი მოითხოვება მინიმუმ 7:1 კოეფიციენტი.
- დიდი ტექსტი: ვინაიდან დიდი ზომის ტექსტი უფრო ადვილად იკითხება, მისთვის მოთხოვნები შედარებით დაბალია. AA დონისთვის საჭიროა მინიმუმ 3:1 კოეფიციენტი, ხოლო AAA დონისთვის — მინიმუმ 4.5:1 კოეფიციენტი. დიდი ტექსტი განისაზღვრება, როგორც ტექსტი 18pt-დან (დაახლოებით 24px), ან 14pt-დან (დაახლოებით 18.5px), თუ ის არის მუქი (bold).
- ინტერფეისი და გრაფიკა: ამ კატეგორიისთვის საჭიროა მინიმუმ 3:1 კონტრასტის კოეფიციენტი. ეს არის ერთადერთი კატეგორია, რომელსაც აქვს ერთი კონკრეტული ზღვარი და არ იყოფა ცალკეულ AA და AAA დონეებად.
ვისთვის არის განკუთვნილი ეს ხელსაწყო
კონტრასტის შემოწმება მნიშვნელოვანია ციფრული პროდუქტების შექმნის სხვადასხვა ეტაპზე:
- დიზაინერებისთვის, რათა შეამოწმონ ტექსტისა და ინტერფეისის კომპონენტების კითხვადობა.
- დეველოპერებისთვის, რათა დარწმუნდნენ, რომ მათი კოდი შეესაბამება დადგენილ ხელმისაწვდომობის სტანდარტებს.
- კონტენტის გუნდებისთვის, რომლებიც ამოწმებენ ფერების კონტრასტს თავიანთ საინფორმაციო და სარეკლამო მასალებში.
მონაცემთა დამუშავება და კონფიდენციალურობა
ამ ხელსაწყოს გამოყენებისას თქვენი მონაცემები სრულად დაცულია. ყოველი შემოწმება სრულდება უშუალოდ თქვენს ბრაუზერში. თქვენ მიერ შეყვანილი არცერთი მონაცემი ან ფერის მნიშვნელობა არ იტვირთება BroBroGo-ს სერვერებზე.
ხშირად დასმული კითხვები
რას ნიშნავს AA და AAA შედეგები?
AA არის დონე, რომლისკენაც საიტების უმეტესობა ისწრაფვის: მას სჭირდება მინიმუმ 4.5:1 პროპორცია ჩვეულებრივი ტექსტისთვის და 3:1 დიდი ტექსტისთვის. AAA უფრო მკაცრია — 7:1 ჩვეულებრივი ტექსტისთვის და 4.5:1 დიდი ტექსტისთვის. კონტრასტის კოეფიციენტი მერყეობს 1:1-დან (კონტრასტის გარეშე) 21:1-მდე (შავი თეთრზე).
რა ითვლება დიდ ტექსტად?
ტექსტი 18pt-დან (დაახლოებით 24px), ან 14pt-დან (დაახლოებით 18.5px) თუ ის მუქია (bold). დიდი ზომის ტექსტი უფრო ადვილად იკითხება დაბალი კონტრასტის პირობებშიც, ამიტომ ის აკმაყოფილებს AA სტანდარტს 3:1 პროპორციით და AAA-ს 4.5:1 პროპორციით, ნაცვლად ჩვეულებრივი ტექსტის უფრო მკაცრი ზღვრებისა.
ფერის რომელი ფორმატების შეყვანა შემიძლია?
შეგიძლიათ ჩაწეროთ hex მნიშვნელობა (მაგ. #1a1a1a), rgb() მნიშვნელობა (მაგ. rgb(26, 26, 26)) ან hsl() მნიშვნელობა — ან დააწკაპუნოთ ნიმუშზე ფერის ასარჩევად. ადგილების შესაცვლელი ღილაკით შეგიძლიათ ტექსტისა და ფონის ფერები ურთიერთგადაცვალოთ.
ეს არის WCAG 2 თუ უფრო ახალი APCA მეთოდი?
ეს ხელსაწყო იყენებს WCAG 2.1 / 2.2 ფორმულას, რომელსაც ეყრდნობა დღევანდელი ხელმისაწვდომობის წესები და აუდიტები. APCA არის უფრო ახალი, აღქმითი მეთოდი, რომელიც ჯერ კიდევ მუშავდება WCAG 3-ისთვის — ის პერსპექტიულია, მაგრამ ჯერ არ არის სავალდებულო სტანდარტი, ამიტომ აქ წარმოდგენილი შედეგები მას არ იყენებს.