Ghid pentru Convertor de culori
Cum convertiți culorile între HEX, RGB, HSL și OKLCH cu Convertor de culori de la XGM și cum verificați rapoartele de contrast WCAG pentru text lizibil.
Formate de culoare
Ecranele amestecă lumină roșie, verde și albastră, iar majoritatea formatelor de culoare de pe web sunt doar moduri diferite de a scrie aceleași valori sRGB. HEX și rgb() dau direct valorile canalelor, HSL descrie nuanța, saturația și luminozitatea, iar OKLCH descrie culorile într-un spațiu proiectat astfel încât modificări egale să pară egale și pentru ochi. Convertorul XGM le arată pe toate pentru una și aceeași culoare. Astfel puteți copia direct formatul de care aveți nevoie, fără să calculați valoarea de mână.
| Format | Valoare | Observații |
|---|---|---|
| HEX | #1a5fd0 | Câte două cifre hexazecimale pe canal; există și scrierea scurtă #rgb și formele cu 8 cifre, cu alfa |
| RGB | rgb(26 95 208) | Canale 0–255; sintaxa mai veche folosește virgule |
| HSL | hsl(217 78% 46%) | Nuanța în grade, saturația și luminozitatea în procente |
| OKLCH | oklch(51.4% 0.187 260) | Luminozitate perceptuală, cromă și nuanță |
Cum folosiți Convertor de culori
- Deschideți Convertor de culori și introduceți o culoare ca HEX,
rgb()orihsl(). - Copiați formatul de care aveți nevoie din tabelul cu formate de culoare.
- Introduceți o culoare de fundal pentru a verifica contrastul; folosiți Inversează culorile ca să testați situația inversă.
- Citiți raportul de contrast și rezultatele AA și AAA pentru text normal și text mare, împreună cu previzualizarea.
Testați perechile reale pe care le folosește designul dumneavoastră: textul de conținut pe fundalul paginii, culoarea legăturilor pe fundal, textul butonului pe culoarea butonului și textul de sugestie din câmpuri. Fiecare pereche are raportul ei. În loc să decideți că o singură culoare de brand este potrivită peste tot, măsurați separat fiecare suprafață pe care apare. Cele două culori sunt păstrate în legătură, așa că puteți trimite rezultatul ca atare unui coleg și puteți redeschide aceeași pereche mai târziu, cu un singur clic.
Cerințele WCAG de contrast
Ghidul pentru accesibilitatea conținutului web (WCAG) definește contrastul ca un raport între luminanța relativă a două culori, de la 1:1 (culori identice) până la 21:1 (negru pe alb). Contrastul scăzut face textul greu de citit pentru persoanele cu vedere slabă, pentru cele cu deficiențe de percepție a culorilor și pentru oricine își folosește telefonul în soare. Raportul este o mărime matematică, așa că o pereche care arată bine pe ecranul dumneavoastră poate rămâne totuși sub prag atunci când este măsurată. Cifra înlocuiește aprecierea din ochi și scoate presupunerile din discuție.
| Nivel | Text normal | Text mare | Componente de interfață |
|---|---|---|---|
| AA (1.4.3, 1.4.11) | 4.5:1 | 3:1 | 3:1 pentru contururi, pictograme și indicatori de focalizare |
| AAA (1.4.6) | 7:1 | 4.5:1 | Nicio cerință suplimentară |
Text mare înseamnă cel puțin 18 puncte (24 de pixeli CSS) la grosime normală sau 14 puncte (aproximativ 18.66 pixeli CSS) aldin. Previzualizarea arată o mostră de 24 px, ca să puteți judeca situația textului mare și vizual, nu doar după cifră. Dacă titlurile dumneavoastră rămân sub acest prag, li se aplică regulile pentru text normal.
Culori transparente
De ce este util OKLCH
În HSL, culorile cu aceeași valoare a luminozității pot arăta foarte diferit ca strălucire: un galben la 50% luminozitate pare mult mai deschis decât un albastru la 50%. Luminozitatea din OKLCH este proiectată să corespundă percepției, așa că schimbarea doar a nuanței păstrează strălucirea aparentă aproape neschimbată. Asta face mai ușoară construirea paletelor de culori și anticiparea contrastului. Culorile care împart aceeași treaptă de luminozitate arată ca o familie echilibrată atunci când sunt puse una lângă alta, pentru că niciuna nu sare în ochi înaintea celorlalte.
:root {
--brand: oklch(0.52 0.17 262);
--brand-hover: oklch(0.46 0.17 262);
--success: oklch(0.52 0.12 150);
--danger: oklch(0.52 0.18 27);
}Browserele moderne acceptă oklch() în CSS. OKLCH poate descrie și culori din afara gamutului sRGB, pe care le pot afișa ecranele cu gamut larg; convertorul lucrează cu culori sRGB, așa că valorile lui OKLCH rămân în limita a ceea ce poate afișa orice ecran. Prin urmare, o valoare copiată de aici nu riscă să fie tăiată în mod neașteptat pe un ecran obișnuit.
Repararea unei perechi de culori care nu trece
Când o pereche nu trece, schimbați mai întâi luminozitatea și păstrați nuanța. Închiderea culorii textului sau deschiderea fundalului în pași mici ajunge de obicei la 4.5:1 fără să schimbe caracterul designului. În OKLCH lucrul acesta este deosebit de previzibil: coborâți prima valoare, adică luminozitatea, și verificați din nou. Creșterea saturației salvează rareori contrastul; de cele mai multe ori face culoarea doar mai obositoare.
| Culoare | Contrast cu #ffffff | Rezultat |
|---|---|---|
#7aa7f0 albastru deschis | aproximativ 2.4:1 | Nu trece AA pentru text și pentru componentele de interfață |
#3b82f6 albastru mediu | aproximativ 3.7:1 | Trece doar pentru text mare și componente de interfață |
#1a5fd0 albastru mai închis | aproximativ 5.9:1 | Trece AA pentru text normal |
#1e3a8a bleumarin | peste 10:1 | Trece AAA |
Păstrați o nuanță mai deschisă pentru utilizări decorative, precum fundalurile insignelor și ilustrațiile, și o variantă mai închisă a aceleiași nuanțe pentru text și pictograme. Sistemele de design le definesc adesea ca token-uri separate, ca să nu folosească nimeni din greșeală nuanța deschisă pentru text. Și denumirea ajută: un token al cărui nume conține suprafață sau text își explică singur folosirea corectă, fără documentație. Odată făcută această separare, corecturile de contrast se adună într-un singur loc.
Temele întunecate au nevoie de verificări proprii, nu de valori inversate. Textul alb pur pe negru pur atinge 21:1, dar poate părea dur; o culoare de text puțin mai blândă pe o suprafață gri închis trece confortabil AAA și obosește mai puțin ochii. În tema întunecată, aceeași culoare de accent trebuie de obicei deschisă puțin, pentru că nuanțele de luminozitate medie nu dau destul contrast pe un fundal închis. Măsurarea ambelor teme cu aceeași listă de perechi este cel mai practic mod de a vedea diferența.
Sfaturi practice pentru culori accesibile
- Verificați atât tema deschisă, cât și pe cea întunecată; o culoare care trece pe alb adesea nu trece pe o suprafață închisă.
- Nu transmiteți sensul doar prin culoare; adăugați text sau pictograme la erori și la insignele de stare.
- Păstrați culoarea legăturilor distinctă de textul de conținut prin mai mult decât nuanță, de exemplu printr-o subliniere.
- Testați indicatorii de focalizare atât pe componentă, cât și pe fundalul paginii.
- Definiți culorile ca token-uri de design, ca reparațiile de contrast să se facă într-un singur loc.
Contrastul este doar o parte a accesibilității. Pentru o pagină precum https://www.example.com, verificatoarele automate prind multe probleme de contrast, dar perechile reale din stările de hover, din controalele dezactivate și din suprapuneri au nevoie de verificări manuale cu un instrument ca acesta. Instrumentele automate măsoară numai starea aflată pe ecran în acel moment; un buton apăsat sau umbra de sub un meniu derulant nu ajung de multe ori deloc în scanare. De aceea merită să măsurați manual, cel puțin o dată, fiecare stare din biblioteca dumneavoastră de componente.
Întrebări frecvente
De ce raport de contrast am nevoie pentru textul de conținut?
Cel puțin 4.5:1 pentru WCAG AA și 7:1 pentru AAA. Textul mare are nevoie de 3:1 pentru AA și de 4.5:1 pentru AAA.
Ce se consideră text mare?
Cel puțin 24 de pixeli CSS la grosime normală sau aproximativ 18.66 pixeli CSS aldin (18pt și 14pt).
Este mai bun HEX sau RGB?
Amândouă descriu aceleași valori sRGB. HEX este compact; rgb() este mai ușor de citit și de editat. Folosiți formatul pe care codul dumneavoastră îl folosește consecvent.
De ce culorile HSL cu aceeași luminozitate arată diferit?
Luminozitatea din HSL este o formulă simplă, nu o măsură perceptuală. Luminozitatea din OKLCH este proiectată să corespundă cu cât de strălucitoare par culorile.
Convertorul acceptă transparența?
Citește valorile alfa, dar contrastul trebuie verificat pe culoare așa cum apare peste fundalul ei real.
Pot folosi OKLCH în CSS?
Da, toate browserele majore actuale acceptă oklch(). Oferiți o valoare de rezervă doar dacă trebuie să susțineți browsere mult mai vechi.
De ce nu trece textul alb pe culoarea mea de brand?
Culorile de brand cu luminozitate medie ajung adesea doar la aproximativ 3:1 cu albul. Închideți culoarea pentru fundalurile de text sau folosiți text închis pe ea.
Sunt încărcate culorile undeva?
Nu. Conversia și calculul contrastului rulează în browserul dumneavoastră.
De ce contrast au nevoie butoanele și contururile formularelor?
Criteriul de succes 1.4.11 din WCAG 2.2 cere 3:1 față de culorile învecinate pentru părțile vizuale necesare identificării controalelor, precum contururile câmpurilor și indicatorii de focalizare. Textului din interiorul butonului i se aplică regulile pentru text normal.
De ce arată aceeași culoare altfel pe telefonul meu?
Ecranele diferă ca luminozitate, gamut și calibrare a culorilor, iar multe telefoane ajustează automat culorile. Valoarea HEX este aceeași, aspectul ei nu; de aceea contrastul se măsoară matematic.
Trecerea pragului de contrast garantează accesibilitatea?
Nu. Acoperă o singură cerință. Contează la fel de mult mărimea fontului, spațierea, vizibilitatea focalizării, accesul de la tastatură și o structură cu sens.