Husk kontrasten

Farver er vigtige for det at sende det rigtige udtryk. Men det er også vigtigt at farverne ikke bliver vigtigere end tilgængeligheden.

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
About WCAG 2.0 contrast

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 😉

Hvad søger du efter?

WordPress Sikkerhed