ArtikelBild

Bilden ska bära en rubrik: beställ ytan, sätt texten själv

Ett omslag, ett socialt inlägg, en tumnagel — bilden är sällan bara en bild, den är underlag för några ord som ska läsas. Ändå beställs den som om den vore ett fristående motiv, och rubriken får sedan hanka sig fram ovanpå det som råkade hamna där. Den här artikeln handlar om att beställa tomheten lika noga som motivet, och om att låta bokstäverna vara ditt jobb och inte modellens.

Publicerad · Senast granskad

Ett tomt gräddvitt kort ligger över ett svartvitt blomstertryck på en klämbräda, med tre mindre utsnitt av samma motiv och rosa tuschstreck bredvid.
Den tomma ytan är beställd, inte överbliven. De tre mindre utsnitten är formatprovet: samma motiv beskuret på tre sätt, där rubrikens plats ska hålla varje gång.

Kort sagt

Modellen målar ytan, du sätter texten. Beställ den tomma ytan som ett eget motiv med läge, storlek och ton — inte som "plats för text". Kontrollera sedan tre saker innan bilden går vidare: att ytan finns kvar när bilden beskärs till de format du faktiskt publicerar i, att kontrasten mellan rubrik och underlag håller i den storlek bilden visas, och att typografin ligger i ett eget lager du kan rätta, byta språk i och sätta om. Ber du modellen skriva rubriken får du något som varken går att rätta eller mäta.

Två fel som ser ut som samma fel

När en bild inte fungerar under en rubrik brukar orsaken vara en av två, och båda ser likadana ut i slutresultatet: rubriken går inte att läsa.

Det första felet är att du bad modellen skriva. Bokstäver som genereras tillsammans med motivet kan bli allt från felstavade till rent klotter, och hur ofta det händer varierar mellan modeller och mellan versioner av samma modell. Just därför är det inte värt att bygga en arbetsordning på hur bra en viss modell råkar vara på saken i dag. Vill du ändå påstå något om en namngiven modells förmåga att återge text i bild, kontrollera det mot leverantörens aktuella dokumentation och skriv ut datumet — annars är påståendet färskvara som ser ut som en sanning.

Det andra felet är tystare. Bilden är utmärkt, bokstäverna är inga bokstäver, men motivet fyller hela ytan. Det finns ingenstans att lägga rubriken där den inte hamnar över ett öga, en gren eller en högdager. På skärmen där du arbetar ser det ändå hyfsat ut, eftersom bilden är stor. I flödet är den en tumnagel och rubriken är borta.

Även en perfekt genererad rubrik är fel lösning

Anta att bokstäverna blir felfria. Texten är ändå inbränd i pixlarna: du kan inte rätta ett kommatecken utan att generera om hela bilden, inte byta språk utan en ny bild per språk, och inte sätta om raden när formatet ändras. WCAG 2.2 SC 1.4.5 Images of Text, läst 27 augusti 2026, är nivå AA och anger att text ska användas för att förmedla information hellre än bilder av text, om tekniken klarar den visuella presentationen. Två undantag namnges: att bilden av text går att anpassa visuellt efter användarens behov, och att en viss presentation är väsentlig för informationen. En logotyp räknas som väsentlig. En rubrik satt i ett vanligt typsnitt gör det normalt inte. Artikeln tar inte ställning till vilket regelverk som gäller för just din publicering — det är en fråga för den som äger sajten.


Beställ ytan som ett eget motiv

Grundmetoden för att beställa en bild — de fyra lagren och den fasta stilsvansen — ligger i bildguiden och förutsätts här. Det som tillkommer när bilden ska bära text är ett femte krav som inte handlar om vad som ska synas, utan om vad som ska vara frånvarande.

Skriv inte "lämna plats för text". Den formuleringen kan få precis fel effekt: modellen tolkar "text" som ett bildelement och fyller ytan med en skylt, en banderoll, en bokrygg eller något bokstavsliknande klotter — alltså exakt det du ville undvika. Ordet text hör hemma i ditt eget lager, inte i beställningen.

Beställ i stället ytan som något fysiskt som råkar vara lugnt. En himmel. En putsad vägg. Dimma över vatten. En skuggad golvyta. Då har motivet en anledning att vara händelselöst just där, och du har fått ett bildelement att bedöma i stället för ett tomrum att hoppas på.

Tre uppgifter behöver stå i beställningen, och de hänger ihop:

Läge. Var ytan ligger, uttryckt i bildens egna termer: övre tredjedelen, vänstra halvan, nedre vänstra kvadranten. Undvik "i bakgrunden" — det säger något om djup, inte om position, och en bakgrund kan vara lika upptagen som en förgrund.
Storlek. Hur stor ytan ska vara. Ett användbart riktmärke, och det är vårt eget och ingen standard: beställ den lugna ytan minst en texthöjd större än textblocket på varje sida. Rubriken behöver luft för att läsas, och marginalen är dessutom det du lever på när beskärningen flyttar sig.
Ton. Om ytan ska vara ljus eller mörk, och att den ska vara jämn. Det här är beslutet folk hoppar över, och det är det som avgör kontrasten. Mörk text kräver en ljus, jämn yta; ljus text kräver en mörk. Bestämmer du inte tonen före genereringen har du överlåtit läsbarheten åt slumpen.

Att ytan är beställd betyder inte att den kommer. En beställning är ett önskemål till modellen, och den tomma ytan är precis lika mycket en kandidat som resten av bilden — den ska granskas efteråt, inte antas. Har du flera kandidater att välja mellan görs det urvalet med kontaktark, och då är den lugna ytans läge och jämnhet ett av kriterierna du bedömer på.

Ytbeställning — läggs till i den vanliga fyralagersbeställningen
PROJEKT:      formarkivet-vt26
LUGN YTA:     övre vänstra kvadranten
OMFATTNING:   ca 45 % av bildbredden, ca 35 % av bildhöjden
TON:          mörk och jämn — ljus rubrik ska ligga ovanpå
GESTALTNING:  skuggad himmel före gryning, utan moln eller fåglar
MOTIVET:      hålls i högra halvan, tittar in mot mitten
SKA INTE FINNAS I YTAN:
              skyltar, banderoller, bokstäver, siffror, mönster,
              starka högdagrar, hårda kanter, horisontlinjer

TEXTEN SÄTTS SEPARAT — den beställs inte här

Beställningar som ger dig problem

  • "Lämna plats för en rubrik högst upp."
  • "Med texten VÅRKATALOG 2026 i stora bokstäver."
  • "Minimalistisk komposition med negativt utrymme."
  • "Enkel bakgrund så att text syns bra."
  • "Bokomslag med titel och författarnamn."

Beställningar du kan granska

  • "Övre tredjedelen är en jämnt skuggad vägg utan struktur."
  • "Motivet är placerat i nedre högra kvadranten."
  • "Himlen är mörk och molnfri från bildens kant till horisonten."
  • "Inga skyltar, bokstäver eller siffror någonstans i bilden."
  • "Ingen högdager i bildens vänstra halva."

Ytan ska överleva formatbytet

Här faller de flesta bilder som såg helt godkända ut i beställningsläget. Du genererar ett liggande format, ser att den övre vänstra kvadranten är fin och lugn, och godkänner. Sedan ska samma bild bli ett kvadratiskt inlägg och en stående story. Beskärningen tar bort sidorna, mitten flyttar sig, och den lugna ytan är plötsligt halverad eller hamnar under det som nu är bildens övre kant.

Provet tar ett par minuter och är svårt att göra fel. Rita ut den rektangel rubriken faktiskt behöver, i den storlek den ska sättas. Exportera sedan bilden till varje bildförhållande du publicerar i — inte till en allmän lista, utan till de format du själv använder. Lägg rektangeln på plats i varje export och titta efter tre saker: att den ryms, att den ligger på den lugna ytan hela vägen ut i hörnen, och att den inte krockar med motivets ansikte eller huvudlinje.

Faller ett format är det billigare att beställa om än att lappa. Att i efterhand flytta den lugna ytan i en godkänd bild är ett eget arbete med egna avvägningar — det handlar om konkurrerande styrsignaler och beskärning, och det ägs av beskrivningen i fyra lager. Kommer du dit har du redan lämnat beställningsfasen.

Avvägningen: en yta eller flera bilder

Ju fler bildförhållanden en och samma bild ska klara, desto större och mer centrerad måste den lugna ytan vara — och desto mindre plats blir det kvar åt motivet. Vid tre eller fler format är motivet ofta så trängt att bilden tappar sin poäng. Då är det ett rimligare val att beställa två bilder ur samma stilsvans, en liggande och en stående, än att tvinga in allt i en. Den bedömningen är din, men gör den före genereringen i stället för vid publiceringen.


Läsbarhetsprovet görs i den storlek bilden visas

Att bedöma en rubrik i hundra procents zoom på en stor skärm säger nästan ingenting om hur den ser ut i ett flöde på en telefon. Sätt därför rubriken, exportera, och titta på resultatet i den bredd bilden faktiskt får hos mottagaren. Zooma inte in. Kan du inte läsa rubriken på en armlängds avstånd är provet redan avgjort.

Ögat är däremot en dålig mätare på kontrast, särskilt när underlaget är ett fotografi med varierande ton. Använd ett mätvärde i stället. W3C:s förklaringssida för WCAG 2.2 SC 1.4.3 Contrast (Minimum), uppdaterad 1 juni 2026 och läst 27 augusti 2026, anger ett kontrastförhållande på minst 4,5:1 för text och bilder av text, och minst 3:1 för storstilig text. Storstilig definieras där som minst 18 punkter, eller 14 punkter fet, eller den storlek som ger motsvarande verkan i kinesiska, japanska och koreanska typsnitt. En rubrik hamnar oftast i den storstiliga klassen — men kontrollera punktstorleken i stället för att anta det, för underrubriker och etiketter gör det sällan.

Fallgropen: undantaget gäller inte din rubrik

Samma sida räknar upp text som saknar kontrastkrav, däribland text som "är en del av en bild som innehåller annat betydande visuellt innehåll". Det är lätt att läsa som att en rubrik ovanpå ett fotografi skulle vara undantagen. Det gör den inte. Undantaget gäller sådan text som råkar finnas i bilden — en skylt i bakgrunden, en textilprint — inte den text du själv lägger dit för att den ska läsas. Din rubrik bär information, och då gäller tröskelvärdena. Undantaget för logotyp och varumärkesnamn är däremot uttryckligt: den delen av ytan har inget kontrastkrav.

Mät på rätt ställe. Ett fotografi har inte en bakgrundsfärg utan hundratals, och medelvärdet under textblocket är oftast smickrande. Plocka i stället ut den ljusaste och den mörkaste punkt som hamnar under bokstäverna och mät båda mot textfärgen. Det lägsta av de två värdena är bildens verkliga kontrast, och det är det värdet som ska klara tröskeln. Faller det på någon punkt är det ett fall — det är där ordet blir oläsligt.

Läsbarhetsprov — fyra rader att fylla i per bild
VISNINGSBREDD:   [px i det flöde bilden publiceras i]
RUBRIKSTORLEK:   [pt] → klass: normal (4,5:1) / storstilig (3:1)
MÖRKASTE PUNKT UNDER TEXTEN:  [värde] : 1
LJUSASTE PUNKT UNDER TEXTEN:  [värde] : 1

LÄGSTA VÄRDET AVGÖR.  Under tröskeln = fall.

Faller provet:  1) byt textfärg     2) flytta textblocket
                3) beställ om ytan  4) platta som sista utväg

Ordningen i mallen är avsiktlig. Att lägga en mörkläggande platta eller en gradient under texten löser kontrasten på tio sekunder och kostar bilden en del av det som gjorde den värd att beställa. Som riktmärke, och det är vårt eget: täcker plattan mer än ungefär en tredjedel av bildytan har du inte lappat en bild, du har gjort en färgruta med ett foto i kanten. Då är den lugna ytan felbeställd och det är beställningen som ska rättas.


Sätt typografin i ett eget lager

Rubriken ska ligga som riktig text ovanpå bilden så länge tekniken tillåter det: som ett textelement på sidan, eller som ett redigerbart textlager i layoutfilen. Vinsten är praktisk snarare än principiell. Du kan rätta en felstavning på fem sekunder, sätta samma bild med tre olika rubriker, byta språk utan att röra bilden, och sätta om raden när formatet ändras. Det är också det kriteriet i SC 1.4.5 handlar om.

Ibland går det inte. En affisch som ska tryckas, en exportfil som ska levereras som en sammanslagen bild, ett format som inte tar emot ett textlager — då bränns texten in. Två saker gör den inbränningen hanterbar. Behåll den redigerbara källfilen och exportera ur den, så att nästa version börjar i texten och inte i pixlarna. Och skriv rubrikens exakta lydelse i bildens alternativtext, eftersom informationen annars försvinner helt för den som inte ser bilden.

Det finns dessutom fall där inbränd typografi är rätt svar och inte en kompromiss: när bokstavsformen är verket. En handtecknad logotyp, en affisch där typografin är illustrationen, ett omslag där titeln är målad in i motivet. WCAG 2.2 har det undantaget inskrivet som Essential i SC 1.4.5, och en strängare nivå, SC 1.4.9 på nivå AAA, tillåter bilder av text bara för ren dekoration eller där presentationen är väsentlig. Skillnaden mot slarv är att du har valt det, kan säga varför, och har löst alternativtexten.

Två filer i stället för en betyder att de kan komma ifrån varandra. Namnge bilden, den redigerbara layoutfilen och den exporterade slutversionen så att de går att para ihop om ett halvår, och lägg dem där resten av materialet ligger — samma spårbarhet som i ordning på genererat material. Den bild som saknar sin textfil är i praktiken en bild du får beställa om.


När ett prov faller — var felet rättas

Poängen med att dela upp arbetet i tre prov är att varje fall pekar på ett bestämt ställe att rätta. Att sitta och putsa i den levererade bilden är oftast dyrare än att ändra en rad i beställningen och köra om.

1
Bokstäver dyker upp i bilden → beställningen nämnde text, eller ytan beskrevs som en plats för text. Ta bort ordet ur beställningen, beskriv ytan som ett fysiskt material i stället, och lägg skyltar, banderoller, bokstäver och siffror i uppräkningen av vad som inte ska finnas.
2
Ytan finns men är upptagen → läge och storlek är beställda, ton och jämnhet är det inte. Lägg till att ytan ska vara jämn och ange om den ska vara ljus eller mörk, och räkna upp det som stör: högdagrar, hårda kanter, horisontlinjer, mönster.
3
Ytan försvinner vid beskärning → den var beställd för litet eller för nära en kant. Gör om beställningen med större marginal och ytan närmare mitten, eller dela upp i två bilder ur samma stilsvans. Att flytta ytan i en redan godkänd bild är ett annat arbete med egna avvägningar.
4
Kontrasten faller → prova textfärg och placering först, i den ordningen. Håller det inte var tonen fel beställd, och då rättas tonen. En platta är sista utvägen, inte första.
5
Rubriken blir oläslig i visningsstorlek trots godkänd kontrast → det är ett typografiskt fel och inte ett bildfel. Färre ord, större grad, kortare rader. Bilden ska inte beställas om för att rubriken är för lång.

Definition av klart

Bilden är klar att sättas när den lugna ytan är beställd med läge, storlek och ton och finns där i den levererade filen, när inga bokstavsliknande element dykt upp i bilden, när rektangeln för rubriken ryms på den lugna ytan i varje bildförhållande du publicerar i, när det lägsta uppmätta kontrastvärdet under textblocket klarar 4,5:1 för normal text eller 3:1 för storstilig, och när rubriken sitter i ett eget textlager — eller är inbränd av ett skäl du kan formulera och kompletterad med en alternativtext som återger lydelsen. Bild, layoutfil och exporterad slutversion ligger sparade tillsammans och går att para ihop.