ფერთა კონტრასტი: WCAG-ის კოეფიციენტები, შემოწმება და გამოსწორება

ღია ნაცრისფერი ტექსტი თეთრ ფონზე დიზაინის ფაილში სუფთად გამოიყურება. მზის კაშკაშა შუქზე ტელეფონის ეკრანზე ან მხედველობადაქვეითებული ადამიანისთვის კი მისი წაკითხვა მძიმე შრომაა. თანაც ეს ხელმისაწვდომობის ყველაზე გავრცელებული შეცდომაა: WebAIM Million 2026-ის (იხსნება ახალ ჩანართში) მონაცემებით, დაბალკონტრასტული ტექსტი მილიონი წამყვანი საიტის მთავარი გვერდების 83,9%-ზე აღმოჩნდა, საშუალოდ 34 ცალკეული შემთხვევით გვერდზე.

კარგი ამბავი ის არის, რომ კონტრასტი იზომება, ზღვრები მკაფიოა და გამოსწორებაც ძირითადად იაფია. ამ სახელმძღვანელოში ნახავთ საჭირო რიცხვებს, უფასო ხელსაწყოებს და ბრენდის ფერების გამოსწორების გზას ყველაფრის თავიდან დაწყების გარეშე.

რა არის ფერთა კონტრასტის კოეფიციენტი?

კონტრასტის კოეფიციენტი არის რიცხვი, რომელიც ორი ფერის, ჩვეულებრივ ტექსტისა და მისი ფონის, ფარდობით სიკაშკაშეს (luminance) ადარებს. WCAG მას ფიქსირებული ფორმულით ითვლის და შედეგი 1:1-დან (განსხვავება არ არის, თეთრი თეთრზე) 21:1-მდე (შავი თეთრზე) მერყეობს. რაც უფრო მაღალია რიცხვი, მით უფრო ადვილია ორი ფერის ერთმანეთისგან გარჩევა.

ფორმულაა (L1 + 0,05) / (L2 + 0,05), სადაც L1 უფრო ღია ფერის ფარდობითი სიკაშკაშეა, L2 კი უფრო მუქისა. მისი ხელით გამოთვლა არასოდეს დაგჭირდებათ, მაგრამ ერთი დეტალი მნიშვნელოვანია: მხოლოდ სიკაშკაშე ითვლება და არა ფერის ტონი. სწორედ ამიტომ შეიძლება წითელი ტექსტი მწვანე ფონზე მკვეთრად გამოიყურებოდეს და მაინც ცუდი შედეგი ჰქონდეს.

მეორე დეტალი, რომელიც ხშირად გამორჩებათ, დამრგვალებაა. W3C-ის განმარტებით დოკუმენტში 1.4.3 კრიტერიუმზე (იხსნება ახალ ჩანართში) ნათქვამია, რომ გამოთვლილი მნიშვნელობები „არ უნდა დამრგვალდეს (მაგ., 4,499:1 ვერ დააკმაყოფილებს 4,5:1 ზღვარს)“. ასე რომ, ნაცრისფერი #767676 თეთრზე (4,54:1) მოთხოვნას აკმაყოფილებს, #777777 თეთრზე (4,48:1) კი ვერა, თუმცა თვალით მათ ვერავინ გაარჩევს.

კონტრასტის რა კოეფიციენტს მოითხოვს WCAG?

AA დონისთვის, რომელზეც კანონებისა და ხელშეკრულებების უმეტესობა მიუთითებს, ჩვეულებრივ ტექსტს ფონთან მიმართებით მინიმუმ 4,5:1 სჭირდება, დიდ ტექსტს კი 3:1 (წარმატების კრიტერიუმი 1.4.3). ინტერფეისის კომპონენტებსა და აზრის მატარებელ გრაფიკას მეზობელ ფერებთან მიმართებით 3:1 სჭირდება (1.4.11). უფრო მკაცრი AAA დონე ჩვეულებრივი ტექსტისთვის 7:1-ს მოითხოვს, დიდისთვის კი 4,5:1-ს (1.4.6).

რატომ 4,5:1? W3C განმარტავს, რომ ეს ზღვარი „აკომპენსირებს კონტრასტისადმი მგრძნობელობის იმ დანაკარგს, რომელიც, როგორც წესი, აქვთ მომხმარებლებს მხედველობის ისეთი დაქვეითებით, რომელიც დაახლოებით 20/40 მხედველობის ექვივალენტურია“. სხვა სიტყვებით, ის ზომიერად დაქვეითებული მხედველობის მქონე ადამიანებზეა გათვლილი, მათ შორის ბევრ ხანდაზმულ მომხმარებელზე, რომლებიც თავს შეზღუდული შესაძლებლობის მქონედ არასოდეს ჩათვლიდნენ.

ზოგიერთ ტექსტზე მოთხოვნა არ ვრცელდება: ლოგოებსა და ბრენდის სახელებზე, წმინდად დეკორატიულ ტექსტზე, ტექსტზე, რომელსაც ვერავინ ხედავს, სურათში არსებულ ტექსტზე, თუ სურათი სხვა მნიშვნელოვან ვიზუალურ შიგთავსსაც შეიცავს, და არააქტიური (გათიშული) მართვის ელემენტების ტექსტზე. თქვენი ლოგო შეიძლება ისეთივე დარჩეს, როგორიც არის. აბზაცი, რომელიც ლოგოს მკრთალი ფერით არის აკრეფილი, ვერა.

რა ითვლება დიდ ტექსტად?

WCAG-ში დიდი ტექსტი ნიშნავს მინიმუმ 18 პუნქტს, ან მინიმუმ 14 პუნქტს, თუ ტექსტი მუქია. W3C ამას დაახლოებით 24 CSS პიქსელად და 18,5 პიქსელად (მუქი) გადაიყვანს. ყველაფერს, რაც ამაზე პატარაა, სრული 4,5:1 სჭირდება. ძირითადი ტექსტი, სურათების წარწერები, ფორმის წარწერები, ფასები და გვერდის ქვედა ნაწილის ბმულები თითქმის არასოდეს არის დიდი ტექსტი, ამიტომ მათ უფრო მაღალი კოეფიციენტი სჭირდებათ.

აი, როგორ გამოიყურება ეს პრაქტიკაში. ნაცრისფერი #949494 თეთრზე 3,03:1-ს იძლევა. ეს საკმარისია 28-პიქსელიანი სათაურისთვის და შეცდომაა იმავე ფერის 16-პიქსელიანი აბზაცისთვის. ბევრი საიტი სათაურებზე აკმაყოფილებს მოთხოვნას და ყველაფერზე, რაც მათ ქვემოთაა, ვერა.

თხელ და დეკორატიულ შრიფტებს მეტი ყურადღება სჭირდება. W3C აღნიშნავს, რომ მოგლუვების (anti-aliasing) გამო „განსაკუთრებით თხელი ან უჩვეულო შრიფტები მომხმარებლის აგენტებმა შესაძლოა გაცილებით მკრთალი ფერით გამოსახონ“, ვიდრე თქვენ მიერ არჩეული ფერია. თუ თქვენი ბრენდის შრიფტი თხელია, 4,5:1-ზე მაღლა დაიტოვეთ მარაგი და ნუ დაუმიზნებთ 4,51-ს.

ეხება თუ არა კონტრასტი ღილაკებს, ხატულებს, ფოკუსის ინდიკატორებსა და დიაგრამებს?

დიახ. წარმატების კრიტერიუმის 1.4.11 (AA დონე) მიხედვით, ყველაფერს, რაც ადამიანმა უნდა დაინახოს მართვის ელემენტის, მისი მდგომარეობის ან გრაფიკის ამოსაცნობად, მეზობელ ფერებთან მიმართებით 3:1 სჭირდება. ეს მოიცავს ფორმის ველების საზღვრებს, ტექსტური წარწერის გარეშე დატოვებულ ხატულებს, ფოკუსის კონტურებს, მოსანიშნი ველებისა და გადამრთველების მდგომარეობებს, დიაგრამების ხაზებსა და სეგმენტებს. ღილაკის შიგნით ტექსტს კი მაინც 4,5:1 სჭირდება.

• ფორმის ველები: ღია ნაცრისფერი #CCCCCC საზღვარი თეთრზე 1,61:1-ს იძლევა. თუ ეს მკრთალი ხაზი ერთადერთია, რაც აჩვენებს, სად უნდა აიკრიფოს ტექსტი, მოთხოვნა არ სრულდება.
• ღილაკები: WCAG არ მოითხოვს ხილულ საზღვარს ყველა ღილაკის გარშემო. W3C-ის განმარტებით დოკუმენტში 1.4.11 კრიტერიუმზე (იხსნება ახალ ჩანართში) ნათქვამია, რომ საზღვარი მხოლოდ მაშინაა საჭირო, როცა მართვის ელემენტის ამოცნობის სხვა ვიზუალური გზა არ არსებობს. თუ ღილაკი მხოლოდ თავისი ფერადი ფორმით ამოიცნობა, ამ ფორმას გვერდთან მიმართებით 3:1 სჭირდება.
• ხატულები: ძიების გამადიდებელ შუშას, სურვილების სიის გულს ან კალათის ხატულას, რომელთა გვერდით ტექსტი არ წერია, 3:1 სჭირდება.
• ფოკუსის ინდიკატორები: კონტური, რომელიც კლავიატურის ფოკუსს აჩვენებს, გარშემო არსებულ ფონთან საკმარის კონტრასტში უნდა იყოს. ფოკუსის ახალ კრიტერიუმებს ჩვენი WCAG 2.2-ის სახელმძღვანელო განიხილავს.
• დიაგრამები: ხაზოვანი დიაგრამის ხაზებს და წრიული დიაგრამის სექტორებს 3:1 სჭირდებათ, თუ იგივე მნიშვნელობები ტექსტითაც არ არის ნაჩვენები.
• გათიშულ მართვის ელემენტებზე მოთხოვნა არ ვრცელდება, თუმცა ადამიანს მაინც უნდა შეეძლოს გაიგოს, შეიძლება თუ არა ღილაკზე დაჭერა.

ტექსტში ჩართული ბმულები განსაკუთრებული შემთხვევაა. თუ ისინი მხოლოდ ფერით გამოირჩევა, ხაზგასმის გარეშე, W3C-ის ტექნიკა G183 (იხსნება ახალ ჩანართში) ბმულის ფერსა და მიმდებარე ტექსტს შორის 3:1-ს მოითხოვს, ამასთან ორივეს ფონთან მიმართებით მაინც 4,5:1 სჭირდება. სამი ისეთი ფერის პოვნა, რომელიც ყველა ამ პირობას აკმაყოფილებს, რთულია. ხაზგასმა გაცილებით მარტივი გამოსავალია.

როგორ შევამოწმოთ ფერთა კონტრასტი?

კონკრეტული ფერთა წყვილისთვის გამოიყენეთ კონტრასტის უფასო შემმოწმებელი, ცოცხალი გვერდებისთვის ბრაუზერის დეველოპერის ხელსაწყოები, მთელ საიტზე პრობლემური ადგილების საპოვნელად კი ავტომატური სკანირება. შემდეგ თვალით შეამოწმეთ ის, რასაც ხელსაწყოები ვერ ამჩნევენ: ტექსტი ფოტოებსა და გრადიენტებზე, მაუსის მიტანისა და ფოკუსის მდგომარეობები, ველების მინიშნების (placeholder) ტექსტი და შეცდომის შეტყობინებები. ამას გვერდის თითო შაბლონზე რამდენიმე წუთი სჭირდება.

• WebAIM Contrast Checker (იხსნება ახალ ჩანართში): შეიყვანეთ ორი hex კოდი და მიიღებთ კოეფიციენტს და შეფასებას, აკმაყოფილებს თუ არა ის მოთხოვნას ჩვეულებრივი ტექსტისთვის, დიდი ტექსტისთვის და გრაფიკული ობიექტებისთვის. სიკაშკაშის სლაიდერი გამოგადგებათ უახლოესი შესაბამისი ელფერის მოსაძებნად.
• Colour Contrast Analyser (იხსნება ახალ ჩანართში): Vispero-ს უფასო სამაგიდო აპლიკაცია Windows-ისა და macOS-ისთვის. მისი პიპეტი ეკრანის ნებისმიერ პიქსელს იღებს, რაც სასარგებლოა სურათებზე განთავსებული ტექსტისთვის, PDF-ებისა და აპლიკაციებისთვის, და მას ფერთა აღქმის დარღვევის სიმულატორიც აქვს.
• Chrome DevTools: ინსპექტორში (Inspect) მონიშნეთ ტექსტის ფრაგმენტი და გახსენით ფერის ამრჩევი. მისი კონტრასტის კოეფიციენტის განყოფილება (იხსნება ახალ ჩანართში) AA და AAA ზღვრების ხაზებს აჩვენებს და შესაბამის ფერსაც შემოგთავაზებთ. CSS Overview პანელი გვერდზე კონტრასტის ყველა პრობლემას ჩამოთვლის.
• ავტომატური შემმოწმებლები: ბრაუზერის გაფართოებები და Lighthouse მთელ გვერდზე დაბალკონტრასტულ ტექსტს მონიშნავენ, მაგრამ სურათებსა და გრადიენტებზე განთავსებულ ტექსტს ხშირად ხელით შესამოწმებლად აღნიშნავენ და არც დადებით, არც უარყოფით შეფასებას არ აძლევენ.

სადაც ხელსაწყოები ვერ გშველით, ხელით შეამოწმეთ. მთავარ ფოტოზე (hero) განთავსებული ტექსტისთვის შეამოწმეთ სურათის ყველაზე ღია ნაწილი ყველაზე ღია ასოების უკან; W3C ფონურ სურათებს არასაკმარისი კონტრასტით ცნობილ შეცდომად ასახელებს (F83). მიიტანეთ მაუსი ღილაკებზე, Tab-ით გადადით მათზე, გამოიწვიეთ ფორმის შეცდომა, გადართეთ მუქ რეჟიმზე, თუ ასეთი გაქვთ. მუქმა თემამაც შეიძლება ვერ დააკმაყოფილოს მოთხოვნა: ნაცრისფერი #757575 ფონზე #121212 4,07:1-ს იძლევა. ჩვენი სახელმძღვანელო როგორ შევამოწმოთ ვებსაიტის ხელმისაწვდომობა კონტრასტს სხვა სწრაფ ხელით შემოწმებებთან ერთად განიხილავს.

როგორ გამოვასწოროთ დაბალი კონტრასტი ბრენდის შეცვლის გარეშე?

ჩვეულებრივ, ტექსტისა და პატარა ელემენტებისთვის ბრენდის ფერის მუქი ელფერის დამატებით, ხოლო ორიგინალი ფერი დიდი სათაურებისთვის, ფონებისა და ილუსტრაციებისთვის რჩება. ბრენდის ბევრი ფერი მოთხოვნას მხოლოდ მცირე ზომებზე ვერ აკმაყოფილებს. ღია ბრენდის ფერზე თეთრი ტექსტის მუქით შეცვლა ხშირად საკმარისია, და ვიზიტორების უმეტესობა მხოლოდ იმას შეამჩნევს, რომ გვერდის კითხვა გაადვილდა.

1. ბრენდის თითოეული ფერისთვის შექმენით ტექსტისთვის უსაფრთხო ვერსია, თქვენს ძირითად ფონებთან მინიმუმ 4,5:1 კოეფიციენტით, და გამოიყენეთ ის ძირითადი ტექსტისთვის, ბმულებისა და პატარა ხატულებისთვის.
2. ორიგინალი კაშკაშა ფერი გამოიყენეთ დიდი სათაურებისთვის (იქ 3:1 საკმარისია), ფონებისთვის, ილუსტრაციებისა და დეკორისთვის.
3. ბრენდის ღია ფერებზე ღილაკის ტექსტი თეთრიდან მუქზე შეცვალეთ.
4. ფოტოებზე განთავსებული ტექსტის ქვეშ მოათავსეთ მყარი ან ნახევრად გამჭვირვალე ფირფიტა.
5. შეამოწმეთ ყველა მდგომარეობა: მაუსის მიტანა, ფოკუსი, ნანახი ბმული, არჩეული ელემენტი, შეცდომა და მინიშნების ტექსტი.
6. შესაბამისი წყვილები დიზაინ-ტოკენებად ან თემის პარამეტრებად შეინახეთ, რომ ახალმა გვერდებმა ისინი მემკვიდრეობით მიიღონ და ყოველ ჯერზე თავიდან გამოგონება არ დასჭირდეთ.

დიზაინი ფერთა აღქმის დარღვევის გათვალისწინებით: რატომ არ კმარა მხოლოდ ფერი

კონტრასტი და ფერი სხვადასხვა პრობლემაა. Colour Blind Awareness-ის (იხსნება ახალ ჩანართში) მონაცემებით, ფერთა აღქმის დარღვევა (დალტონიზმი) დაახლოებით ყოველ მე-12 მამაკაცს და ყოველ 200-ე ქალს აქვს, ყველაზე ხშირად წითლისა და მწვანის გარჩევის სირთულის სახით. WCAG 1.4.1 (იხსნება ახალ ჩანართში) (A დონე) ამბობს, რომ ფერი არ უნდა იყოს ინფორმაციის გადმოცემის ერთადერთი ვიზუალური საშუალება, ამიტომ ფერს ტექსტი, ხატულები, შტრიხები ან ხაზგასმა დაურთეთ.

• ფორმის შეცდომები: მხოლოდ წითელი საზღვარი საკმარისი არ არის. ველის გვერდით დაამატეთ შეტყობინება, მაგალითად „შეიყვანეთ საფოსტო ინდექსი“, სასურველია ხატულასთან ერთად.
• მარაგი და სტატუსი: მწვანე ან წითელი წერტილი პროდუქტის გვერდით ბევრ მყიდველს არაფერს ეუბნება. დაწერეთ „მარაგშია“ ან „გაყიდულია“.
• დიაგრამები: ლეგენდა, რომელიც ფერების შესაბამისობას ეყრდნობა, ძნელად იკითხება. ხაზებს წარწერები პირდაპირ მიუწერეთ ან გამოიყენეთ შტრიხები და ხაზის სხვადასხვა სტილი.
• ბმულები: ძირითად ტექსტში ხაზი გაუსვით, ზემოთ ახსნილი მიზეზების გამო.

პრობლემის საკუთარი თვალით სანახავად Chrome-ის DevTools-ს მხედველობის დარღვევების ემულაცია შეუძლია, Colour Contrast Analyser-საც აქვს სიმულატორი. კონტრასტი აქაც გეხმარებათ: კოეფიციენტი სიკაშკაშეს ზომავს და არა ტონს, ამიტომ მაღალი კოეფიციენტის მქონე ორი ფერი გარჩევადი რჩება მაშინაც კი, როცა მათი ტონები ერთმანეთს ჰგავს. იმის შესახებ, როგორ აწყობენ საკუთარ მოწყობილობებს მხედველობადაქვეითებული და სხვა დარღვევების მქონე ადამიანები, წაიკითხეთ როგორ იყენებენ ვებს შეზღუდული შესაძლებლობის მქონე ადამიანები.

საკმარისია თუ არა მაღალი კონტრასტის რეჟიმები და კონტრასტის გადამრთველები?

არა. ოპერაციული სისტემის კონტრასტული თემები და გვერდზე განთავსებული კონტრასტის გადამრთველები ეხმარება ადამიანებს, რომლებმაც იციან, რომ მეტი კონტრასტი სჭირდებათ, და თავად რთავენ მას. მაგრამ WCAG თქვენს გვერდს ნაგულისხმევ მდგომარეობაში აფასებს, ამიტომ ფერები, რომლებსაც ყოველი ვიზიტორი პირველად ხედავს, მოთხოვნას მაინც უნდა აკმაყოფილებდეს. გადამრთველი დამატებითი ვარიანტია მათთვის, ვისაც მეტი სურს, და არა გამოსავალი ფერებისთვის, რომლებიც მოთხოვნას ვერ აკმაყოფილებს.

შეზღუდული შესაძლებლობის მქონე ზოგიერთი ადამიანი Windows-ის კონტრასტულ თემებს იყენებს, რომლებიც თქვენს ფერებს საკუთარით ცვლის. ღირს საიტის გამოცდა ასეთი თემით: ფონური სურათებით აწყობილი ხატულები შეიძლება გაქრეს, მხოლოდ box-shadow-ით დახატული ფოკუსის სტილებიც შეიძლება გაუჩინარდეს. CSS-ის მედიამოთხოვნა prefers-contrast კი საშუალებას გაძლევთ, უფრო მაღალკონტრასტული ვერსია შესთავაზოთ მათ, ვინც ეს სისტემის პარამეტრებში მოითხოვა.

ჩვენს ვიჯეტს აქვს კონტრასტის პარამეტრი და პროფილი „დალტონიზმი“, და ზოგიერთი ვიზიტორისთვის ისინი სასარგებლოა. მაინც იმავეს გეტყვით: თუ თქვენი ძირითადი ტექსტი #999999-ია თეთრზე, CSS შეცვალეთ. ვიჯეტი ვიზიტორს, რომელსაც მეტი კონტრასტი სურს, მისი მიღების საშუალებას აძლევს. ნაგულისხმევ ფერებს, რომლებიც მოთხოვნას ვერ აკმაყოფილებს, შესაბამისს ის ვერ ხდის, და ამას ჩვენი დოკუმენტაციის WCAG-ის განყოფილებაც ამბობს.