Articol

Extragerea unei palete de culori accesibile dintr-o imagine

O fotografie sau un material de brand conține adesea sămânța unui sistem de culori complet. Extragerea acelei semințe, modelarea ei într-o paletă utilizabilă și verificarea față de standardele de accesibilitate necesită trei pași distincți. Acest articol acoperă fiecare pas în ordine: cum funcționează extragerea paletei în detaliu, cum să selectați și să ajustați culorile pentru utilizare practică, cum să verificați contrastul față de pragurile WCAG și cum să depistați perechile care se contopesc pentru utilizatorii daltonici.

Scris de Bastien Sulyan · Publicat pe 29 iunie 2026

Cum este extrasă o paletă: eșantionarea pixelilor și cuantizarea culorilor

Orice imagine digitală este o grilă de pixeli, fiecare purtând o valoare de culoare într-un spațiu precum RGB. Un extractor de paletă nu inspectează fiecare pixel individual: o fotografie de 2 megapixeli conține 2 milioane de puncte de date, ceea ce ar fi lent de procesat și ar returna mii de nuanțe ușor diferite în loc de un set util. În schimb, instrumentul eșantionează grila de pixeli la un interval regulat, colectând un subset reprezentativ. Acel subset este apoi introdus într-un algoritm de cuantizare a culorilor. Abordarea cea mai comună grupează culorile similare folosind o metodă de clustering, numită uneori k-means sau partiționare de tip median-cut. Algoritmul plasează fiecare pixel eșantionat într-unul dintr-un număr fix de compartimente pe baza similarității culorii, apoi calculează culoarea medie a fiecărui compartiment. Rezultatul este o listă scurtă, de obicei 4 până la 16 culori, care împreună reprezintă tonurile vizuale dominante din imagine. Culorile care apar doar în zone mici izolate pot fi omise, ceea ce este comportamentul așteptat, nu un defect.

Grilă de pixeli dintr-o fotografie agregată treptat în șase eșantioane de culori solide, cu săgeți care indică pasul de clustering ce îmbină nuanțele similare

De la culorile dominante brute la o paletă utilizabilă

Rezultatul brut al unui extractor de paletă este o listă de culori clasificate după frecvență, dar frecvența singură nu face o paletă. O fotografie a unei păduri va returna mai multe nuanțe de verde prea similare pentru a fi utilizate ca accente distincte în o interfață. Munca practică este selectarea și ajustarea. Începeți prin a identifica o culoare ca principală: cea mai distinctivă și cea mai puțin neutră. Din culorile rămase, căutați cel mult două care contrastează cu cea principală și între ele. Acestea devin accentele. Orice altceva, inclusiv tonurile desaturate pe care extractorul le returnează adesea din umbre și tonuri medii, poate servi ca nuanțe neutre pentru fundal și borduri. Odată ce aveți această structură aproximativă, va trebui aproape sigur să ajustați valorile individuale. Instrumentul color-converter vă permite să examinați fiecare culoare în hex, RGB și HSL. HSL este deosebit de util aici: puteți menține nuanța constantă și schimba luminozitatea sau saturația pentru a crea o familie mai strânsă sau mai largă fără a ieși din aceeași familie de culori.

Verificarea contrastului: pragurile WCAG pentru text lizibil

Odată ce aveți culori candidate pentru text și fundal, trebuie să verificați dacă combinația este lizibilă. Web Content Accessibility Guidelines (WCAG) definesc un raport de contrast în acest scop. Raportul compară luminanța relativă a două culori: o valoare de 1:1 înseamnă niciun contrast (aceeași culoare pe aceeași culoare), iar 21:1 este maximul (negru pe alb). WCAG 2.1 Nivelul AA necesită un raport de cel puțin 4,5:1 pentru text normal de dimensiune normală și 3:1 pentru text mare (18pt sau 14pt bold). Nivelul AAA stabilește praguri mai ridicate de 7:1 și respectiv 4,5:1. Nu trebuie să calculați luminanța manual. Ideea cheie este că o pereche de culori care vă pare bine în lumină bună poate fi sub 4,5:1 pe ecran, iar ghidul există exact pentru acel caz. După extragerea și ajustarea culorilor, testați fiecare pereche text-pe-fundal pe care intenționați să o folosiți. Un gri de ton mediu care se citește bine pe alb poate eșua complet pe un fundal bej deschis din paleta extrasă.

Două perechi de culori alături: o pereche cu o etichetă de raport de contrast de 2,8:1 marcată ca insuficientă și o altă pereche cu 5,3:1 marcată ca suficientă pentru text de corp WCAG AA

Daltonism: simularea modului în care perechile arată utilizatorilor afectați

Aproximativ 1 din 12 bărbați și 1 din 200 de femei au o formă de deficiență de vedere a culorilor. Cel mai frecvent tip este deuteranopia (sensibilitate redusă la verde), urmată de protanopie (sensibilitate redusă la roșu). Tritanopia (sensibilitate redusă la albastru-galben) este mai rară. Pentru fiecare tip, sistemul vizual mapează anumite lungimi de undă la aceeași culoare percepută pe care o văd ca distincte persoanele fără deficiențe. Problema practică pentru o paletă este că două culori care par clar diferite sub vedere normală pot deveni același ton pentru un utilizator dalton, făcând inutilă utilizarea lor pentru a transmite o distincție, de exemplu folosind doar roșu și verde pentru a semnala succes și eroare. Rularea unei simulări de daltonism arată cum arată paleta când canalele afectate sunt comprimate. Perechile care se contopesc într-un gri sau maro aproape identic sunt cele de reconsiderat: fie creșteți diferența de luminozitate între ele astfel încât contrastul să rămână chiar și fără distincția de nuanță, fie adăugați un indiciu secundar (formă, etichetă, model) astfel încât culoarea să nu fie singurul semnal.

Realizarea locală: color-palette, color-blindness și color-converter

Toți cei trei pași descriși în acest articol pot fi finalizați fără a trimite imaginea sau culorile de brand către vreun server. Instrumentul color-palette rulează complet în browser: puneți o imagine și eșantionează pixelii local, returnând culorile dominante ca valori hex. Niciun fișier nu este transmis. Instrumentul color-converter acceptă un cod hex și arată aceeași culoare în RGB și HSL, astfel încât să puteți face ajustări precise la luminozitate sau saturație rămânând în aceeași familie de nuanță. Atât valoarea hex, cât și valorile convertite există doar în pagină. Instrumentul color-blindness funcționează invers: puneți o imagine, iar acesta redă simulările de deuteranopie, protanopie și tritanopie ale acelei imagini, calculate în browser. Pentru a verifica o paletă, nu o fotografie, exportați sau faceți mai întâi o captură de ecran a mostrelor ca imagine, apoi introduceți-o în simulator. Folosind cele trei instrumente în ordine, extrăgând din imagine, ajustând în color-converter, apoi exportând o imagine cu mostre și verificând-o în color-blindness, se acoperă întregul flux de lucru descris mai sus. Imaginea rămâne pe dispozitivul dumneavoastră pe tot parcursul, ceea ce contează dacă fotografia sursă conține branding nepublicat sau identitatea nelansat a unui client.

Instrumente din acest articol

Întrebări frecvente

Câte culori returnează de obicei un extractor de paletă?

Majoritatea instrumentelor returnează între 5 și 16 culori implicit, deși multe vă permit să setați numărul. Returnarea mai puține culori înseamnă că algoritmul trebuie să grupeze mai mulți pixeli împreună, ceea ce poate îmbina tonuri distincte dar similare. Returnarea mai multor culori poate produce duplicate apropiate greu de utilizat distinct. Pentru o paletă de interfață, 6 până la 8 culori este de obicei un punct de plecare practic.

Poate o paletă extrasă dintr-o imagine să treacă automat contrastul WCAG?

Nu automat. Culorile dominante dintr-o fotografie sunt adesea tonuri medii cu luminanță moderată, care tind să producă raporturi în intervalul 2:1 până la 3:1 între ele. Atingerea pragului de 4,5:1 pentru textul de corp necesită de obicei deschiderea valorilor de fundal sau închiderea valorilor de text dincolo de ce oferă extracția brută. Extracția vă oferă un punct de plecare; verificarea contrastului vă spune cât de multă ajustare este necesară.

Raportul de contrast WCAG ține cont de daltonism?

Parțial. Formula de luminanță WCAG se bazează pe luminozitate relativă, nu pe nuanță, astfel că o pereche cu contrast ridicat care îndeplinește 4,5:1 va rămâne în general distingibilă chiar și pentru utilizatorii daltonici, deoarece diferența de luminozitate este păstrată. Cu toate acestea, două culori cu luminanță similară dar nuanțe diferite, cum ar fi roșu și verde la aceeași luminozitate, pot trece o verificare de contrast bazată pe luminanță, rămânând în același timp indistingibile pentru deuteranopi. Rularea unei simulări de daltonism este modalitatea corectă de a verifica diferențierea la nivel de nuanță separat de raportul de contrast.