Ga naar hoofdinhoud

Color Sample

Color Sample

Candidate

Toont een voorbeeld van een kleur.

Anatomie

Candidate component gebruiken

Design tokens

name type
nl.color-sample.background-color color
nl.color-sample.block-size dimension
nl.color-sample.border-color color
nl.color-sample.border-radius dimension
nl.color-sample.border-width dimension
nl.color-sample.inline-size dimension

CSS

De CSS van deze component is gepubliceerd in een npm package:

@nl-design-system-candidate/color-sample-css versie 1.

Gebruik de nl-color-sample class name op een svg element:

<svg role="img" xmlns="http://www.w3.org/2000/svg" class="nl-color-sample" style="color: deeppink;">
  <path d="M0 0H32V32H0Z" fill="currentcolor" />
</svg>

Zorg dat je een duidelijke beschrijving naast de Color Sample hebt en gebruik wanneer de Color Sample en beschrijving niet direct bij elkaar staan dat je ze goed aan elkaar linkt. Bijvoorbeeld door er een figure omheen te zetten:

<h1>Huisstijlkleuren</h1>
<figure>
  <ColorSample value="deeppink" aria-labelledby="kleur-1" />
  <figcaption id="kleur-1">Roze</figcaption>
</figure>

Je kunt de CSS zo in je project installeren:

npm install --save-dev @nl-design-system-candidate/color-sample-css

Als je een CDN gebruikt, dan kun je de CSS zo importeren:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@nl-design-system-candidate/color-sample-css@1/dist/color-sample.css"
/>

Gebruik je geen CDN, dan kun je de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@nl-design-system-candidate/color-sample-css/dist/color-sample.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@nl-design-system-candidate/color-sample-css/color-sample.css";

React

De React component is gepubliceerd in een npm package:

@nl-design-system-candidate/color-sample-react versie 1.

Je kunt de npm package zo installeren:

npm install --save-dev @nl-design-system-candidate/color-sample-react

Je kunt de React component zo gebruiken:

import { ColorSample } from "@nl-design-system-candidate/color-sample-react";


export const MyPage = () => {
  return (
    <html>
      <body>
        <ColorSample value="deeppink" />
      </body>
    </html>
  );
};

Zorg dat je een duidelijke beschrijving naast de Color Sample hebt en gebruik wanneer de Color Sample en beschrijving niet direct bij elkaar staan een id op de beschrijving die je met aria-labelledby koppelt aan de ColorSample:

export const MyPage = () => {
  return (
    <html>
      <body>
        <figure>
          <ColorSample value="deeppink"/>
          <figcaption>
            Roze
          </figcaption>
      </body>
    </html>
  );
};

Figma

De Figma component staat in NL Design System Voorbeeld Bibliotheek — Color Sample.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Ik ben:
Alle onderwerpen worden getoond.
  • 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 gebruikers van screenreaders en mensen die slechtziend of kleurenblind zijn ook duidelijk welke kleur bedoeld wordt.

    Gerelateerde NL Design System richtlijnen:

    contentmakerdesignerWCAG 1.1.1Niveau A
  • Het kleurvlak en de bijbehorende eigenschappen horen semantisch bij elkaar.

    Een gebruiker van een screenreader 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>.

    contentmakerdesignerWCAG 1.3.1Niveau A
  • Een screenreadergebruiker kan uit de leesvolgorde herkennen welk kleurvlak bij welke eigenschappen hoort.

    Een gebruiker van een screenreader 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

    contentmakerdesignerdeveloperWCAG 1.3.2Niveau A
  • Kleur is niet de enige manier waarop de informatie over de Color Sample beschikbaar is.

    Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

    Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.

    contentmakerdesignerWCAG 1.4.1Niveau A
  • 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.

    contentmakerdesignerWCAG 1.4.3Niveau AA
  • 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:

    contentmakerdesignerWCAG 1.4.11Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Ik ben:
Alle onderwerpen worden getoond.
  • Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

    Zorg ervoor dat het component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar.

    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. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

    Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur niet alleen op de specifieke styling van het element of component, maar op globaal (:root) niveau.

    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 extensie zoals Stylus of User CSS, 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:

    developerWCAG 1.4.12Niveau AA

Community implementaties

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-color-sample in CSS
utrecht-color-sample in Web Component
utrecht-color-sample in React
utrecht-color-sample in Angular

Definition of Done

Help component verbeteren

We vinden het belangrijk dat de component Color Sample goed te gebruiken is door iedereen. Help je mee?