# Auto-bläck: så väljer Gradiently ljus eller mörk text för varje rad

[Canonical HTML page](https://gradiently.design/sv/guide/auto-ink-legibility)

En gradient är ljus på ett ställe och mörk på ett annat, så ingen enskild textfärg passar överallt. Auto-bläck bestämmer rad för rad, och Marken hjälper till bakifrån.

## The short version

- 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.

**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](https://gradiently.design/sv/guide/text-on-gradient), och de vanliga lösningarna, rutor bakom orden och skuggor, döljer just den bakgrund du valde.

En vertikal story som annonserar en ateljéförsäljning, där textfärgen kämpar mot ljusare och mörkare delar av gradienten

En fast färg över en föränderlig bakgrund: delar av typen strider mot materialet.

Samma story om ateljéförsäljning där varje rad har det ljusa eller mörka bläck som läses bäst, och lugnare material bakom orden

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.

- Ljust bläck: #fbf3ea
- Persikoljus: #e9a27c
- Rosa mitt: #9c4f6b
- Plommonskugga: #3b1f3f
- Mörkt bläck: #1a0f1f

En exempelpalett för en Mark med sina två bläck i vardera änden. Bläcken är färgade med Markens egen värme, inte rent vitt och rent svart.

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.

```js
// 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 ink
```

Bara principen, inte koden i Gradiently. En verklig bakgrund varierar under en rad, så området bakom måste mätas, inte en enda pixel.

Nä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](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar förhållandena, och [WebAIM:s kontrastkontroll](https://webaim.org/resources/contrastchecker/) låter dig testa vilket par som helst.

## Auto, ljus eller mörk: de tre bläcklägena

| Läge | Vad det gör | Använd det när |
| --- | --- | --- |
| Auto | Väljer ljust eller mörkt bläck per rad utifrån vad som ligger bakom | Nästan alltid: rubriker, detaljer, bildtexter på en föränderlig bakgrund |
| Ljus | Använder alltid Markens ljusa bläck | En mörk Mark där du vill att varje rad ska matcha, som ett citatkort |
| Mörk | Använder alltid Markens mörka bläck | En blek, papperslik Mark, eller tryck där du vill ha ett enhetligt bläck |

Texten börjar på Auto. Att byta en rad till ett fast bläck är ett enda val i inställningarna för textfärg, och Tillbaka till Auto-bläck återställer den.

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](https://gradiently.design/sv/guide/text-reacts-to-background). Auto-bläck väljer sedan bläck för det lugnade området, så att de två förstärker varandra.

| Reaktion | Vad som händer bakom dina ord |
| --- | --- |
| Av | Materialet ignorerar dina ord |
| Osynlig | Bara där det behövs; ingen kommer märka det |
| Diskret | Balanserad: looken består, orden går att läsa |
| Tydlig | Orden vinner alltid |
| Kraftig | Den mesta kontrasten den ger, lugnar ner ett något större område |

De reaktionsnivåer du kan välja för en design, från att materialet ignorerar orden till att det ger så mycket kontrast det kan.

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](https://gradiently.design/sv/guide/text-shadow-alternatives) förklarar varför, och [text på en rörig bakgrund](https://gradiently.design/sv/guide/type-on-busy-backgrounds) 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.

## FAQ

### 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.