Kleurenpaletten met hoog contrast, ratio's gecontroleerd
Kleurenpaletten met hoog contrast
Kleurenpaletten met hoog contrast en WCAG-ratio's | We.Inc
Vijf originele kleurenpaletten met hoog contrast, elk tekst- en knoppaar getoetst aan WCAG 2.2, plus een tester om kleuren aan te passen en CSS te kopiëren.
Een palet met hoog contrast is een set merkkleuren waarbij tekst goed leesbaar blijft op de achtergrond. WCAG 2.2 drukt dit uit als een ratio van 1:1 tot 21:1. Lopende tekst heeft minstens 4.5:1 nodig voor niveau AA en 7:1 voor AAA; grote tekst heeft 3:1 en 4.5:1 nodig. De paletten hier tonen elk paar.
Minimale contrastwaarden volgens WCAG 2.2
Inhoud
Niveau AA
Niveau AAA
Lopende tekst
Grote tekst (18pt, of 14pt vet)
Iconen, invoerranden, focusringen
Geen extra niveau
Logo's en pure decoratie
Geen eis
Geen eis
De meeste paletsites tonen mooie kleurstalen naast elkaar, maar dat zegt niets over de vraag of tekst erop leesbaar is. Elk palet hieronder geeft een kleur een taak (achtergrond, tekst, secundaire tekst, accent, tekst op het accent) en controleert de paren die u echt samen op een pagina zou gebruiken.
Elke kleur wordt omgerekend naar relatieve luminantie: hoe licht hij oogt, van 0 voor zwart tot 1 voor wit.
De lichtere waarde plus 0.05 wordt gedeeld door de donkerdere waarde plus 0.05. Dat getal is de contrastratio.
De ratio wordt zonder afronding vergeleken met het WCAG-minimum voor dat soort inhoud.
Een paar telt alleen als u het zo gebruikt: secundaire tekst wordt getoetst op de achtergrond, knoptekst op het accent.
Kies eerst de tekstkleur en dan het accent. Lopende tekst is het grootste deel van wat mensen lezen.
Op een donkere achtergrond heeft een fel accent meestal donkere tekst nodig, geen witte.
Houd één grijs aan voor secundaire tekst en controleer het op elke achtergrond die u gebruikt, ook kaarten.
Als puur wit op puur zwart te hard aanvoelt, haalt een bijna-zwart op gebroken wit nog ruim 7:1.
Controleer opnieuw wanneer u een nieuwe vlakkleur toevoegt, zoals een getinte banner of footer.
Veelgestelde vragen
Welke contrastratio geldt als hoog contrast?
Er bestaat geen officiële grens die hoog contrast heet. WCAG-niveau AA vraagt 4.5:1 voor normale tekst en niveau AAA vraagt 7:1, dus veel ontwerpers hanteren 7:1 voor lopende tekst als doel voor hoog contrast.
Welke grootte geldt als grote tekst?
WCAG beschouwt tekst van minstens 18 punt, of 14 punt vet, als groot. De uitleg van het W3C komt daarmee uit op ongeveer 24px en 18.5px in CSS-pixels.
Mag ik 4.47 afronden naar 4.5?
Nee. Volgens het W3C wordt de ratio niet afgerond, dus een paar met 4.499:1 haalt 4.5:1 niet. Daarom kapt de tester waarden af.
Hebben knoppen en iconen ook contrast nodig?
Ja. WCAG 2.2 succescriterium 1.4.11 vraagt minstens 3:1 tussen onderdelen van bedieningselementen en betekenisvolle afbeeldingen en de kleuren ernaast.
Moet mijn logo voldoen?
Nee. Tekst die deel uitmaakt van een logo of merknaam heeft onder 1.4.3 geen contrasteis. Al het andere op de pagina eromheen wel.
Waarom vijf rollen en niet vijf kleurstalen
Een palet van vijf kleuren heeft tien mogelijke paren, en de meeste komen op een echte pagina nooit samen. Door elke kleur een rol te geven, weet u welke paren ertoe doen, zodat u vier combinaties test in plaats van te gokken.
De rol die het vaakst faalt is secundaire tekst: het lichte grijs voor datums, bijschriften en voetnoten. Het is ook de tekst waar mensen het meest bij turen.
Een palet aanpassen aan uw merk
Houd uw merkkleur als accent en pas de helderheid aan tot de knoptekst voldoet. Een tint donkerder of lichter behoudt meestal het merkgevoel en lost de ratio op.
Is uw merkkleur lichtgeel of lichtblauw, gebruik hem dan voor achtergronden en grote vlakken, en kies een donkere partner voor alles wat mensen moeten lezen.
De vijf paletten en hun ratio's
Ratio's zijn berekend met de WCAG 2.2-formule en afgekapt op twee decimalen.
Elk gecontroleerd paar in de vijf paletten
Palet
Paar
Ratio
Lopende tekst
AAA lopende tekst
Inkt op papier
Lopende tekst #111827 op Achtergrond #FFFFFF
AA
Inkt op papier
Secundaire tekst #4B5563 op Achtergrond #FFFFFF
AA
Inkt op papier
Accent en knoppen #1D4ED8 op Achtergrond #FFFFFF
AA
Nee
Inkt op papier
Tekst op het accent #FFFFFF op Accent en knoppen #1D4ED8
AA
Nee
Nachtdienst
Lopende tekst #F8FAFC op Achtergrond #0B1220
AA
Nachtdienst
Secundaire tekst #CBD5E1 op Achtergrond #0B1220
AA
Nachtdienst
Accent en knoppen #FBBF24 op Achtergrond #0B1220
AA
Nachtdienst
Tekst op het accent #0B1220 op Accent en knoppen #FBBF24
AA
Bosgrootboek
Lopende tekst #1B3A2A op Achtergrond #F7F5EF
AA
Bosgrootboek
Secundaire tekst #44403C op Achtergrond #F7F5EF
AA
Bosgrootboek
Accent en knoppen #9A3412 op Achtergrond #F7F5EF
AA
Nee
Bosgrootboek
Tekst op het accent #FFFFFF op Accent en knoppen #9A3412
AA
Havenblauw
Lopende tekst #FFFFFF op Achtergrond #0F2E4C
AA
Havenblauw
Secundaire tekst #D6E4F0 op Achtergrond #0F2E4C
AA
Havenblauw
Accent en knoppen #7DD3FC op Achtergrond #0F2E4C
AA
Havenblauw
Tekst op het accent #0F2E4C op Accent en knoppen #7DD3FC
AA
Warme klei
Lopende tekst #431407 op Achtergrond #FFF7ED
AA
Warme klei
Secundaire tekst #57534E op Achtergrond #FFF7ED
AA
Warme klei
Accent en knoppen #B91C1C op Achtergrond #FFF7ED
AA
Nee
Warme klei
Tekst op het accent #FFFFFF op Accent en knoppen #B91C1C
AA
Nee
Een palet gebruiken in uw CSS
Inkt op papier als CSS custom properties
Geef variabelen een naam naar hun rol, niet naar hun kleur, zodat een ander palet later één aanpassing per regel is.
De contrastformule in JavaScript
Dezelfde berekening die de tester uitvoert, geschreven op basis van de W3C-definitie van relatieve luminantie.
Palettester
Kies een palet en wijzig daarna een willekeurige kleur. Elk paar wordt opnieuw gecontroleerd terwijl u typt.
Startpalet
Inkt op papier
Nachtdienst
Bosgrootboek
Havenblauw
Warme klei
Achtergrond
Lopende tekst
Secundaire tekst
Tekst op het accent
Contrast van elk paar in dit palet
Paar
Ratio
AA lopende tekst
AA grote tekst
AAA lopende tekst
{a} op {b}
Voldoet
Voldoet niet
Geen hexkleur
Openingstijden
Open van dinsdag tot zaterdag, 9 tot 5. Binnenlopen kan tot de middag.
Gesloten op feestdagen.
Plan een bezoek
CSS-variabelen kopiëren
Gekopieerd.
Kopiëren mislukt. Selecteer de code en kopieer hem handmatig.
Alle {n} paren halen AA voor lopende tekst.
{k} van de {n} paren halen 4.5:1 voor lopende tekst niet.