როგორ შევამოწმო, აკმაყოფილებს თუ არა ჩემი ტექსტისა და ფონის ფერები WCAG-ს?

შეიყვანეთ hex კოდები ტექსტის ფერისა და ფონის ფერის ველებში, ან გამოიყენეთ ფერის ამომრჩევები. კონტრასტის კოეფიციენტი გამოჩნდება შედეგით გავიდა ან ვერ აკმაყოფილებს AA და AAA ნორმალური და დიდი ტექსტისთვის, ასევე UI კომპონენტებისთვის.

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

AA მოითხოვს 4.5:1-ს ნორმალური ტექსტისთვის და 3:1-ს დიდი ტექსტისთვის. AAA მოითხოვს 7:1-ს ნორმალური ტექსტისთვის და 4.5:1-ს დიდი ტექსტისთვის. UI კომპონენტები და გრაფიკული ობიექტები საჭიროებენ 3:1-ს.

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

ინსტრუმენტი 18pt (24px) ჩვეულებრივ ტექსტს, ან 14pt (18.66px) მუქ ტექსტს განიხილავს როგორც დიდს. უფრო მცირე ტექსტი უნდა აკმაყოფილებდეს ნორმალური ტექსტის უფრო მაღალ ზღვრებს.

ჩემი ფერები ვერ აკმაყოფილებს AA-ს. როგორ გავასწორო ისინი?

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

რომელ ფერის ფორმატებს იღებს ის და შემიძლია თუ არა ეკრანიდან არჩევა?

ის იღებს 3-ნიშნა და 6-ნიშნა hex მნიშვნელობებს, როგორიცაა #abc ან #1e293b. აირჩიეთ ფერი ეკრანიდან ღილაკი ჩნდება ბრაუზერებში, რომლებიც მხარს უჭერენ EyeDropper API-ს, როგორიცაა Chromium.

მართლა უფასოა?

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

მობილურზე მუშაობს?

დიახ. მუშაობს iOS-ისა და Android-ის თანამედროვე მობილურ ბრაუზერებში, არაფრის ინსტალაციის გარეშე.

🌓

WCAG ფერის კონტრასტის შემმოწმებელი უფასოდ

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

მუშაობს ბრაუზერშირეგისტრაცია არ საჭიროა, ამომხტარი ფანჯრები არ არისშესვლა საჭირო არ არისუფასო სამუდამოდ

მუშაობს ოფლაინ ჩატვირთვის შემდეგ

ტექსტის ფერი

ფონის ფერი

დიდი სათაურის ტექსტი

საშუალო სხეულის ტექსტი (18px) კითხვისა და კონტენტისთვის.

ჩვეულებრივი სხეულის ტექსტი (16px) პარაგრაფებისთვის.

პატარა სხეულის ტექსტი (14px) სქოლიოებისა და მეტამონაცემებისთვის.

14,63:1

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

✓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 კომპონენტები / გრაფიკული ობიექტები

საჭიროებს 3.0:1 · გაქვთ 14,63:1

სწრაფი შაბლონები

WCAG 2.1 კონტრასტის სახელმძღვანელოს საფუძველზე. დიდი ტექსტი = 18pt (24px) ჩვეულებრივი ან 14pt (18.66px) თამამი. Hex კოდები ორივე მიმართულებით განახლდება.

გავრცელებული გამოყენება

Audit ვებ გვერდი WCAG შესაბამისობაგაკვეთილი თქვენი საიტის ტექსტი შეფერი შეხვედრის WCAG AA ან AAA კონტრასტ სტანდარტი ხელმისაწვდომობა.
დამტკიცება ბრენდი შეფერი კომბინაციებიდროულად თქვენი ბრენდი შეფერი პალიტრა კოშკი უზრუნველსაყო ისინი შრომა ხელმისაწვდომი UI დიზაინი.
ტესტი მუქი რეჟიმი შეფერი Palettesღია ტექსტი მუქი ფონი შეიძლება ჯერ კი კარგი კონტრასტი - კომპ თქვენი მუქი რეჟიმი პალიტრა კოშკი აქ.
შეფერი Pairing ბეჭდი მასალაPosters, სიგნალი და ბეჭდი მასალა ასევე საჭირო კითხვადი კონტრასტი - სპეციალური უფროსი viewers.
ხელმისაწვდომი ღილების ფერების დიზაინიდარწმუნდით, რომ CTA-ები, მოქმედების ღილებები და ბმულები გადის WCAG-ის წინააღმდეგ მათი ფონების.

როგორ მუშაობს

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

1
თექვსმეტობითი შეყვანა და ნორმალიზაცია
მიღებულია და ნორმალიზდება სრულ RGB სამეულებამდე ორივე, 3-ციფრიანი (#abc) და 6-ციფრიანი (#aabbcc) თექვსმეტობითი მნიშვნელობა. არასწორი შეყვანა მაშინვე უარყოფილია, შავზე ჩუმად ავტომატური გადასვლის ნაცვლად, ასე რომ წითელი ჩარჩო ჩნდება, შემცდარი „გავლის“ შედეგის ნაცვლად.
2
WCAG განათებულობის გამოთვლა
თითოეული ფერი გარდაიქმნება ფარდობით განათებულობად WCAG 2.1 ფორმულის გამოყენებით: sRGB არხის მნიშვნელობები წრფივდება ნაწილობრივი გამა-კორექციით (0.03928-ზე დაბლა 12.92-ზე გაყოფით, ზემოთ 2.4 ხარისხში აყვანით), შემდეგ წონდება, როგორც 0.2126R + 0.7152G + 0.0722B.
3
კონტრასტის კოეფიციენტი და შესაბამისობის შემოწმებები
კონტრასტის კოეფიციენტი გამოითვლება, როგორც (უფრო-ღია + 0.05) / (უფრო-მუქი + 0.05) და მოწმდება ხუთივე WCAG ზღვართან: AA ჩვეულებრივი ტექსტი (4.5:1), AA დიდი ტექსტი (3:1), AAA ჩვეულებრივი ტექსტი (7:1), AAA დიდი ტექსტი (4.5:1) და UI კომპონენტები (3:1). შედეგები ყოველ დაჭერაზე განახლდება.
4
ტონის-შემნარჩუნებელი გამოსწორების შემოთავაზებები
როცა წყვილი WCAG AA-ს ვერ გადის, ხელსაწყო ეძებს HSL-ის სინათლის სივრცეში — ორივე მიმართულებით საწყისი სინათლიდან გარეთ სვლით — თითოეული ფერის უახლოესი ვარიანტის საპოვნელად, რომელიც 4.5:1-ს გადის, იმავე ტონისა და გაჯერების შენარჩუნებით. EyeDropper API (Chromium) ასევე ხელმისაწვდომია ნებისმიერი ფერის თქვენი ეკრანიდან პირდაპირ ასაღებად.

დაკავშირებული ინსტრუმენტები

👁️

ფერების სიბრმავის სიმულატორი

ნახეთ, როგორ გამოიყურება თქვენი დიზაინი ფერთა მხედველობის დარღვევის მქონე ადამიანებისთვის. სიმულაცია გაუკეთებს protanopia-ს, deuteranopia-ს, tritanopia-ს, achromatopsia-ს და უფრო მსუბუქ anomalia-ებს.

სცადეფაილები ლოკალური რჩება

📐

რა არის ჩემი ეკრანის გაფართოება

ნახეთ თქვენი ეკრანის გაფართოება CSS-ში და რეალურ პიქსელებში, ფანჯრის ზომა, პიქსელის თანაფარდობა, ფერის სიღრმე, HDR, სენსორული მხარდაჭერა და განახლების სიხშირე, და დააკოპირეთ ყველაფერი.

სცადე

🖥️

მკვდარი პიქსელების ტესტი

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