Koncept för stockholm.se #1 – Kontraster
En del i vårt arbete med att ta fram guidelines för e-tjänster och byggandet responsiva stockholm.se var att definiera konceptet för stockholm.se på ett samlat och tydligare sätt. Detta för att förbättra kännedomen (för beställare och konsulter) om vad som fungerar från tidigare erfarenheter och kunskap, men också för att säkra användbarheten i utvecklingen framöver för oss själva.
Under våren har också stockholm.se granskats tillsammans med FunkaNu för att säkra tillgänglighetsaspekterna och då också de konceptuella delarna.
Nedan beskrivs konceptet med fokus på kontrasthantering i gränssnittet.
Hantering av kontraster i stadens webblösningar:
Det finns tre parametrar vi mäter kontraster på, skillnad i färg, skillnad i ljusstyrka, skillnad i ljusintensitet.
Riktlinjerna nedan är tolkade som just riktlinjer och inte som regler.
Skillnad i färg
- Vi strävar alltid mot ett gränsvärde på 500 eftersom det är W3C riktlinjer.
- Vi tillåter aldrig kontrastvärden under 400.
- På viktiga textytor som huvudmenyer, startsida och brödtexter gäller riktlinjen 500 eller i närheten av 500.
- Ett värde under 450 fungerar inte för sådana texter.
- För andra texter, t.ex. kontraster på en hovereffekt eller mycket stora texter i en kampanjyta (där innehållet också kan nås på andra sätt t.ex. genom navigation eller sök) kan i undantagsfall lägre kontraster accepteras, t.ex. 420.
Skillnad i ljusintensitet
- Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter under 18 punkter (1:4.5)
- Vi följer alltid W3Cs riktlinje om skillnad i ljusintensitet enligt nivå AA för texter över 18 punkter och några steg uppåt i textstorlek (1:3)
- Vi kan i undantagsfall frångå W3Cs riktlinjer om skillnad i ljusintensitet för riktigt stora texter t.ex. 72 punkter. Eftersom storleken påverkar läsbarheten också och det inte finns någon riktlinjer från W3C för riktigt stora textstorlekar.
Det verktyg som använts för att mäta skillnad i ljusintensitet (kontraster) finns på: http://www.paciellogroup.com/resources/contrastAnalyser, samt skillnad i färg: http://snook.ca/technical/colour_contrast/colour.html
Exempel på fonthantering:
