Contrastul culorilor pentru text, butoane și pictograme

De ce contează contrastul

Textul palid îi costă pe cititori. Persoanele cu vedere slabă, cititorii mai în vârstă și oricine se uită la telefon în lumină puternică au nevoie de o diferență clară între text și fundal. De aceea, Ghidurile de accesibilitate pentru conținutul web (WCAG) ale W3C stabilesc valori minime pentru text, pentru controale precum butoanele și câmpurile de introducere și pentru pictograme și grafice. Ele pot fi măsurate și verificate înainte de lansare.

Cum funcționează raportul de contrast

Raportul de contrast compară cât de luminoase sunt două culori. WCAG nu se uită la nuanță, ci la luminanța relativă: o valoare între 0 pentru cel mai închis negru și 1 pentru cel mai deschis alb. Cele trei canale, roșu, verde și albastru, sunt convertite și ponderate: verdele contează cel mai mult, roșul mai puțin și albastrul cel mai puțin. Raportul este (L1 + 0,05) / (L2 + 0,05), unde L1 este luminanța culorii mai deschise. Rezultatul se află între 1:1 pentru două culori egale și 21:1 pentru negru pe alb.

Două reguli ale W3C contează în practică. Mai întâi, valorile nu se rotunjesc: un raport de 4,499:1 nu atinge limita de 4,5:1. Apoi, contrastul se măsoară față de fundalul setat pentru text. Dacă o pagină setează doar culoarea textului și nicio culoare de fundal, W3C consideră acest lucru o neconformitate, pentru că fundalul implicit al vizitatorului nu este cunoscut. Setează întotdeauna ambele culori împreună.

Cele trei criterii de succes

• 1.4.3 Contrast (Minimum), nivel AA: textul și imaginile cu text au nevoie de cel puțin 4,5:1, textul mare de cel puțin 3:1.
• 1.4.6 Contrast (Enhanced), nivel AAA: textul are nevoie de cel puțin 7:1, textul mare de cel puțin 4,5:1. Este nivelul mai strict și ajută cel mai mult la textele lungi.
• 1.4.11 Non-text Contrast, nivel AA: cel puțin 3:1 față de culorile alăturate, pentru tot ce trebuie să vezi ca să recunoști un control și starea lui (de exemplu chenarul unui câmp sau un indicator de focus) și pentru părțile graficelor de care ai nevoie ca să înțelegi conținutul, cum ar fi pictogramele sau liniile dintr-un grafic.

Ce înseamnă text mare

Textul mare are cel puțin 18 puncte sau cel puțin 14 puncte îngroșat. W3C convertește asta la aproximativ 24 de pixeli și aproximativ 18,5 pixeli îngroșat. Textul mare poate avea mai puțin contrast pentru că literele sunt mai mari și liniile lor mai groase. Ai grijă la fonturile subțiri: potrivit W3C, netezirea marginilor (anti-aliasing) poate face fonturile subțiri sau neobișnuite să pară mai palide decât culoarea lor definită. W3C recomandă fonturi mai groase sau o pereche de culori clar peste minim.

Ce nu trebuie să îndeplinească cerințele

• Componentele inactive, cum ar fi un buton dezactivat.
• Decorațiunile pure și textul pe care nu îl poate vedea nimeni.
• Textul care face parte dintr-un logo sau dintr-un nume de marcă.
• Textul întâmplător dintr-o imagine cu alt conținut important, cum ar fi un indicator stradal dintr-o fotografie.

Greșeli frecvente

• Gri deschis pe alb. Griul pentru date, legende sau text secundar este adesea prea palid: #999999 pe alb ajunge doar la 2,84:1. Cel mai deschis gri pur care trece de AA pentru text normal pe alb este #767676, cu 4,54:1.
• Text pe imagini. Contrastul se schimbă cu fiecare parte a fotografiei. W3C enumeră imaginile de fundal fără contrast suficient ca neconformitate (F83). Pune textul pe o suprafață plină, întunecă imaginea din spatele lui sau așază textul lângă imagine. Verifică cel mai luminos punct din spatele textului.
• Textul placeholder. Indicația gri dintr-un câmp gol este text, iar 1.4.3 i se aplică. Un gri deschis precum #9ca3af pe alb ajunge doar la 2,53:1. În plus, un placeholder nu înlocuiește o etichetă vizibilă.
• Stările hover și focus. Textul care apare sau se schimbă când treci cu mouse-ul sau când primește focus de la tastatură trebuie să respecte aceleași valori. Un efect hover nu are voie să scadă contrastul unui control sau să slăbească indicatorul de focus. Un indicator de focus creat de tine are nevoie de 3:1 față de fundalul alăturat.
• Text alb pe culori de brand luminoase. Butoanele portocalii, galbene, verde deschis sau turcoaz cu text alb nu trec adesea: alb pe #ff6600 ajunge la 2,93:1.
• Chenare și pictograme palide. Dacă chenarul este singurul lucru care arată unde este un câmp, el are nevoie de 3:1: #cccccc pe alb are 1,60:1. Pictogramele care au sens fără text, cum ar fi săgeata unui meniu derulant sau pictograma de închidere, au și ele nevoie de 3:1.
• Verifici doar o temă. Dacă site-ul tău are un mod întunecat, verifică separat perechile lui de culori. O culoare care funcționează pe alb poate eșua pe un fundal închis.

Corectează paleta brandului fără să pierzi brandul

1. 1Notează fiecare culoare cu rolul ei: text, fundal, accent sau buton, chenar. Multe probleme încep atunci când o singură culoare face toate treburile.
2. 2Păstrează culoarea brandului acolo unde regulile sunt mai ușor de respectat sau nu se aplică: în logo, pe suprafețe mari, pentru decor și pentru titluri mari.
3. 3Pentru text și elemente mici, folosește o nuanță mai închisă sau mai deschisă a aceleiași culori. Dacă se schimbă doar luminozitatea, culoarea rămâne recognoscibilă: text alb pe #c74f00, un portocaliu mai închis, ajunge la 4,61:1.
4. 4Sau schimbă în schimb culoarea textului. Textul închis pe o culoare de brand luminoasă funcționează adesea mai bine decât albul: #1a1a1a pe #ff6600 ajunge la 5,92:1.
5. 5Definește un singur gri pentru textul secundar care trece, de exemplu #767676 pe alb, și folosește-l peste tot în locul mai multor griuri palide.
6. 6Verifică fiecare stare: normal, hover, focus, eroare și mod întunecat. Salvează culorile finale ca variabile în foaia de stil, ca nimeni să nu mai aleagă de mână o culoare palidă.

Verifică-ți culorile cu Do4U

Verificarea contrastului culorilor calculează aceste valori pentru propriile tale culori. Introduci culorile, câte una pe rând, și dai fiecăreia un rol: text, fundal, accent (de exemplu un buton) sau chenar. Codul verifică fiecare pereche rezonabilă față de AA și AAA pentru text normal și text mare și față de 3:1 pentru chenare, pictograme și suprafețe de butoane, fără rotunjire în sus. Pentru fiecare pereche care nu trece, primești cea mai apropiată culoare care trece, o dată mai închisă și o dată mai deschisă, în aceeași nuanță. Do4U creează și o paletă ajustată, o verifică din nou în ansamblu și o exportă ca proprietăți CSS personalizate, SCSS sau JSON. Totul rulează în cod, fără AI, iar verificarea este gratuită.

Verificarea cunoaște doar perechile de culori pe care le introduci. Nu poate vedea dimensiunile fonturilor, imaginile din spatele textului, transparența sau stările hover și focus, așa că testează și paginile finale. Do4U creează ciorna, tu verifici și decizi.