november 7, 2022

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 😉