Kleurkiezer & contrastchecker

Zo gebruik je de Kleurkiezer & contrastchecker

Wat het berekent en wanneer je het gebruikt

Kiest en converteert kleuren tussen HEX, RGB, HSL, HSV en CMYK, stelt lichtere en donkere tinten en bijpassende kleuren voor en controleert het tekstcontrast volgens de WCAG-richtlijnen voor toegankelijkheid.

Zo gebruik je het, stap voor stap

1. Kies een kleur met de kleurkiezer of typ hem als HEX, RGB, HSL of kleurnaam.
2. Kies een achtergrondkleur om het contrast te controleren.
3. Kopieer elk formaat met één klik.
4. Gebruik de lichtere en donkere tinten en bijpassende kleuren voor een palet.

Wat elk invoerveld betekent

• Kleur – Begint op #2443C8, SmartCalcy-blauw.
• Achtergrond – Begint op wit.

Zo lees je de resultaten

• Contrastverhouding – Van 1:1 tot 21:1, met AA- en AAA-resultaten voor normale en grote tekst.
• Formaten – HEX, RGB, HSL, HSV en CMYK.
• Lichtere en donkere tinten – Lichtere en donkerdere versies.
• Bijpassende kleuren – Complementair, analoog en triadisch.

De formule

Contrastverhouding = (L1 + 0,05) ÷ (L2 + 0,05), waarbij L1 en L2 de relatieve luminantie van de lichtere en de donkerdere kleur zijn. WCAG AA vraagt 4,5:1 voor normale tekst en 3:1 voor grote tekst; AAA vraagt 7:1 en 4,5:1.

Een rekenvoorbeeld

Met de startkleuren heeft #2443C8 op wit een contrastverhouding van 7,74:1, wat voldoet aan AAA voor alle tekstgroottes.

Aannames en beperkingen

• CMYK-waarden zijn een eenvoudige omrekening, geen kleurbeheerd drukprofiel.
• Contrastresultaten volgen de WCAG 2-formule.

Veelgemaakte fouten

• Het contrast alleen controleren op grote tekst en de kleur dan voor kleine tekst gebruiken.
• Alleen op kleur vertrouwen om betekenis over te brengen.

Veelgestelde vragen

Gerelateerde tools