Color Sample
Community
Toont een voorbeeld van een kleur.
Definition of Done
Implementaties
Community Utrecht
11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord
Component gebruiken?
Acceptatiecriteria
Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.
Als je implementatie voldoet aan de acceptatiecriteria voor dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).
Toegankelijkheid algemeen
De eigenschappen van de Color Sample staan in tekst
Gebruik geen afbeelding om de eigenschappen van een kleurvlak weer te geven, maar gebruik hiervoor tekst. Dan schaalt de tekst goed mee als de gebruiker inzoomt en blijft deze leesbaar.
NL Design System richtlijnen:
Toegankelijkheid visueel ontwerp
Het kleurcontrast van de tekst van de eigenschappen van de Color Sample is voldoende
Het contrast van de tekstkleur ten opzichte van de achtergrondkleur moet hoog genoeg zijn, zodat de tekst in het algemeen goed leesbaar wordt gevonden.
De criteria voor kleurcontrast zijn:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Tekst die over een afbeelding staat, moet ook voldoende contrast hebben met de kleuren in de afbeelding er omheen.
Deze eis geldt niet voor tekst op een logo of van een merknaam, of tekst op een afbeelding die alleen ter decoratie dient en geen deel uitmaakt van de inhoud.
Het kleurvlak is duidelijk te onderscheiden ten opzichte van de achtergrond
Geef het kleurvlak (of een kader rond het kleurvlak) een kleurcontrast met de achtergrond van minimaal 3:1. Dit is te controleren met de Contrast checker.
Zorg ervoor dat het vlak visueel goed te onderscheiden is als kleurvlak.
NL Design System richtlijnen:
Toegankelijkheid zoom en herschalen
Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar
Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
NL Design System richtlijnen:
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar
- WCAG
- 1.4.12 Tekstafstand
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Je moet de afstand kunnen vergroten naar deze waardes:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
- Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
<style>
body * {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
body p {
margin-bottom: 2em !important;
}
</style>
NL Design System richtlijnen:
Toegankelijkheid screenreader
De eigenschappen van de kleur in de Color Sample zijn in tekst beschreven
Vertel in tekst welke kleur wordt weergegeven. Denk hierbij bijvoorbeeld de naam van de kleur, de hex-code of de hsl-waarde, de transparantie, het doel van de kleur, de CSS-class.
Dan is het voor screenreadergebruikers en mensen die slechtziend of kleurenblind zijn ook duidelijk welke kleur bedoeld wordt.
Gerelateerde NL Design System richtlijnen:
Het kleurvlak en de bijbehorende eigenschappen horen semantisch bij elkaar
Een screenreadergebruiker kan herkennen welk kleurvlak bij welke eigenschappen hoort. Dit is niet alleen via de visuele informatie beschikbaar, maar ook vanuit de semantiek van de HTML-code.
Dit kan bijvoorbeeld door het weergeven van het kleurvlak en de data in een tabel <table>, een description list <dl> of in een ongenummerde lijst <ul>.
Een screenreadergebruiker kan uit de leesvolgorde herkennen welk kleurvlak bij welke eigenschappen hoort
Een screenreadergebruiker kan herkennen welke kleurvlakken bij welke eigenschappen horen als de gebruiker van boven naar beneden de webpagina doorleest. De connectie tussen kleurvlak en eigenschappen is niet alleen via de visuele informatie beschikbaar, maar ook in de volgorde van de HTML-code in de DOM.
Gerelateerde NL Design System richtlijnen
Help component verbeteren
We vinden het belangrijk dat de component Color Sample goed te gebruiken is door iedereen. Help je mee?
- Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
- Draag bij aan de voortang van Color Sample door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.