Contrast APCA vs WCAG 2: formulă, statut și modul high contrast

Designerii care verifică culori întâlnesc mai devreme sau mai târziu două numere: raportul de contrast WCAG (4,5:1, 3:1) și o valoare APCA, de exemplu Lc 75. Ele nu coincid întotdeauna. Această pagină explică cum funcționează formula WCAG 2, ce este APCA și care este de fapt statutul său și cum se raportează modul high contrast din Windows la amândouă.

Răspunsul scurt pentru oricine trebuie să îndeplinească o cerință: legile și standardele folosesc raportul de contrast WCAG 2. Sunt informații generale, nu consultanță juridică.

Formula WCAG 2, pas cu pas

WCAG 2.2 definește contrastul în doi pași, ambii în glosarul său.

1. Luminanța relativă — cât de luminoasă este o culoare, de la 0 pentru cel mai închis negru la 1 pentru cel mai deschis alb. Pentru fiecare canal sRGB:

C_srgb = C_8bit / 255
C = C_srgb / 12.92                         if C_srgb <= 0.04045
C = ((C_srgb + 0.055) / 1.055) ^ 2.4       otherwise

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Ponderile arată că ochiul este mult mai sensibil la verde decât la albastru. (Înainte de mai 2021 textul WCAG folosea pragul 0,03928; W3C notează că diferența nu are efect practic.)

2. Raportul de contrast — cu L1 luminanța culorii mai deschise și L2 a celei mai închise:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Rezultatul merge de la 1:1 (aceeași culoare) la 21:1 (negru pe alb). Un exemplu: griul #767676 are o luminanță de aproximativ 0,181, așa că pe alb ajunge la (1 + 0,05) / (0,181 + 0,05) ≈ 4,54:1 și trece minimul de 4,5:1. Cu o treaptă mai deschis, #777777 dă aproximativ 4,48:1 și pică — W3C spune că valorile nu trebuie rotunjite, deci 4,499:1 nu îndeplinește 4,5:1.

Pragurile

Textul mare are cel puțin 18 puncte (24 pixeli CSS) sau 14 puncte aldin (aproximativ 18,66 pixeli CSS). W3C explică valoarea de 4,5:1 drept compensare pentru pierderea sensibilității la contrast care vine cu o acuitate vizuală de aproximativ 20/40. Verificați orice pereche cu verificatorul nostru de contrast.

Limitele cunoscute ale formulei WCAG 2

Formula este simplă și testabilă, de aceea funcționează pentru reglementare. Are însă și limite, pe care le menționează chiar documentul Understanding al W3C: nu ține cont de grosimea fontului, iar fonturile subțiri sau neobișnuite pot părea mult mai palide decât culoarea lor nominală din cauza anti-aliasingului — „a contrast ratio that nominally passes … but has a much lower contrast in practice”. Recomandarea de acolo este să folosiți fonturi mai groase sau o pereche de culori care depășește minimul. Formula presupune, de asemenea, culori sRGB.

Formula este și simetrică: inversarea textului cu fundalul dă același raport. Proiectul APCA merge mai departe și afirmă că matematica de contrast din WCAG 2 „does not accurately model human visual perception nor visual impairments” — punctul de plecare pentru APCA.

Ce este APCA

Accessible Perceptual Contrast Algorithm este descris în repository-ul său oficial ca o metodă de evaluare pentru estimarea contrastului perceput între culori sRGB pe un monitor, dezvoltată pentru lucrările W3 „Silver” / WCAG 3. Diferențele față de WCAG 2 în practică:

• Ordinea contează. Prima culoare este textul, a doua fundalul; rezultatul are semn, iar semnul arată polaritatea (închis pe deschis sau deschis pe închis).
• O altă scală. Rezultatul este o valoare Lc, aproximativ între −108 și 106, nu un raport.
• Dimensiunea și grosimea fac parte din răspuns. O funcție de căutare returnează, pentru o valoare Lc, dimensiunile de font necesare la grosimi de la 100 la 900. README-ul dă reguli precum un maximum de Lc 90 pentru fonturi mai mari de 24 px la grosimea 300 sau mai mare.
• Beta. Biblioteca (apca-w3 pe npm) este în validare beta publică, iar README-ul numește criteriul de proiect asociat o lucrare în desfășurare.

Face APCA parte din WCAG 3?

Nu ca decizie finală. Două fapte, ambele verificate în sursele oficiale:

1. Repository-ul APCA spune că APCA este în evaluare ca înlocuitor al matematicii de contrast din WCAG 2 pentru standardele viitoare.
2. Actualul WCAG 3 Working Draft, din 10 septembrie 2026, spune: „The contrast algorithm used in WCAG 3 is yet to be determined.” Cerințele sale de contrast al textului au statutul developing, cu metoda de măsurare lăsată deschisă. Proiectul mai spune că nu este potrivit să fie citat altfel decât ca lucrare în desfășurare.

Așadar APCA este un candidat, WCAG 3 este un proiect și niciunul nu este normativ. WCAG 2.2 este recomandarea W3C actuală, iar EN 301 549, standardul european din spatele European Accessibility Act, face trimitere la criteriile de succes WCAG 2. O pereche de culori care trece APCA, dar pică la 4,5:1, tot nu îndeplinește cerința.

WCAG sau APCA: o regulă practică

1. Îndepliniți raportul WCAG 2 pentru fiecare text și fiecare componentă de interfață. Aceasta este cerința.
2. Folosiți APCA, dacă doriți, ca ajutor de design pe deasupra: de exemplu pentru a alege o grosime mai mare pentru un text subțire sau pentru a observa că o pereche care abia trece de 4,5:1 este totuși greu de citit ca text deschis pe fundal închis.
3. Nu prezentați rezultatele APCA drept conformitate. Rapoartele, declarațiile și licitațiile fac trimitere la WCAG 2.

Modul high contrast din Windows și forced colors

„WCAG high contrast mode” este o căutare frecventă, dar amestecă două lucruri.

Ce este. Windows oferă teme de contrast (Windows 11; în Windows 10 se numea modul high contrast). Microsoft le documentează la Setări → Accesibilitate → Teme de contrast, cu scurtătura Alt stânga + Shift stânga + Print Screen. Browserele aplică apoi paleta limitată a utilizatorului paginilor web. CSS detectează asta cu caracteristica media forced-colors: active înseamnă că agentul utilizator impune o paletă limitată de culori aleasă de utilizator, iar autorul are la dispoziție doar culori de sistem.

Ce spune WCAG. Niciun criteriu de succes WCAG 2.2 nu cere explicit un mod high contrast sau suport pentru forced colors, iar un site nu trebuie să ofere propriul comutator de contrast ridicat pentru a îndeplini AA. Dar codul dumneavoastră poate strica pagina pentru cei care folosesc un astfel de mod, iar atunci pică alte criterii:

• Focusul. Tehnica W3C C40 avertizează că agenții utilizator suprimă de obicei box-shadow în modurile forced colors, așa că un indicator de focus făcut doar cu o umbră dispare. C40 sugerează combinarea lui cu outline: 2px transparent solid pentru compatibilitate cu modurile forced colors — relevant pentru 2.4.7 Focus vizibil.
• Pictograme și margini. Pictogramele desenate cu imagini de fundal și elementele de control deosebite doar prin culoarea fundalului pot dispărea. Asta atinge 1.4.11 Contrast non-text și 1.4.1 Utilizarea culorii.
• Nu presupuneți un contrast mai mare. Specificația Media Queries notează că forced colors nu înseamnă neapărat o preferință pentru mai mult contrast; pentru asta există prefers-contrast.

Testarea câtorva pagini cheie cu o temă de contrast activată este o bună practică, chiar dacă niciun criteriu nu o numește.

Ce fac verificările noastre

Verificările noastre folosesc raportul de contrast WCAG 2, la fel ca cerințele: contrastul scăzut al textului la nivelul AA (1.4.3) și contrastul îmbunătățit la nivelul AAA (1.4.6), pe care rapoartele noastre îl afișează separat de rezultatele AA. Nu raportăm valori APCA. Rulați WCAG checkerul gratuit pe o pagină sau testați o pereche cu verificatorul de contrast. Verificările noastre sunt automate, nu un audit complet, și nu constituie consultanță juridică.

Întrebări frecvente

Ce să folosesc pentru contrast, WCAG sau APCA?

Folosiți raportul de contrast WCAG 2 pentru a îndeplini cerințele: la el fac trimitere WCAG 2.2, EN 301 549 și legile construite pe ele. APCA poate fi o a doua opinie utilă în design, dar astăzi nu face parte din niciun standard normativ.

Face APCA parte din WCAG 3?

Nu ca decizie. APCA a fost dezvoltat ca metodă candidată pentru WCAG 3 și este în beta publică. Actualul Working Draft WCAG 3 din septembrie 2026 spune că algoritmul de contrast nu a fost încă stabilit, iar WCAG 3 însuși este un proiect, nu un standard.

Cum se calculează raportul de contrast WCAG?

Convertiți ambele culori în luminanță relativă: liniarizați fiecare canal sRGB, apoi L = 0,2126 R + 0,7152 G + 0,0722 B. Raportul este (L1 + 0,05) / (L2 + 0,05), unde L1 este culoarea mai deschisă. Merge de la 1:1 la 21:1 și nu se rotunjește.

Cere WCAG suport pentru modul high contrast din Windows?

Niciun criteriu WCAG nu numește modul high contrast sau forced colors. Dar propriul CSS poate strica pagina în acest mod, de exemplu un inel de focus făcut doar cu box-shadow, pe care browserele îl elimină de obicei acolo. Testarea într-un mod forced colors este o bună practică.

Poate o pereche de culori să treacă WCAG și totuși să fie greu de citit?

Da. Formula WCAG nu ține cont de grosimea fontului, iar fonturile subțiri cu anti-aliasing pot părea mai palide decât sugerează culoarea lor. În acest caz W3C recomandă fonturi mai groase sau un contrast mai mare decât minimul.

Surse

• W3C, WCAG 2.2 (definițiile luminanței relative și ale raportului de contrast): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C, WCAG 3.0 Working Draft: https://www.w3.org/TR/wcag-3.0/
• APCA, repository apca-w3: https://github.com/Myndex/apca-w3
• W3C, Technique C40, indicator de focus în două culori: https://www.w3.org/WAI/WCAG22/Techniques/css/C40
• W3C, Media Queries Level 5 (forced-colors): https://www.w3.org/TR/mediaqueries-5/
• Microsoft, Change color contrast in Windows: https://support.microsoft.com/en-us/windows/change-color-contrast-in-windows-fedc744c-90ac-69df-aed5-c8a90125e696