Kortversionen
- Auto-bläck är en inställning i Gradiently som väljer ljus eller mörk text för varje textrad, den som går bäst att läsa på den del av Marken som ligger precis bakom.
- Båda bläcken kommer från Markens egen palett, så texten hör alltid ihop med bakgrunden och blir inte automatiskt ren vit eller svart.
- Text kan också låsas till det ljusa eller det mörka bläcket när du vill ha en färg oavsett bakgrund.
- Auto-bläck samverkar med Markens reaktion, som lugnar materialet bakom orden, från Av via Osynlig, Diskret och Tydlig till Kraftig.
- Ingen av dem använder rutor, skuggor eller oskärpa, och du väljer hur starkt Marken reagerar.
På den här sidan
Auto-bläck är hur Gradiently väljer färg på din text. För varje textrad som är satt till Auto tittar det på den del av Marken som ligger direkt bakom och väljer det ljusa eller det mörka bläcket, det som går bäst att läsa där. Båda bläcken kommer från Markens egen palett, så en rubrik över ett blekt hörn blir mörk medan en bildtext över ett mörkt band blir ljus, och båda ser ändå ut att tillhöra samma varumärke.
Varför en enda textfärg misslyckas på en gradient
På en platt bakgrund väljer du textfärg en gång. En gradient förändras längs vägen: toppen av en story kan vara nästan vit och botten nästan svart. Vit text som läses vackert längst ned försvinner högst upp, och en lång rubrik kan korsa båda. Det är kärnproblemet i text på en gradientbakgrund, och de vanliga lösningarna, rutor bakom orden och skuggor, döljer just den bakgrund du valde.
En fast färg över en föränderlig bakgrund: delar av typen strider mot materialet.
Auto-bläck med reagerande Mark: varje rad får det bläck som går att läsa, och materialet lägger sig bakom den.
Så väljer Auto-bläck ljus eller mörk
Varje Mark har ett ljust bläck och ett mörkt bläck hämtade ur sin palett: en blek ton och en djup ton som hör ihop med dess färger. När en rad är satt till Auto mäter Gradiently materialet i det område raden täcker och ger den det bläck som sticker ut mest. Flytta texten så följer valet med. Ändra storlek på designen till en story eller en banderoll, där ljuset hamnar någon annanstans, så väljs varje rad på nytt.
Idén bakom är samma kontrastmått som används i webbens riktlinjer för tillgänglighet: jämför hur ljus texten är med hur ljus bakgrunden är. Här är principen i några rader kod, för den som bygger något liknande på webben.
// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
const c = [r, g, b].map((v) => {
v /= 255
return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
})
return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}
const contrast = (a, b) => {
const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
return (hi + 0.05) / (lo + 0.05)
}
// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}
pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light inkNär det gäller själva talen kräver WCAG ett kontrastförhållande på minst 4,5:1 för brödtext och 3:1 för stor text. Färgkontrast och tillgänglighet förklarar förhållandena, och WebAIM:s kontrastkontroll låter dig testa vilket par som helst.
Auto, ljus eller mörk: de tre bläcklägena
Använd det när
Använd det när
Använd det när
Du kan fortfarande färga text med vilken färg som helst ur ditt varumärkespaket eller Markens palett. Auto-bläck är standard eftersom det är det val som fortsätter fungera när designen flyttas till en annan storlek.
Så hjälper Marken till bakifrån
Att välja rätt bläck är halva jobbet. Den andra halvan är själva bakgrunden. En Mark vet var orden finns: dess lugnaste, mest kontrastrika område flyttar sig bakom texten, färger nära bokstäverna fördjupas eller lyfts och rörig detalj mjuknar. Hela mekanismen finns i en bakgrund som anpassar sig efter texten. Auto-bläck väljer sedan bläck för det lugnade området, så att de två förstärker varandra.
Vad som händer bakom dina ord
Vad som händer bakom dina ord
Vad som händer bakom dina ord
Vad som händer bakom dina ord
Vad som händer bakom dina ord
Utöver förinställningarna låter fyra rattar dig finjustera: Ton, hur långt materialet lägger sig bakom orden för kontrast; Lugn, hur mycket dess vridning och rörighet mjuknar; Böj, en lätt böjning av mönstret vid kanten av orden; och Räckvidd, hur långt runt orden det reagerar. Du väljer hur starkt det verkar, så att en affisch kan förbli vild medan en meny förblir stillsam.
Vad Auto-bläck medvetet undviker
Undvik
- En massiv ruta bakom varje rad
- Skuggor som smetar ut bokstävernas kanter
- Att göra bakgrunden bakom texten suddig
- Ren vit text på ett blekt hörn
Gör så här
- Låt varje rad få det bläck som går att läsa
- Låt Marken lägga ett lugnare område bakom orden
- Håll bläcken inom Markens egen palett
- Höj reaktionsnivån för liten eller lång text
Rutor och skuggor fungerar, men de gör sig själva påminda och döljer bakgrunden. Alternativ till textskuggor förklarar varför, och text på en rörig bakgrund har fler sätt att hålla orden läsbara utan dem.
Få ut det mesta av Auto-bläck
- 1
Låt texten stå på Auto
Lås bara en rad till ljus eller mörk när du har ett särskilt skäl, till exempel att matcha en tryckt serie.
- 2
Välj en reaktion efter uppgiften
Diskret passar de flesta inlägg i sociala medier. Välj Tydlig eller Kraftig för liten text, långa detaljer eller allt som läses på avstånd.
- 3
Kontrollera varje storlek
Titta på varje format efter storleksändringen. Bläcket väljs om för varje, vilket oftast är det du vill.
- 4
Håll rubrikerna korta
En rad som korsar från Markens ljusaste till dess mörkaste del är svårare för vilket bläck som helst. Dela den på två rader.
Vanliga frågor
Vad är Auto-bläck i Gradiently?
En inställning för textfärg som väljer Markens ljusa eller mörka bläck för varje rad, beroende på vilket som läses bäst mot den del av bakgrunden som ligger bakom.
Kan jag stänga av Auto-bläck?
Ja. Ställ in en rad så att den alltid använder det ljusa eller det mörka bläcket, eller ge den vilken färg du vill. Tillbaka till Auto-bläck återställer den.
Lägger Auto-bläck till skuggor eller rutor bakom texten?
Nej. Det ändrar bara textfärgen. Själva Marken lägger ett lugnare område bakom orden, utan rutor, skuggor eller oskärpa.
Vilket kontrastförhållande bör text ha mot en bakgrund?
WCAG kräver minst 4,5:1 för brödtext och 3:1 för stor text.
Varför ändrade min text färg när jag ändrade storlek på designen?
I en ny storlek faller ljuset på ett annat ställe, så Auto-bläck väljer om bläck för varje rad för att hålla den läsbar.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil