Temabygger - Designsystemet

Fargekontrast og visuell vurdering

4.5:1 - Tekst

3:1 - Dekorativ

Under dekorativ

Background Default og Subtle

Light

Dark

Contrast

Background Subtle mot Surface Default

Light

Dark

Contrast

Surface og Base interaksjon

Denne oversikten viser Default, Hover og Active states til Surface og Base fargene via interaksjon. Teksten brukerContrast 1 fargen.

Light

Tekst

Dark

Tekst

Contrast

Tekst

Kontrastfarger mot Base

Contrast 1 skal ha minst 4.5:1 kontrast motBase active.
Contrast 2 skal ha minst 4.5:1 kontrast motBase default.
Contrast 2 skal ha minst 3:1 kontrast motBase active.

Base: #0062BA

Light

Contrast 1

6.1:1

Contrast 2

4.9:1

Contrast 1

8.1:1

Contrast 2

6.5:1

Contrast 1

10.9:1

Contrast 2

8.8:1

Dark

Contrast 1

6.2:1

Contrast 2

5.3:1

Contrast 1

4.7:1

Contrast 2

4.0:1

Contrast 1

3.5:1

Contrast 2

3.0:1

Contrast

Contrast 1

6.2:1

Contrast 2

5.3:1

Contrast 1

4.7:1

Contrast 2

4.0:1

Contrast 1

3.5:1

Contrast 2

3.0:1

Base: #0062BA

Light

Contrast 1

6.9:1

Contrast 2

6.7:1

Contrast 1

5.2:1

Contrast 2

5.1:1

Contrast 1

3.9:1

Contrast 2

3.8:1

Dark

Contrast 1

6.6:1

Contrast 2

6.4:1

Contrast 1

9.0:1

Contrast 2

8.7:1

Contrast 1

11.8:1

Contrast 2

11.5:1

Contrast

Contrast 1

6.6:1

Contrast 2

6.4:1

Contrast 1

9.0:1

Contrast 2

8.7:1

Contrast 1

11.8:1

Contrast 2

11.5:1

Base: #0062BA

Light

Contrast 1

10.1:1

Contrast 2

7.7:1

Contrast 1

7.8:1

Contrast 2

5.9:1

Contrast 1

6.0:1

Contrast 2

4.5:1

Dark

Contrast 1

10.4:1

Contrast 2

7.4:1

Contrast 1

7.8:1

Contrast 2

5.5:1

Contrast 1

5.8:1

Contrast 2

4.1:1

Contrast

Contrast 1

10.4:1

Contrast 2

7.4:1

Contrast 1

7.8:1

Contrast 2

5.5:1

Contrast 1

5.8:1

Contrast 2

4.1:1

Base: #0062BA

Light

Contrast 1

15.5:1

Contrast 2

7.4:1

Contrast 1

12.4:1

Contrast 2

5.9:1

Contrast 1

9.8:1

Contrast 2

4.7:1

Dark

Contrast 1

16.4:1

Contrast 2

7.6:1

Contrast 1

13.2:1

Contrast 2

6.1:1

Contrast 1

10.1:1

Contrast 2

4.7:1

Contrast

Contrast 1

16.4:1

Contrast 2

7.6:1

Contrast 1

13.2:1

Contrast 2

6.1:1

Contrast 1

10.1:1

Contrast 2

4.7:1

Base: #0062BA

Light

Contrast 1

4.8:1

Contrast 2

4.5:1

Contrast 1

6.5:1

Contrast 2

6.1:1

Contrast 1

8.7:1

Contrast 2

8.2:1

Dark

Contrast 1

5.0:1

Contrast 2

4.8:1

Contrast 1

3.8:1

Contrast 2

3.6:1

Contrast 1

2.8:1

Contrast 2

2.7:1

Contrast

Contrast 1

5.0:1

Contrast 2

4.8:1

Contrast 1

3.8:1

Contrast 2

3.6:1

Contrast 1

2.8:1

Contrast 2

2.7:1

Base: #0062BA

Light

Contrast 1

6.7:1

Contrast 2

6.7:1

Contrast 1

5.0:1

Contrast 2

5.0:1

Contrast 1

3.8:1

Contrast 2

3.8:1

Dark

Contrast 1

6.5:1

Contrast 2

6.4:1

Contrast 1

8.7:1

Contrast 2

8.6:1

Contrast 1

11.6:1

Contrast 2

11.5:1

Contrast

Contrast 1

6.5:1

Contrast 2

6.4:1

Contrast 1

8.7:1

Contrast 2

8.6:1

Contrast 1

11.6:1

Contrast 2

11.5:1

Base: #0062BA

Light

Contrast 1

10.9:1

Contrast 2

7.5:1

Contrast 1

8.1:1

Contrast 2

5.6:1

Contrast 1

6.0:1

Contrast 2

4.1:1

Dark

Contrast 1

9.1:1

Contrast 2

7.5:1

Contrast 1

7.0:1

Contrast 2

5.7:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Contrast

Contrast 1

9.1:1

Contrast 2

7.5:1

Contrast 1

7.0:1

Contrast 2

5.7:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Base: #0062BA

Light

Contrast 1

14.8:1

Contrast 2

7.4:1

Contrast 1

12.0:1

Contrast 2

6.0:1

Contrast 1

9.5:1

Contrast 2

4.7:1

Dark

Contrast 1

16.0:1

Contrast 2

7.6:1

Contrast 1

12.7:1

Contrast 2

6.0:1

Contrast 1

9.8:1

Contrast 2

4.6:1

Contrast

Contrast 1

16.0:1

Contrast 2

7.6:1

Contrast 1

12.7:1

Contrast 2

6.0:1

Contrast 1

9.8:1

Contrast 2

4.6:1

Base: #0062BA

Light

Contrast 1

14.7:1

Contrast 2

7.7:1

Contrast 1

11.5:1

Contrast 2

6.0:1

Contrast 1

8.7:1

Contrast 2

4.5:1

Dark

Contrast 1

9.1:1

Contrast 2

7.5:1

Contrast 1

7.1:1

Contrast 2

5.8:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Contrast

Contrast 1

9.1:1

Contrast 2

7.5:1

Contrast 1

7.1:1

Contrast 2

5.8:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Base: #0062BA

Light

Contrast 1

4.6:1

Contrast 2

4.6:1

Contrast 1

3.5:1

Contrast 2

3.5:1

Contrast 1

2.6:1

Contrast 2

2.6:1

Dark

Contrast 1

4.7:1

Contrast 2

4.7:1

Contrast 1

3.5:1

Contrast 2

3.5:1

Contrast 1

2.6:1

Contrast 2

2.6:1

Contrast

Contrast 1

4.7:1

Contrast 2

4.7:1

Contrast 1

3.5:1

Contrast 2

3.5:1

Contrast 1

2.6:1

Contrast 2

2.6:1

Base: #0062BA

Light

Contrast 1

6.4:1

Contrast 2

5.3:1

Contrast 1

4.8:1

Contrast 2

4.0:1

Contrast 1

3.6:1

Contrast 2

3.0:1

Dark

Contrast 1

6.3:1

Contrast 2

5.0:1

Contrast 1

8.5:1

Contrast 2

6.8:1

Contrast 1

11.3:1

Contrast 2

8.9:1

Contrast

Contrast 1

6.3:1

Contrast 2

5.0:1

Contrast 1

8.5:1

Contrast 2

6.8:1

Contrast 1

11.3:1

Contrast 2

8.9:1

Base: #0062BA

Light

Contrast 1

13.2:1

Contrast 2

7.8:1

Contrast 1

10.2:1

Contrast 2

6.0:1

Contrast 1

7.6:1

Contrast 2

4.4:1

Dark

Contrast 1

9.1:1

Contrast 2

7.4:1

Contrast 1

7.0:1

Contrast 2

5.8:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Contrast

Contrast 1

9.1:1

Contrast 2

7.4:1

Contrast 1

7.0:1

Contrast 2

5.8:1

Contrast 1

5.4:1

Contrast 2

4.4:1

Global BLue

Light

Contrast 1

5.1:1

Contrast 2

4.7:1

Contrast 1

6.7:1

Contrast 2

6.3:1

Contrast 1

9.0:1

Contrast 2

8.4:1

Dark

Contrast 1

5.2:1

Contrast 2

4.9:1

Contrast 1

3.9:1

Contrast 2

3.7:1

Contrast 1

2.9:1

Contrast 2

2.7:1

Contrast

Contrast 1

5.2:1

Contrast 2

4.9:1

Contrast 1

3.9:1

Contrast 2

3.7:1

Contrast 1

2.9:1

Contrast 2

2.7:1

Global Green

Light

Contrast 1

4.7:1

Contrast 2

4.5:1

Contrast 1

6.2:1

Contrast 2

6.0:1

Contrast 1

8.5:1

Contrast 2

8.2:1

Dark

Contrast 1

4.8:1

Contrast 2

4.7:1

Contrast 1

3.6:1

Contrast 2

3.5:1

Contrast 1

2.7:1

Contrast 2

2.6:1

Contrast

Contrast 1

4.8:1

Contrast 2

4.7:1

Contrast 1

3.6:1

Contrast 2

3.5:1

Contrast 1

2.7:1

Contrast 2

2.6:1

Global Orange

Light

Contrast 1

4.7:1

Contrast 2

4.6:1

Contrast 1

6.3:1

Contrast 2

6.1:1

Contrast 1

8.4:1

Contrast 2

8.2:1

Dark

Contrast 1

4.8:1

Contrast 2

4.7:1

Contrast 1

3.6:1

Contrast 2

3.5:1

Contrast 1

2.7:1

Contrast 2

2.6:1

Contrast

Contrast 1

4.8:1

Contrast 2

4.7:1

Contrast 1

3.6:1

Contrast 2

3.5:1

Contrast 1

2.7:1

Contrast 2

2.6:1

Global Red

Light

Contrast 1

6.2:1

Contrast 2

4.8:1

Contrast 1

8.4:1

Contrast 2

6.6:1

Contrast 1

11.2:1

Contrast 2

8.8:1

Dark

Contrast 1

6.3:1

Contrast 2

5.3:1

Contrast 1

4.8:1

Contrast 2

4.0:1

Contrast 1

3.6:1

Contrast 2

3.0:1

Contrast

Contrast 1

6.3:1

Contrast 2

5.3:1

Contrast 1

4.8:1

Contrast 2

4.0:1

Contrast 1

3.6:1

Contrast 2

3.0:1

Global Purple

Light

Contrast 1

8.5:1

Contrast 2

7.0:1

Contrast 1

11.1:1

Contrast 2

9.2:1

Contrast 1

14.5:1

Contrast 2

12.0:1

Dark

Contrast 1

8.3:1

Contrast 2

7.1:1

Contrast 1

6.4:1

Contrast 2

5.6:1

Contrast 1

4.9:1

Contrast 2

4.2:1

Contrast

Contrast 1

8.3:1

Contrast 2

7.1:1

Contrast 1

6.4:1

Contrast 2

5.6:1

Contrast 1

4.9:1

Contrast 2

4.2:1

Global Yellow

Light

Contrast 1

12.0:1

Contrast 2

7.7:1

Contrast 1

9.5:1

Contrast 2

6.1:1

Contrast 1

7.3:1

Contrast 2

4.7:1

Dark

Contrast 1

12.8:1

Contrast 2

7.7:1

Contrast 1

9.7:1

Contrast 2

5.8:1

Contrast 1

7.2:1

Contrast 2

4.4:1

Contrast

Contrast 1

12.8:1

Contrast 2

7.7:1

Contrast 1

9.7:1

Contrast 2

5.8:1

Contrast 1

7.2:1

Contrast 2

4.4:1

Background og Surface mot Border og Tekst

Border strong ogText default skal ha minst 4.5:1 kontrast motSurface active.
Text subtle skal ha minst 4.5:1 kontrast motSurface default.
Border default skal ha minst 3:1 kontrast motBackground subtle.
Border subtle skal ha minst 3:1 kontrast motSurface active i contrast mode.
Border default skal ha minst 4.5:1 kontrast motSurface active i contrast mode.

Light

Background default

Border subtle

1.9:1

Border default

3.9:1

Border strong

8.4:1

Text subtle

6.0:1

Text default

14.0:1

Background subtle

Border subtle

1.7:1

Border default

3.5:1

Border strong

7.6:1

Text subtle

5.4:1

Text default

12.7:1

Surface default

Border subtle

1.5:1

Border default

3.0:1

Border strong

6.6:1

Text subtle

4.7:1

Text default

11.0:1

Surface hover

Border subtle

1.3:1

Border default

2.6:1

Border strong

5.6:1

Text subtle

4.0:1

Text default

9.3:1

Surface active

Border subtle

1.1:1

Border default

2.2:1

Border strong

4.7:1

Text subtle

3.3:1

Text default

7.8:1

Dark

Background default

Border subtle

2.2:1

Border default

3.5:1

Border strong

9.2:1

Text subtle

6.8:1

Text default

13.4:1

Background subtle

Border subtle

2.0:1

Border default

3.2:1

Border strong

8.4:1

Text subtle

6.2:1

Text default

12.2:1

Surface default

Border subtle

1.7:1

Border default

2.6:1

Border strong

7.1:1

Text subtle

5.2:1

Text default

10.2:1

Surface hover

Border subtle

1.4:1

Border default

2.2:1

Border strong

5.8:1

Text subtle

4.3:1

Text default

8.5:1

Surface active

Border subtle

1.1:1

Border default

1.8:1

Border strong

4.7:1

Text subtle

3.5:1

Text default

6.8:1

Contrast

Background default

Border subtle

6.1:1

Border default

8.9:1

Border strong

12.7:1

Text subtle

12.0:1

Text default

18.0:1

Background subtle

Border subtle

5.5:1

Border default

8.1:1

Border strong

11.5:1

Text subtle

10.9:1

Text default

16.3:1

Surface default

Border subtle

4.6:1

Border default

6.8:1

Border strong

9.7:1

Text subtle

9.2:1

Text default

13.7:1

Surface hover

Border subtle

3.9:1

Border default

5.7:1

Border strong

8.1:1

Text subtle

7.7:1

Text default

11.5:1

Surface active

Border subtle

3.2:1

Border default

4.7:1

Border strong

6.7:1

Text subtle

6.4:1

Text default

9.6:1