Her på Nordic Custom Made bruger vi mange farver. Jeg elsker farver. Og vi har flere kunder der har mange farver i deres designmanual. Det er sjovt og spændende at arbejde med – men også udfordrende.
Hvis du er en offentlig virksomhed, så er det et krav at din hjemmeside er tilgængelig – og et af tilgængelighedspunkterne handler om kontraster. Og selv hvis det ikke er en offentlig hjemmeside, så er det bare god stil at have styr på kontrasterne. Det sætter både dine besøgende og google pris på 😉
Men hvordan sikrer jeg så, at de farver jeg benytter ikke giver problemer med tilgængeligheden?
I sidste uge deltog jeg i en 24 timers online konference om tilgængelighed med virkelig mange spændende oplæg. Og her blev jeg introduceret til et mega lækkert værktøj.
Vi har til de af vore kunder som fokuserede på tilgængelighed, altid lavet et skema over deres farver og hvilke de må benytte sammen:
Det plejer at tage lidt tid at teste farver og sætte op – men med det nye værktøj, så tager det 5 minutter – og det er SÅ nemt. På siden: “https://contrast-grid.eightshapes.com/” indtaster du bare dine farverkoder i boksen og vupti, så har du et skema over hvilke farver der må benyttes samme.
Her er vores skema:
Background
Text
|
#F3F3EB
|
#EEE7DC
|
#A39888
|
#E3BD94
|
#C58843
|
#523C24
|
#A16262
|
#7D3C3C
|
#C0CDC7
|
#8E9D8A
|
#5B8695
|
#1B5A6F
|
#233147
|
#151515
|
#464E4E
|
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
#F3F3EB
|
Text
DNP
1.1
|
Text
DNP
2.5
|
Text
DNP
1.5
|
Text
DNP
2.7
|
Text
AAA
9.2
|
Text
AA18
4.2
|
Text
AAA
7.2
|
Text
DNP
1.4
|
Text
DNP
2.5
|
Text
AA18
3.5
|
Text
AA
6.8
|
Text
AAA
11.7
|
Text
AAA
16.3
|
Text
AAA
7.6
|
|
#EEE7DC
|
Text
DNP
1.1
|
Text
DNP
2.3
|
Text
DNP
1.4
|
Text
DNP
2.4
|
Text
AAA
8.4
|
Text
AA18
3.8
|
Text
AA
6.6
|
Text
DNP
1.3
|
Text
DNP
2.3
|
Text
AA18
3.2
|
Text
AA
6.2
|
Text
AAA
10
|
Text
AAA
14.8
|
Text
AA
6.9
|
|
#A39888
|
Text
DNP
2.5
|
Text
DNP
2.3
|
Text
DNP
1.6
|
Text
DNP
1
|
Text
AA18
3.6
|
Text
DNP
1.6
|
Text
DNP
2.8
|
Text
DNP
1.7
|
Text
DNP
1
|
Text
DNP
1.4
|
Text
DNP
2.7
|
Text
AA
4.6
|
Text
AA
6.4
|
Text
AA18
3
|
|
#E3BD94
|
Text
DNP
1.5
|
Text
DNP
1.4
|
Text
DNP
1.6
|
Text
DNP
1.7
|
Text
AA
5.9
|
Text
DNP
2.7
|
Text
AA
4.6
|
Text
DNP
1
|
Text
DNP
1.6
|
Text
DNP
2.2
|
Text
AA18
4.3
|
Text
AAA
7.4
|
Text
AAA
10
|
Text
AA
4.8
|
|
#C58843
|
Text
DNP
2.7
|
Text
DNP
2.4
|
Text
DNP
1
|
Text
DNP
1.7
|
Text
AA18
3.4
|
Text
DNP
1.5
|
Text
DNP
2.7
|
Text
DNP
1.8
|
Text
DNP
1
|
Text
DNP
1.3
|
Text
DNP
2.5
|
Text
AA18
4.3
|
Text
AA
6
|
Text
DNP
2.8
|
|
#523C24
|
Text
AAA
9.2
|
Text
AAA
8.4
|
Text
AA18
3.6
|
Text
AA
5.9
|
Text
AA18
3.4
|
Text
DNP
2.1
|
Text
DNP
1.2
|
Text
AA
6.3
|
Text
AA18
3.6
|
Text
DNP
2.6
|
Text
DNP
1.3
|
Text
DNP
1.2
|
Text
DNP
1.7
|
Text
DNP
1.2
|
|
#A16262
|
Text
AA18
4.2
|
Text
AA18
3.8
|
Text
DNP
1.6
|
Text
DNP
2.7
|
Text
DNP
1.5
|
Text
DNP
2.1
|
Text
DNP
1.7
|
Text
DNP
2.8
|
Text
DNP
1.6
|
Text
DNP
1.1
|
Text
DNP
1.6
|
Text
DNP
2.7
|
Text
AA18
3.8
|
Text
DNP
1.8
|
|
#7D3C3C
|
Text
AAA
7.2
|
Text
AA
6.6
|
Text
DNP
2.8
|
Text
AA
4.6
|
Text
DNP
2.7
|
Text
DNP
1.2
|
Text
DNP
1.7
|
Text
AA
4.9
|
Text
DNP
2.8
|
Text
DNP
2
|
Text
DNP
1
|
Text
DNP
1.6
|
Text
DNP
2.2
|
Text
DNP
1
|
|
#C0CDC7
|
Text
DNP
1.4
|
Text
DNP
1.3
|
Text
DNP
1.7
|
Text
DNP
1
|
Text
DNP
1.8
|
Text
AA
6.3
|
Text
DNP
2.8
|
Text
AA
4.9
|
Text
DNP
1.7
|
Text
DNP
2.4
|
Text
AA
4.6
|
Text
AAA
7.9
|
Text
AAA
11.1
|
Text
AA
5.2
|
|
#8E9D8A
|
Text
DNP
2.5
|
Text
DNP
2.3
|
Text
DNP
1
|
Text
DNP
1.6
|
Text
DNP
1
|
Text
AA18
3.6
|
Text
DNP
1.6
|
Text
DNP
2.8
|
Text
DNP
1.7
|
Text
DNP
1.3
|
Text
DNP
2.6
|
Text
AA
4.5
|
Text
AA
6.3
|
Text
DNP
2.9
|
|
#5B8695
|
Text
AA18
3.5
|
Text
AA18
3.2
|
Text
DNP
1.4
|
Text
DNP
2.2
|
Text
DNP
1.3
|
Text
DNP
2.6
|
Text
DNP
1.1
|
Text
DNP
2
|
Text
DNP
2.4
|
Text
DNP
1.3
|
Text
DNP
1.9
|
Text
AA18
3.3
|
Text
AA
4.6
|
Text
DNP
2.1
|
|
#1B5A6F
|
Text
AA
6.8
|
Text
AA
6.2
|
Text
DNP
2.7
|
Text
AA18
4.3
|
Text
DNP
2.5
|
Text
DNP
1.3
|
Text
DNP
1.6
|
Text
DNP
1
|
Text
AA
4.6
|
Text
DNP
2.6
|
Text
DNP
1.9
|
Text
DNP
1.7
|
Text
DNP
2.3
|
Text
DNP
1.1
|
|
#233147
|
Text
AAA
11.7
|
Text
AAA
10
|
Text
AA
4.6
|
Text
AAA
7.4
|
Text
AA18
4.3
|
Text
DNP
1.2
|
Text
DNP
2.7
|
Text
DNP
1.6
|
Text
AAA
7.9
|
Text
AA
4.5
|
Text
AA18
3.3
|
Text
DNP
1.7
|
Text
DNP
1.3
|
Text
DNP
1.5
|
|
#151515
|
Text
AAA
16.3
|
Text
AAA
14.8
|
Text
AA
6.4
|
Text
AAA
10
|
Text
AA
6
|
Text
DNP
1.7
|
Text
AA18
3.8
|
Text
DNP
2.2
|
Text
AAA
11.1
|
Text
AA
6.3
|
Text
AA
4.6
|
Text
DNP
2.3
|
Text
DNP
1.3
|
Text
DNP
2.1
|
|
#464E4E
|
Text
AAA
7.6
|
Text
AA
6.9
|
Text
AA18
3
|
Text
AA
4.8
|
Text
DNP
2.8
|
Text
DNP
1.2
|
Text
DNP
1.8
|
Text
DNP
1
|
Text
AA
5.2
|
Text
DNP
2.9
|
Text
DNP
2.1
|
Text
DNP
1.1
|
Text
DNP
1.5
|
Text
DNP
2.1
|
|
AAA Pass, AAA (7+)
AA Pass, AA (4.5+)
AA18 Pass, Large Text Only (3+)
DNP Does Not Pass
|
Offentlige virksomheder skal min. sikre kontrast på AA-niveau.
Husk at det godt kan være du synes cremefarvet tekst på lyserød baggrund er flot, men der er rigtig mange, der har udfordringer med at læse det, så sørg for at dine kontraster er i orden og få flere glade læsere 😉