Verificare contrast culori (WCAG 2.2 AA și AAA)
Verificator de contrast
Format hex, de exemplu #2f47d9 sau #fff.
Text normal: adăugați produsul în coș și plătiți în trei pași.
Text mare: 129 €
Conturul și pictograma butonului
Raport de contrast
4.54 : 1
| Cerință | Minim | Rezultat |
|---|---|---|
| Text normal, nivelul AAWCAG 1.4.3 | 4.5 : 1 | — |
| Text mare, nivelul AAWCAG 1.4.3 | 3 : 1 | — |
| Text normal, nivelul AAAWCAG 1.4.6 | 7 : 1 | — |
| Text mare, nivelul AAAWCAG 1.4.6 | 4.5 : 1 | — |
| Pictograme, contururi de câmpuri și alte elemente de interfațăWCAG 1.4.11 | 3 : 1 | — |
Text mare înseamnă cel puțin 24 px sau 18.66 px îngroșat. Verificarea rulează în browserul dvs.; culorile nu sunt trimise nicăieri.
Introduceți o culoare pentru text și una pentru fundal: instrumentul arată raportul de contrast după formula WCAG 2.x, dacă perechea trece nivelurile AA și AAA pentru text normal și mare și pentru părțile interfeței, precum și cea mai apropiată culoare de text care atinge 4,5:1.
Ce înseamnă rezultatele
| Cerință | Minim | Criteriu WCAG |
|---|---|---|
| Text normal, nivel AA | 4,5 : 1 | 1.4.3 Contrast (minim) |
| Text mare, nivel AA | 3 : 1 | 1.4.3 Contrast (minim) |
| Text normal, nivel AAA | 7 : 1 | 1.4.6 Contrast (sporit) |
| Text mare, nivel AAA | 4,5 : 1 | 1.4.6 Contrast (sporit) |
| Pictograme, chenare, părți ale interfeței | 3 : 1 | 1.4.11 Contrast non-text |
Nivelul AA este nivelul pe care se bazează EN 301 549, Actul european privind accesibilitatea, legea germană BFSG și practica din SUA în baza ADA. AAA este mai strict și nu este cerut de aceste legi.
De ce contează contrastul într-un magazin online
Prețuri gri pe alb, text alb pe un banner palid, indicații deschise la culoare în formularul de comandă: persoanele cu vedere slabă, clienții în vârstă și oricine folosește telefonul în soare le citesc greu sau deloc. Contrastul scăzut este cea mai frecventă problemă pe care verificările automate o găsesc pe site-urile magazinelor. Remediați-o în setările de culori ale temei sau în variabilele ei CSS, nu element cu element.
Cum se calculează raportul
Raportul compară luminanța relativă a culorii mai deschise cu cea a culorii mai închise: (L1 + 0.05) / (L2 + 0.05). Variază de la 1:1 (aceeași culoare) la 21:1 (negru pe alb). Transparența, umbrele și imaginile de fundal schimbă contrastul real; verificați textul de pe imagini cu partea cea mai închisă și cea mai deschisă a imaginii din spatele lui.
Verificați întregul site
Acest instrument testează o singură pereche de culori. Pandus găsește pe o pagină fiecare text cu contrast scăzut — cu culorile, raportul și o captură de ecran — și verifică în fiecare săptămână fiecare pagină a site-ului dumneavoastră. Vedeți și regula contrast scăzut al textului.