დაწყებაGet started

ხელმისაწვდომობაAccessibility

აფთიაქის საიტს ყველა ასაკის და მხედველობის ადამიანი იყენებს. სისტემა WCAG 2.1 AA დონეს ემყარება: ტექსტი ≥ 4.5:1, ინტერფეისის კიდეები და ფოკუსი ≥ 3:1.

People of every age and eyesight use a pharmacy site. The system targets WCAG 2.1 AA: text ≥ 4.5:1, UI boundaries and focus ≥ 3:1.

კონტრასტიContrast

ცხრილი ცოცხლად ითვლება მიმდინარე ბრენდისა და თემისთვის:Computed live for the current brand and theme: . შეცვალეთ ბრენდი ან თემა ზედა მენიუში.Switch brand or theme in the header.

ნიმუშიSample	წყვილიPair	კონტრასტიRatio	მინიმუმიMinimum

იგივე შემოწმება ექვსივე კომბინაციისთვის (3 ბრენდი × 2 თემა) scripts/check-tokens.mjs-ში ეშვება.

The same check runs for all six combinations (3 brands × 2 themes) in scripts/check-tokens.mjs.

ბრენდის წესებიBrand rules

ფარმადეპო: ფირუზისფერი თეთრ ტექსტს ვერ იტევსPharmadepot: the teal can't carry white text

ყიდვაBuy now 6.57:1

✓ ასე✓ Do ღილაკზე თეთრი ტექსტი — #008486-ზე (4.52:1). #00AAAD ზოლზე — მუქი ტექსტი.White text goes on #008486 (4.52:1). On #00AAAD bands, use dark ink.

ყიდვაBuy now

✗ ასე არა✗ Don't თეთრი ტექსტი #00AAAD-ზე — 2.86:1.White text on #00AAAD — 2.86:1.

ყვითელი მხოლოდ ფონიაYellow is a fill, never text

−20% −15%

✓ ასე✓ Do ყვითელ ფონზე მუქი ლურჯი ან მუქი ტექსტი.Navy or dark ink on yellow.

−15% −20%

✗ ასე არა✗ Don't ყვითელი ტექსტი თეთრზე ან ფირუზისფერზე. ყვითელი ფირუზისფერზე მხოლოდ ლოგოშია.Yellow text on white or teal. Yellow on teal belongs to the logo only.

GEPHA: მარჯანი და პიტნა — მხოლოდ ფონიGEPHA: coral and mint are fills only

თეთრი ტექსტი მარჯანზე 2.4:1-ია, მარჯანი ან პიტნა ტექსტად თეთრზე — 2.0–2.4:1. ტექსტი ამ ფონებზე ყოველთვის მუქია (--gds-on-accent, --gds-on-secondary).

White on coral is 2.4:1; coral or mint as text on white is 2.0–2.4:1. Text on these fills is always dark ink (--gds-on-accent, --gds-on-secondary).

ხარვეზები მოქმედ საიტებზეGaps on the live sites

gpc.ge და pharmadepot.ge-ის მთავარი გვერდების შემოწმებისას (2026 სექტემბერი) აღმოჩნდა შემდეგი. სისტემა თითოეულს უკვე ასწორებს — საიტებზე გადატანა რჩება.

An audit of the gpc.ge and pharmadepot.ge home pages (September 2026) found the following. The system already fixes each one — the sites still need to adopt it.

სადWhere	რაWhat	ახლაNow	გამოსწორებაFix
pharmadepot.ge	„კალათაში“ ღილაკები: თეთრი ტექსტი #00AAAD-ზე (66 ღილაკი)Add-to-cart buttons: white text on #00AAAD (66 buttons)	2.86:1	`--gds-primary` #008486 · 4.52:1
pharmadepot.ge	ბმულები პროდუქტის აღწერაში #059999Links in product descriptions, #059999	3.49:1	`--gds-link` #007779 · 5.36:1
ორივეBoth	ძველი ფასი #CDD0D3 თეთრზეOld price, #CDD0D3 on white	1.55:1	`--gds-text-muted` + `<s>` · 7.09:1

ფოკუსი და კლავიატურაFocus and keyboard

ყველა ინტერაქტიულ ელემენტს აქვს ხილული ფოკუსი: 3px --gds-focus-ring, 2px დაშორებით.
ფოკუსის ფერი ყოველ ბრენდში ≥ 3:1-ია ფონთან. GEPHA-ში მარჯანისფერი ჩარჩო (2.4:1) ფირუზისფრით შეიცვალა.
ფოკუსს არასოდეს ვმალავთ outline: none-ით ჩანაცვლების გარეშე.
ღილაკი — <button>, ბმული — <a>. div-ზე click არ ვწერთ.

Every interactive element shows a visible focus: 3px --gds-focus-ring, offset 2px.
The focus colour is ≥ 3:1 against the background in every brand. GEPHA's coral ring (2.4:1) was replaced with teal.
Never remove focus with outline: none without a replacement.
Buttons are <button>, links are <a>. No click handlers on divs.

შეხების ზომაTouch targets

ღილაკი და ველი მინიმუმ 44 px სიმაღლისაა (gds-btn--sm — 36 px, მხოლოდ მჭიდრო ცხრილებში). ჩეკბოქსი და გადამრთველი 32 px სიმაღლის ხაზზეა.

Buttons and fields are at least 44 px tall (gds-btn--sm is 36 px, for dense tables only). Checkboxes and switches sit on a 32 px row.

შემოწმების სიაChecklist

ეკრანი შემოწმებულია სამივე ბრენდში და ორივე თემაში.
ფერი არ არის ინფორმაციის ერთადერთი წყარო — სტატუსს ტექსტი ან იკონი ახლავს.
ყველა ველს აქვს <label>; შეცდომა ტექსტით არის აღწერილი და aria-invalid-ით მონიშნული.
სურათებს აქვს alt; დეკორატიულს — ცარიელი alt="".
ტექსტი 200%-მდე გადიდებისას არ იჭრება.

The screen is checked in all three brands and both themes.
Colour is never the only signal — status always has text or an icon.
Every field has a <label>; errors are described in text and flagged with aria-invalid.
Images have alt; decorative ones use an empty alt="".
Text does not clip when zoomed to 200%.