ფერთა კონტრასტის შემოწმება
აირჩიე ორი ფერი და ნახე კონტრასტის კოეფიციენტი ცოცხალი გადახედვით.
კონტრასტის კოეფიციენტი
—
ქართული ტექსტის ნიმუში კონტრასტის შესამოწმებლად
დიზაინის ხელსაწყო
ფერთა კონტრასტის შემოწმება
შეამოწმე ტექსტი და ფონი WCAG AA და AAA ხელმისაწვდომობის სტანდარტებთან.
ყველა ხელსაწყო
დაკავშირებული ინსტრუმენტები
სხვა დიზაინის და დეველოპერული ხელსაწყოები.
როგორ გამოვიყენოთ ფერთა კონტრასტის შემოწმება
გახსენი ტექსტის ფერის ამრჩევი და აირჩიე ის ფერი, რომლითაც შენი სიტყვები იქნება დაბეჭდილი, შემდეგ გახსენი ფონის ფერის ამრჩევი და აირჩიე ფერი, რომელიც მათ უკან განთავსდება. კონტრასტის კოეფიციენტი განახლდება იმ წამსვე, როცა რომელიმე მნიშვნელობას შეცვლი, ხოლო WCAG AA და AAA გავლის ან ჩავარდნის ნიშნულები გეტყვის, ხელმისაწვდომობის რომელ დონეებს აკმაყოფილებს წყვილი. ქვემოთ ცოცხალი გადახედვა ხატავს ნიმუშ ტექსტს ზუსტად შენს ფერებში, ასე რომ კომბინაციის რეალურ შეგრძნებას აფასებ, არა მხოლოდ რიცხვს. თუ წყვილი ვერ გადის, ცოტათი გააღიავე ან გაამუქე ერთი ფერი და უყურე, როგორ იზრდება კოეფიციენტი, სანამ გაივლის.
რას ნიშნავს კონტრასტის კოეფიციენტი
კონტრასტის კოეფიციენტი ადარებს ორი ფერის აღქმად სიკაშკაშეს და იწერება ერთ რიცხვად ერთის მიმართ — 1:1-დან ორი იდენტური ფერისთვის 21:1-მდე სუფთა შავი სუფთა თეთრზე. ვებკონტენტის ხელმისაწვდომობის სახელმძღვანელო (WCAG) ამ კოეფიციენტს იყენებს იმის გადასაწყვეტად, საკმარისად ადვილად იკითხება თუ არა ტექსტი. უფრო მაღალი რიცხვი ნიშნავს, რომ წინა და ფონური ფერი სიკაშკაშით უფრო შორსაა ერთმანეთისგან, ამიტომ ასოები მკაფიოდ გამოირჩევა. კოეფიციენტი დამოკიდებულია მხოლოდ სიკაშკაშეზე და არა ფერის ტონზე, რის გამოც ორი ფერადი, მაგრამ თითქმის ერთნაირად ნათელი ელფერი შეიძლება სასიამოვნოდ გამოიყურებოდეს და მაინც ჩავარდეს ტესტში.
WCAG კონტრასტის ზღვრები
WCAG ადგენს ორ შესაბამისობის დონეს და ორ ტექსტის ზომას, რაც ოთხ მინიმალურ კოეფიციენტს იძლევა. გამოიყენე ეს ცხრილი სწრაფ საცნობარო მასალად ფერთა წყვილის შემოწმებისას.
| დონე და ტექსტის ზომა | მინიმალური კოეფიციენტი | ტიპური გამოყენება |
|---|---|---|
| AA, ჩვეულებრივი ტექსტი | 4.5:1 | ძირითადი ტექსტი, წარწერები, ბმულები |
| AA, დიდი ტექსტი | 3:1 | სათაურები, დიდი ღილაკები |
| AAA, ჩვეულებრივი ტექსტი | 7:1 | მკაცრი, მაღალი წაკითხვადობის საიტები |
| AAA, დიდი ტექსტი | 4.5:1 | დიდი სათაურები AAA-ს ქვეშ |
| ინტერფეისის ელემენტები და გრაფიკა | 3:1 | ხატულები, საზღვრები, ფორმების კონტურები |
დიდი ტექსტი ნიშნავს დაახლოებით 18pt-ს (24px) ჩვეულებრივ, ან 14pt-ს (18.7px) მუქ ვარიანტში; ამაზე პატარა ყველაფერი ჩვეულებრივ ტექსტად მიიჩნევა და უფრო მაღალ კოეფიციენტს უნდა აკმაყოფილებდეს.
გაანგარიშებული მაგალითი
დავუშვათ, შენი დიზაინი იყენებს საშუალოდ ნაცრისფერ ტექსტს #777777 თეთრ ფონზე #FFFFFF. შემმოწმებელი აჩვენებს დაახლოებით 4.48:1-ს, რაც ოდნავ ჩამოუვარდება AA ჩვეულებრივი ტექსტისთვის საჭირო 4.5:1-ს. ნაცრისფერის ცოტათი გამუქება #767676-მდე კოეფიციენტს 4.54:1-მდე ზრდის და წყვილი ახლა გადის AA-ს. ეს მცირე ცვლილება აჩვენებს, რატომ აქვს მნიშვნელობა ზუსტ რიცხვს: ფერი, რომელიც თვალით „საკმარისად მუქი“ გეჩვენება, მაინც შეიძლება თმის სიგრძით ჩავარდეს და მხოლოდ ზუსტი კოეფიციენტი გეტყვის, უსაფრთხოდ ხარ თუ არა ზღვარს ზემოთ.
რატომ არის ეს ინსტრუმენტი სასარგებლო
დაბალი კონტრასტი ერთ-ერთი ყველაზე გავრცელებული და ყველაზე ადვილად გამოსასწორებელი ხელმისაწვდომობის პრობლემაა ვებში. ტექსტი, რომელიც ფონს ერწყმის, ძნელად იკითხება დაბალი მხედველობის ან ფერთა აღქმის დარღვევის მქონე ადამიანებისთვის და ღლის ყველას, ვინც ტელეფონზე კითხულობს ნათელ მზეზე. ეს შემმოწმებელი აქრობს გამოცნობის საჭიროებას: მაკეტში თვალების მოჭუტვის ნაცვლად იღებ ზუსტ კოეფიციენტს და მკაფიო გავლის ან ჩავარდნის შედეგს თითოეული WCAG დონის მიმართ, ასე რომ დიზაინერებს, დეველოპერებსა და კონტენტის ავტორებს ფერის გადაწყვეტილების მიღება წამებში შეუძლიათ და ისეთ ინტერფეისებს უშვებენ, რომელთა გამოყენებაც უფრო მეტ ადამიანს რეალურად შეუძლია.
სიზუსტე და კონფიდენციალურობა
კოეფიციენტი გამოითვლება WCAG-ის ოფიციალური ფარდობითი სიკაშკაშის ფორმულით — იმავე მათემატიკით, რომელსაც ეკრანის წამკითხველი და აუდიტის ხელსაწყოები ეყრდნობა, ამიტომ შედეგი ემთხვევა იმას, რასაც ფორმალური ხელმისაწვდომობის აუდიტი აჩვენებს. ყველაფერი ლოკალურად მუშაობს შენს ბრაუზერში. ფერები, რომელსაც ირჩევ, არასოდეს იტვირთება, აღირიცხება ან ინახება რომელიმე სერვერზე, რაც ნიშნავს, რომ უსაფრთხოდ შეგიძლია გამოუშვებელი ბრენდის პალიტრებისა და კერძო პროექტების ტესტირება ისე, რომ არაფერი ტოვებდეს შენს მოწყობილობას.
FAQ
რა კონტრასტის კოეფიციენტს უნდა ვუმიზნებდე?
WCAG AA დონესთან შესაბამისობისთვის იმიზნებდე მინიმუმ 4.5:1-ს ჩვეულებრივი ძირითადი ტექსტისთვის და 3:1-ს დიდი ტექსტისთვის. უფრო მკაცრი AAA დონისთვის მიზანი 7:1-ია ჩვეულებრივი ტექსტისთვის და 4.5:1 დიდი ტექსტისთვის. ეჭვის შემთხვევაში აიღე მინიმუმზე მაღალი მაჩვენებელი, რადგან რეალური პირობები — ეკრანის ანარეკლი, დაბალი ხარისხის დისპლეი და წვრილი შრიფტი — ამცირებს ფაქტობრივ კონტრასტს.
რა ითვლება დიდ ტექსტად?
WCAG დიდ ტექსტად განსაზღვრავს დაახლოებით 18pt-ს (დაახლოებით 24px) ჩვეულებრივი სისქისთვის, ან 14pt-ს (დაახლოებით 18.7px), როცა ტექსტი მუქია (bold). დიდ ტექსტს დაბალი კონტრასტის კოეფიციენტი ეშვება, რადგან უფრო დიდი ასოები უკეთ იკითხება მაშინაც კი, როცა ფერებს შორის სხვაობა ნაკლებია. ამ ზომებზე პატარა ყველაფერი ჩვეულებრივ ტექსტად მიიჩნევა და მაღალ ზღვარს უნდა აკმაყოფილებდეს.
რატომ აქვს ფერთა კონტრასტს მნიშვნელობა ხელმისაწვდომობისთვის?
ბევრ ადამიანს აქვს დაბალი მხედველობა, ფერთა აღქმის დარღვევა, ან უბრალოდ კითხულობს დაბალი ხარისხის ეკრანებზე ნათელ შუქზე. საკმარისი კონტრასტი ტექსტს მათთვის წაკითხვადს ხდის და თვალის დაღლას ამცირებს ყველასთვის. ბევრ ქვეყანაში ხელმისაწვდომობის კანონები და სტანდარტები WCAG-ს ეყრდნობა, ამიტომ ამ კოეფიციენტების დაცვა ხშირად სამართლებრივი და პროფესიული მოთხოვნაა და არა მხოლოდ სასურველი დამატება.
როგორ გამოითვლება კონტრასტის კოეფიციენტი?
თითოეული ფერი გადაიყვანება ფარდობითი სიკაშკაშის მნიშვნელობად WCAG-ის ოფიციალური ფორმულით, რომელიც წითელ, მწვანე და ლურჯ არხებს ისე ანაწილებს, როგორც ადამიანის თვალი აღიქვამს სიკაშკაშეს. შემდეგ კოეფიციენტი არის (L1 + 0.05) / (L2 + 0.05), სადაც L1 უფრო ნათელი ფერია, ხოლო L2 — უფრო მუქი. შედეგი მერყეობს 1:1-დან იდენტური ფერებისთვის 21:1-მდე სუფთა შავის სუფთა თეთრზე.
ცვლის თუ არა შედეგს ორი ფერის თანმიმდევრობა?
არა. კონტრასტი არის ფარდობა უფრო ნათელ და უფრო მუქ ფერს შორის, ამიტომ ტექსტისა და ფონის ფერების გაცვლა ერთსა და იმავე რიცხვს იძლევა. იცვლება მხოლოდ წაკითხვადობა პრაქტიკაში: მუქი ტექსტი ნათელ ფონზე და ნათელი ტექსტი მუქ ფონზე ორივე შეიძლება გავიდეს, თუმცა საკმაოდ განსხვავებულად აღიქმებოდეს, ამიტომ ყოველთვის შეამოწმე ცოცხალი გადახედვაც, არა მხოლოდ რიცხვი.