Artikel
Udtrækning af en tilgængelig farvepalet fra et billede
Et fotografi eller et brandaktiv indeholder ofte frøet til et fuldt farvesystem. Udtrækning af det frø, formning af det til en brugbar palet og derefter verificering mod tilgængelighedsstandarder kræver tre distinkte trin. Denne artikel dækker hvert trin i rækkefølge: hvordan paletudtrækning fungerer under hætten, hvordan man vælger og justerer farver til praktisk brug, hvordan man kontrollerer kontrast mod WCAG-tærskler, og hvordan man opdager de par, der falder sammen for farveblinde brugere.
Hvordan en palet udtrækkes: pixelprøvetagning og farvekvantisering
Ethvert digitalt billede er et gitter af pixels, der hver bærer en farveværdi i et rum som RGB. En paletudtrækker inspicerer ikke hver pixel individuelt: et 2-megapixel foto indeholder 2 millioner datapunkter, som ville være langsomt at behandle og ville returnere tusindvis af let forskellige nuancer frem for et nyttigt sæt. I stedet prøver værktøjet pixelgitteret med et regelmæssigt interval og indsamler et repræsentativt undersæt. Det undersæt føres derefter ind i en farvekvantiseringsalgoritme. Den mest almindelige tilgang grupperer lignende farver ved hjælp af en klyngedannelsesmetode, der undertiden kaldes median-cut- eller k-means-partitionering. Algoritmen placerer hver samplet pixel i en af et fast antal spande baseret på farvelighed og beregner derefter gennemsnitsfarven for hver spand. Resultatet er en lille liste, typisk 4 til 16 farver, der tilsammen redegør for de dominerende visuelle toner i billedet. Farver, der kun optræder i små isolerede områder, kan blive overset, hvilket er forventet adfærd frem for en fejl.
Fra rå dominerende farver til en brugbar palet
Det rå output fra en paletudtrækker er en liste over farver rangeret efter frekvens, men frekvens alene gør ikke en palet. Et fotografi af en skov vil returnere flere grønne, der er for ens til at bruge i en brugergrænseflade som distinkte accenter. Det praktiske arbejde er at vælge og justere. Start med at identificere én farve som din primære: den mest karakteristiske og mindst neutrale. Fra de resterende farver skal du lede efter højst to, der kontrasterer med den primære og med hinanden. Disse bliver dine accenter. Alt andet, herunder de desaturerede toner, udtrækker ofte returnerer fra skygger og midtoner, kan bruges som neutrale til baggrunde og kanter. Når du har denne grove struktur, vil du næsten bestemt have brug for at justere individuelle værdier. Værktøjet color-converter lader dig undersøge hver farve i hex, RGB og HSL. HSL er særligt nyttigt her: du kan holde farvetonen konstant og skifte lysstyrke eller mætning for at skabe en tættere eller løsere familie uden at forlade den samme farvefamilie.
Kontrol af kontrast: WCAG-tærskler for læsbar tekst
Når du har kandidatfarver til tekst og baggrund, skal du kontrollere, om kombinationen er læsbar. Web Content Accessibility Guidelines (WCAG) definerer et kontrastforhold til dette formål. Forholdet sammenligner den relative luminans af to farver: en værdi på 1:1 betyder ingen kontrast overhovedet (samme farve på samme farve), og 21:1 er maksimum (sort på hvid). WCAG 2.1 Niveau AA kræver et forhold på mindst 4,5:1 for brødtekst i normal størrelse og 3:1 for stor tekst (18pt eller 14pt fed). Niveau AAA sætter højere tærskler på 7:1 og 4,5:1 henholdsvis. Du behøver ikke beregne luminans i hånden. Den vigtigste erkendelse er, at et farvepar, der ser fint ud for dig under god belysning, kan falde under 4,5:1 på skærmen, og retningslinjen eksisterer præcis til det tilfælde. Efter udtrækning og justering af farver skal du teste hvert tekst-på-baggrunds-par, du planlægger at bruge. En mellemtonegrå, der læses godt på hvid, kan muligvis slet ikke bestå på en lys beige baggrund fra din udtrukne palet.
Farveblindhed: simulering af, hvordan par ser ud for berørte brugere
Cirka 1 ud af 12 mænd og 1 ud af 200 kvinder har en eller anden form for farvesvisdefekt. Den mest almindelige type er deuteranopi (nedsat følsomhed over for grønt), efterfulgt af protanopi (nedsat følsomhed over for rødt). Tritanopi (nedsat følsomhed over for blåt-gult) er sjældnere. For hver type kortlægger det visuelle system visse bølgelængder til den samme opfattede farve, som upåvirkede seere ser som distinkte. Det praktiske problem for en palet er, at to farver, der fremstår klart forskellige under normal syn, kan falde sammen til den samme tone for en farveblind bruger og dermed gøre dem ubrugelige til at formidle distinction, for eksempel ved kun at bruge rød og grøn til at signalere succes og fejl. Kørsel af en farveblindhedssimulering viser dig, hvordan paletten ser ud, når de berørte kanaler er komprimerede. De par, der falder sammen til en næsten identisk grå eller brun, er dem, der skal overvejes igen: øg enten lysforskellen mellem dem, så kontrasten bevares selv uden farvetonenforskellen, eller tilføj et sekundært signal (form, etiket, mønster), så farve ikke er det eneste signal.
Gør det lokalt: color-palette, color-blindness og color-converter
Alle tre trin beskrevet i denne artikel kan afsluttes uden at sende dit billede eller dine brandfarver til nogen server. Værktøjet color-palette kører helt i browseren: du dropper et billede, det prøver pixels lokalt og returnerer de dominerende farver som hex-værdier. Ingen fil overføres. Værktøjet color-converter accepterer en hex-kode og viser den samme farve i RGB og HSL, så du kan lave målrettede justeringer af lysstyrke eller mætning, mens du forbliver i den samme farvetone-familie. Både hex og de konverterede værdier eksisterer kun på siden. Værktøjet color-blindness virker den anden vej rundt: du dropper et billede, og det gengiver simulationer af deuteranopi, protanopi og tritanopi af det billede, beregnet i browseren. For at tjekke en palet i stedet for et foto skal du først eksportere eller tage et screenshot af dine farveprøver som et billede og derefter droppe det i simulatoren. Brug af de tre værktøjer i rækkefølge, udtræk fra billedet, juster i color-converter, og eksporter derefter et billede med farveprøver og verificer det i color-blindness, dækker den fulde arbejdsgang beskrevet ovenfor. Dit billede forbliver på din enhed hele vejen igennem, hvilket betyder noget, hvis kildefotoet indeholder upubliceret branding eller en kundes ikke-frigivet identitet.
Værktøjer i denne artikel
- Farvepalette-udtrækUdtræk dominerende farver fra et billede som HEX-farveprøver. Kopiér enhver farve. Ingen upload.
- Farveblindhed-simulatorSimulér protanopi, deuteranopi, tritanopi og akromatopsi på et billede. Ingen upload.
- FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV og CMYK. WCAG-kontrasttjekker inkluderet. Ingen upload.
- Farveskema-generatorGenerer komplementære, analoge, triadiske, tetradiske og monokromatiske paletter fra en basisfarve. Ingen upload.
Ofte stillede spørgsmål
Hvor mange farver returnerer en paletudtrækker typisk?
De fleste værktøjer returnerer mellem 5 og 16 farver som standard, selvom mange lader dig indstille antallet. Returnering af færre farver betyder, at algoritmen skal gruppere flere pixels sammen, hvilket kan flette distinkte men lignende toner. Returnering af flere farver kan producere næsten-dubletter, der er svære at bruge distinkt. Til en brugergrænsefladepalet er 6 til 8 farver normalt et praktisk udgangspunkt.
Kan en palet udtrukket fra et billede automatisk bestå WCAG-kontrast?
Ikke automatisk. Dominerende farver i et fotografi er ofte mellemtoner med moderat luminans, som har tendens til at producere forhold i området 2:1 til 3:1 mod hinanden. At møde 4,5:1-tærsklen for brødtekst kræver typisk at lysne baggrundsværdier eller mørke tekstværdier ud over, hvad den rå udtrækning giver. Udtrækningen giver dig et udgangspunkt; kontrastkontrollen fortæller dig, hvor meget justering der er nødvendig.
Tager WCAG-kontrastforholdet højde for farveblindhed?
Delvist. WCAG-luminansformlen er baseret på relativ lysstyrke, ikke farvetone, så et høj-kontrastpar, der opfylder 4,5:1, vil generelt forblive adskillelig selv for farveblinde brugere, fordi lysforskellen er bevaret. Dog kan to farver med lignende luminans men forskellige farvetoner, såsom rød og grøn ved samme lysstyrke, bestå en luminansbaseret kontrastkontrol, mens de stadig er uadskillelige for deuteranoper. Kørsel af en farveblindhedssimulering er den korrekte måde at kontrollere farvetonenivelaudifferentiering separat fra kontrastforholdet.