Designet og fargeprofilen i Canvas

Det nye designet i UiOs Canvas skal sikre best mulig kontrast, lesbarhet og brukervennlighet, samtidig som det gir et moderne preg.

Grunnfargene i UiOs Canvas

Svart

Fargekoder

RGB: 34, 34, 34
HEX: #222222

Fast bruk

navigasjonsmeny
lenker i Moduler

Blå

Fargekoder

RGB: 13, 94, 160
HEX: #0D5EA0

Fast bruk

lenker
knapper
ikoner/grafiske elementer

Kremhvitt

Fargekoder

RGB: 249, 247, 243
HEX: #F9F7F3

Fast bruk

tekstfarge i navigasjonsmeny
tekstfarge i knapper

Hvorfor kremhvitt?

Tekst og bakgrunn

Brødteksten i Canvas er svart (HEX #000000), og bakgrunnen er hvit (HEX #FFFFFF). Dette gir maksimal kontrast og god lesbarhet.

Tekst i kremhvitt (HEX #F9F7F3) brukes mot den mørke bakgrunnen i navigasjonsmenyen (svart) og knappefargen (blå). Kremhvitt er en myk og varm farge som gir en mer behagelig lesbarhet mot mørk bakgrunn enn helt hvitt (HEX #FFFFFF), samtidig som det fortsatt sikrer god kontrast.

Forbedringer

Flere fargebokser

Designelementene har fått et lite løft. Fargeboksene 1, 2 og 3 har fått nye blåfarger som passer det nye designet. I tillegg har det kommet tre fargebokser til, basert på UiO-rødfargen. Den samme rødfargen har også blitt en horisontal linje, så man kan velge mellom blå eller rød horisontal stripe.

Knapper for å legge til ting i moduler

Knappen for å legge til noe i moduler (plusstegnet "+") har tidligere vært uten bakgrunnsfarge og dermed vanskelig for de fleste nye brukere å oppdage.

Derfor er denne knappen gitt en blå bakgrunnsfarge med en tilstrekkelig fargeskift ved hover:

Sidetitler og overskriftsnivåer 2, 3 og 4

Flere brukere har kommentert at - i det gamle designet - hadde sidetitler (overskriftsnivå 1) for tynn skrift, og at det var vanskelig å se forskjellen mellom overskriftsnivåer 2 og 3. I tillegg sa noen brukere at det var vanskelig å se at overskriftsnivå 4 var en overskrift og ikke vanlig tekst. Derfor er det gjort endringer til størrelsen og styling på overskriftene.

Gammelt design:

Nytt design:

Krav til kontrast

Element	Gammel kontrastverdi	Ny kontrastverdi	WCAG 1.4.1 Nivå A	WCAG 1.4.3 Nivå AA	WCAG 1.4.6 Nivå AAA	WCAG 1.4.11 Nivå AA	WCAG 2.4.7 Nivå AA
Brødtekst mot bakgrunn	12.58:1	21:1	➖Ikke relevant	✅Oppfylt	✅Oppfylt	➖Ikke relevant	➖Ikke relevant
Lenketekst mot bakgrunn	5.08:1	6.71:1	✅Oppfylt¹	✅Oppfylt	🔶 Delvis oppfylt > 18 pkt ✓ AAA	➖Ikke relevant	➖Ikke relevant
Brødtekst mot lenketekst	2.48:1	3.12:1	✅Oppfylt¹	➖Ikke relevant	➖Ikke relevant	➖Ikke relevant	➖Ikke relevant
Knapper	4.51:1	6.27:1	✅Oppfylt²	✅Oppfylt	🔶 Delvis oppfylt > 18 pkt ✓ AAA	✅Oppfylt	✅Oppfylt⁴
Navigasjonsmeny	15.3:1	14.86:1	✅Oppfylt³	✅Oppfylt	✅Oppfylt	✅Oppfylt	✅Oppfylt⁴
Designelementer	11:1 blå	14.7:1 blå 12.9:1 rød	✅Oppfylt	✅Oppfylt	✅Oppfylt	➖Ikke relevant	✅Oppfylt⁴

¹ Leverandøren har i sitt standard rammeverk dessverre ikke sørget for at alle lenker får automatisk understrek eller understrek ved hover. Derfor bryter man formelt sett en del av kravet WCAG 1.4.1 Bruk av Farge (Nivå A) (uutilsynet.no), som leser: "Lenker markerte med farge, skiller seg ut fra nærliggende ikke-lenket tekst med mer enn bare farge." UiO har derfor endret det slik at det alltid er understrek på brødtekst-lenker, og at navigasjonslenker i blå (rommenyer, brødsmuler, osv.) får understrek ved hover. Når UiO har i tillegg forsøkt å få så høy kontrast som mulig mellom brødtekst og lenketekst (3.12:1), er det vår vurdering at vi møter dette kravet.

² UiO bruker en kombinasjonen av tekst, ikoner, fargeskift ved hover, og fokusindikatorer (for tastaturbrukere) for knapper.

³ UiO bruker en kombinasjonen av tekst, ikoner, fargeskift ved hover, og tofargede fokusindikatorer (for tastaturbrukere) i navigasjonsmenyen.

⁴ UiO bruker tofargede fokusindikatorer for å sikre tilstrekkelig kontrast ved fokus, som er i tråd med teknikk C40 (w3.org) for å møte WCAG-kravet 2.4.7. Dette er særlig viktig for knapper med mørk bakgrunn.