Artikkel
Trekke ut en tilgjengelig fargepalett fra et bilde
Et fotografi eller et merkevareasset inneholder ofte kjernen til et fullstendig fargesystem. Å trekke ut den kjernen, forme den til en brukbar palett og deretter verifisere den mot tilgjengelighetsstandarder krever tre distinkte trinn. Denne artikkelen dekker hvert av dem i rekkefølge: hvordan palettutvinning fungerer under panseret, hvordan du velger og justerer farger for praktisk bruk, hvordan du kontrollerer kontrast mot WCAG-terskler, og hvordan du oppdager parene som kollapser for fargeblinde brukere.
Hvordan en palett trekkes ut: pikselsampling og fargekvantering
Hvert digitalt bilde er et rutenett av piksler, der hver bærer en fargeverdi i et rom som RGB. En palettutvinning inspiserer ikke hver piksel individuelt: et 2-megapikselfoto inneholder 2 millioner datapunkter, noe som ville vært tregt å behandle og ville returnert tusenvis av litt ulike nyanser i stedet for et nyttig sett. I stedet sampler verktøyet pikselrutenettet med et regelmessig intervall og samler et representativt utvalg. Det utvalget mates deretter inn i en fargekvanteringsalgoritme. Den vanligste tilnærmingen grupperer lignende farger ved hjelp av en klyngestemetode, noen ganger kalt median-cut eller k-means-stil partisjonering. Algoritmen plasserer hver samplet piksel i ett av et fast antall bøtter basert på fargelikhet, og beregner deretter gjennomsnittfargen i hver bøtte. Resultatet er en liten liste, vanligvis 4 til 16 farger, som til sammen representerer de dominerende visuelle tonene i bildet. Farger som bare forekommer i små isolerte områder kan bli savnet, noe som er forventet atferd heller enn en feil.
Fra rå dominerende farger til en brukbar palett
Den rå utdataen fra en palettutvinning er en liste over farger rangert etter frekvens, men frekvens alene gjør ikke en palett. Et fotografi av en skog vil returnere flere grønntoner som er for like til å bruke i et grensesnitt som distinkte aksenter. Det praktiske arbeidet er å velge og justere. Start med å identifisere én farge som din primærfarge: den som er mest karakteristisk og minst nøytral. Fra de gjenværende fargene, se etter maksimalt to som kontrasterer med primærfargen og med hverandre. Disse blir aksentene dine. Alt annet, inkludert de desaturerte tonene som utvinningen ofte returnerer fra skygger og mellomtoner, kan tjene som nøytrale toner for bakgrunner og kanter. Når du har denne grove strukturen, må du nesten helt sikkert justere individuelle verdier. Color-converter-verktøyet lar deg undersøke hver farge i hex, RGB og HSL. HSL er spesielt nyttig her: du kan holde fargetonen konstant og flytte lyshet eller metning for å skape en tettere eller løsere familie uten å forlate den samme fargetonfamilien.
Kontrollere kontrast: WCAG-terskler for lesbar tekst
Når du har kandidatfarger for tekst og bakgrunn, må du kontrollere om kombinasjonen er lesbar. Web Content Accessibility Guidelines (WCAG) definerer et kontrastforhold for dette formålet. Forholdet sammenligner den relative luminansen til to farger: en verdi på 1:1 betyr ingen kontrast i det hele tatt (samme farge på samme farge), og 21:1 er maksimum (svart på hvitt). WCAG 2.1 Nivå AA krever et forhold på minst 4.5:1 for normalt stor brødtekst, og 3:1 for stor tekst (18pt eller 14pt fet). Nivå AAA setter høyere terskler på 7:1 og 4.5:1 henholdsvis. Du trenger ikke å beregne luminans for hånd. Den viktige innsikten er at et fargepar som ser bra ut for deg under godt lys kan falle under 4.5:1 på skjerm, og retningslinjen finnes nettopp for det tilfellet. Etter å ha trukket ut og justert farger, test hvert tekst-på-bakgrunn-par du planlegger å bruke. En mellomtone grå som leser bra på hvitt kan svikte fullstendig på en lys beige bakgrunn fra din uttrukne palett.
Fargeblindhet: simulere hvordan par ser ut for berørte brukere
Omtrent 1 av 12 menn og 1 av 200 kvinner har en form for fargesyn-svikt. Den vanligste typen er deuteranopi (redusert følsomhet for grønt), etterfulgt av protanopi (redusert følsomhet for rødt). Tritanopi (redusert følsomhet for blå-gult) er sjeldnere. For hver type kartlegger det visuelle systemet visse bølgelengder til den samme oppfattede fargen som uberørte seere ser som distinkte. Det praktiske problemet for en palett er at to farger som ser klart forskjellige ut under normal syn kan kollapse til samme tone for en fargeblind bruker, noe som gjør dem ubrukelige for å formidle distinksjon, for eksempel å bare bruke rødt og grønt for å signalisere suksess og feil. Å kjøre en fargeblindhetssimulering viser deg hvordan paletten ser ut når de berørte kanalene er komprimert. Parene som kollapser til en nesten identisk grå eller brun er de som bør vurderes på nytt: enten øk lyset-forskjellen mellom dem slik at kontrasten forblir selv uten fargetoneskillet, eller legg til et sekundært signal (form, etikett, mønster) slik at farge ikke er det eneste signalet.
Gjøre det lokalt: color-palette, color-blindness og color-converter
Alle tre trinnene beskrevet i denne artikkelen kan fullføres uten å sende bildet ditt eller merkevarefargene til noen server. Color-palette-verktøyet kjører helt i nettleseren: du slipper et bilde, det sampler pikslene lokalt og returnerer de dominerende fargene som hex-verdier. Ingen fil overføres. Color-converter-verktøyet aksepterer en hex-kode og viser den samme fargen i RGB og HSL slik at du kan gjøre målrettede justeringer av lyshet eller metning mens du holder deg i den samme fargetonfamilien. Både hex og de konverterte verdiene finnes bare i siden. Color-blindness-verktøyet fungerer motsatt vei: du slipper et bilde, og det gjengir deuteranopi-, protanopi- og tritanopi-simuleringer av det bildet, beregnet i nettleseren. For å sjekke en palett i stedet for et foto, eksporter eller ta et skjermbilde av fargeprøvene dine som et bilde først, og slipp deretter det inn i simulatoren. Å bruke de tre verktøyene i rekkefølge, trekk ut fra bildet, juster i color-converter, eksporter deretter et fargeprøvebilde og verifiser det i color-blindness, dekker hele arbeidsflyten beskrevet ovenfor. Bildet ditt forblir på enheten din gjennom hele prosessen, noe som er viktig hvis kildefotoet inneholder upublisert merkevarebygging eller en klients uutgitte identitet.
Verktøy i denne artikkelen
- FargepalettuttrekkerHent dominerende farger fra et bilde som HEX-fargeprøver. Kopier en farge. Ingen opplasting.
- FargeblindhetssimulatorSimuler protanopi, deuteranopi, tritanopi og akromatopsi på et bilde. Ingen opplasting.
- FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV og CMYK. WCAG-kontrastkontroll inkludert. Ingen opplasting.
- FargeskjemagenereratorGenerer komplementære, analoge, triadiske, tetradiske og monokromatiske paletter fra en basisfarger. Ingen opplasting.
Ofte stilte spørsmål
Hvor mange farger returnerer vanligvis en palettutvinning?
De fleste verktøy returnerer mellom 5 og 16 farger som standard, selv om mange lar deg angi antallet. Å returnere færre farger betyr at algoritmen må gruppere flere piksler sammen, noe som kan slå sammen distinkte men lignende toner. Å returnere flere farger kan produsere nesten-duplikater som er vanskelige å bruke distinkt. For en grensesnittpalett er 6 til 8 farger vanligvis et praktisk utgangspunkt.
Kan en palett trukket ut fra et bilde automatisk bestå WCAG-kontrasten?
Ikke automatisk. Dominerende farger i et fotografi er ofte mellomtoner med moderat luminans, som har en tendens til å produsere forhold i 2:1 til 3:1-området mot hverandre. Å møte 4.5:1-terskelen for brødtekst krever vanligvis å lysne bakgrunnsverdier eller mørke tekstverdi utover hva den rå utvinningen gir. Utvinningen gir deg et utgangspunkt; kontrastkontrollen forteller deg hvor mye justering som er nødvendig.
Tar WCAG-kontrastforholdet hensyn til fargeblindhet?
Delvis. WCAG-luminansformelen er basert på relativ lysstyrke, ikke fargetone, så et høykontrastpar som møter 4.5:1 vil generelt forbli distinkt selv for fargeblinde brukere fordi lyshet-forskjellen bevares. Imidlertid kan to farger med lignende luminans men ulike fargetoner, som rødt og grønt på samme lysstyrke, bestå en luminansbasert kontrastkontroll mens de fortsatt er uatskillelige for deuteranoper. Å kjøre en fargeblindhetssimulering er den riktige måten å kontrollere fargetonenivå-differensiering separat fra kontrastforholdet.