Din varumärkespalett

Lägg till dina färger. Ge dem gärna egna namn så blir de enklare att välja i förhandsvisningen. Du kan redigera namnet senare genom att klicka på det.

Pipett
Välj färg

Slumpa en palett

Välj stämning, färgton och ton, eller låt verktyget välja åt dig.

Mina exempel

Spara designer du gillar så byggs ett flöde här nedanför. Du kan spara upp till tjugo och jämföra dem som ett Instagram-flöde. Håll muspekaren över en ruta för att dra och ändra ordning eller ta bort den, och klicka på den för att ladda tillbaka designen i förhandsvisningen.

Plocka färger från en bild

Ladda upp en bild så placerar verktyget provpunkter med så stor färgskillnad som möjligt. Välj mellan 2 och 12 färger, dra markeringarna i bilden och lägg till färgerna i paletten när du är nöjd.

Alla kombinationer

Varje cell visar text i radens färg på kolumnens bakgrund. Förklaringar till färgrutorna och kontrastvärdena hittar du under matrisen.

Standard att visa

Snabbguide till standarderna

WCAG 2.1 / 2.2 (gäller idag)

Mäter kontrast som ett förhållande mellan 1:1 och 21:1.

  • AA brödtext: minst 4.5:1
  • AA stor text: minst 3:1 (≥24 px, eller ≥18.66 px fet)
  • AA knappar/ikoner: minst 3:1
  • AAA brödtext: minst 7:1
  • AAA stor text: minst 4.5:1

Det här är kravet i lagstiftning idag, t.ex. tillgänglighetsdirektivet.

APCA, framtidens standard (WCAG 3)

APCA mäter upplevd kontrast och tar hänsyn till textstorlek och vikt. Resultatet är ett Lc-värde (Lightness contrast), 0 till 106.

  • Lc 90: idealiskt för liten brödtext
  • Lc 75: minimum för normal brödtext
  • Lc 60: minimum för större text (~24 px)
  • Lc 45: rubriker och stora element
  • Lc 30: absolut minimum, endast mycket stor text

APCA är ännu utkast men visar var standarden är på väg. Bra att designa med redan nu.

Mjuk kontrast utanför WCAG

Ett extra läge för dig som inte har tillgänglighet som krav men ändå vill att det ska synas i de allra flesta fall, med mjukare och mer ton-i-ton-färg.

Gränsen sänks med textstorleken, precis som WCAG själv gör (4.5 → 3 för stor text) — större bokstäver är läsbara vid lägre kontrast:

  • Brödtext / liten text: minst 3:1
  • Rubriker / stor text: minst 2:1
  • Omslag / mycket stor text (≥48 px): minst 1.5:1

Uppfyller inte tillgänglighetslagen. Du tappar bland annat personer med nedsatt syn, i starkt solljus eller med dålig skärm — och färgton hjälper inte i gråskala. Använd det som ett medvetet estetiskt val, inte när tillgänglighet är ett krav.

Tänk så här i ditt varumärke

En vacker färg kan ändå vara svår att läsa. Använd verktyget så här:

  • Spara dina varumärkesfärger i paletten, gärna med egna namn.
  • Kolla matrisen, vilka par är säkra för brödtext, vilka bara för rubriker?
  • Testa i förhandsvisningen i den storlek du faktiskt använder, på Instagram eller annan plattform.
  • Faller ett par igenom, använd justeringsförslaget för en näraliggande, godkänd nyans.