QReg5 Design System

Om färgpaletter

Data visualisering är en form av kommunikation där man gestaltar komplex information på ett visuellt sätt genom grafisk form. Resultatet är till för att visualisera den information vi samlar in så att så många som möjligt kan dra nytta av den. Diagram är en viktig beståndsdel i den kommunikationen.

Bakgrund

Varför finns den här sidan?

Syftet med den här sammanställningen är att ge vägledning åt dem på UCR som arbetar med framställning av diagram i statistikredovisningen samt att möjliggöra en enhetlig presentationsteknik som är tillgänglig för så många som möjligt – även om man har någon typ av färgblindhet.

Detta är en utgångspunkt för vidare arbete och den här sammanställningen gör inte anspråk på att omfatta alla former av diagram utan är inriktad på att fånga upp de vanligaste fallen.

Tanken är att detta är en grund som kommer att utvecklas med tiden och fyllas på med fler givande exempel.

Tillgänglighet som grund

Tillgänglighet är en viktig grundsten i QReg 5-plattformen och för att plattformen ska uppfylla lagen om tillgänglighet för digital offentlig service, riktlinjerna för WCAG 2.1 AA & EN 301 549 måste vissa riktlinjer följas. Mer om lagar och krav finns på DIGGs webbplats.

När det kommer till hur man visualiserar data är WCAG regel 1.4.11 “Non-text Contrast” en utmaning. I Success Criterion 1.4.11 Non-text Contrast (Level AA) kan man läsa att grafik måste ha ett kontrastförhållande på minst 3:1 mot omkringliggande färger. Det innebär att t ex staplar och linjer i diagram måste ha ett visst kontrastförhållande mot sin bakgrund men också mellan varandra.

Denna nuvarande version av färgpaletterna är optimerade för en ljus bakgrund (#FFFFFF). I framtiden finns även möjligheten att anpassa den för ett mörkt tema.

Exempel på kontrastförhållande 3 till 1

Exempel på kontrastförhållandet 3:1 mellan ljust och mörkt.

Olika typer av färgblindhet

En annan aspekt att ta i beaktning när det kommer till data visualisering är olika typer av färgblindhet. Färgkombinationer i de paletter som finns presenterade här är testade för att fungera även om man lider av någon form av färgblindhet.

Exempel på simulering av färgblindhet

Exempel simulering av olika typer av färgblindhet.

Exempel på olika typer av färgblindhet:

  1. Normal: Visar diagrammet utan simulering.
  2. Deuteranopia: En typ av röd/grön färgblindhet. Har svårt att skilja bl a på grön från röd eller ljus grön från gul. Kan även blanda ihop ljusrosa med grå och vit.
  3. Protanopia: En den en typ av röd/grön färgblindhet. Har svårt att skilja på bl a grön från röd/orange, vissa nyanser av blå med mörkröd och mörklila.
  4. Tritanopia: Blå/gul färgblindhet. Den vanligaste formen blandar också ihop ljusblå med grå, grön med blå och orange med röd.
  5. Achromatopsia (Monochromacy): Total färgblindhet. Upplever världen i gråskala.

Färgpaletter

Paletten för datavisualisering är oberoende av grafisk profil. Den ska fungera oavsett rapport och registerprofil, dvs den ska kunna presenteras i både en kontext och i ett register som bygger på QReg5-plattformen.

Genom att ha en fristående skala kan vi säkerställa att vi uppfyller WCAG-kraven på AA-nivå när vår statistik används i publika sammanhang.

VariantBeskrivning
KategoriskDen kategoriska paletten, används för att skilja på data som inte har någon korrelation mellan varandra.

Den är indelad efter hur många värden som ingår i det man visar upp:
  • Färre än 6 värden: vi använder fördefinierade kombinationer beroende på hur många värden som ska presenteras.
  • Fler än 5 värden: vi använder en palett med upp till 14 värden som hjälper till att skilja värdena åt. Har vi fler än 14 värden kompletterar vi med plattformens gråskala.
SekvensiellDen sekvensiella paletten, används framförallt för att visa på trender, mätvärden och saker som är relaterade till varandra. Den här typen av paletten består vanligtvis en färg med varierande intensitet.

Den är indelad i två spår:
  • Monokrom:
    
Fungerar bra för att exempelvis visa trender och likande. I ljusa teman med vit bakgrund är minsta värdet det ljusaste och det högsta mörkare. 
(I mörka teman är det högsta värdet det ljusaste).
– Kan användas både för stapeldiagram, cirkeldiagram etc.
– Finns definierade efter antalet värden som ingår i skalan (1–10).
  • Motpoler:
    
Varmt/kallt, högt/lågt.