Color Sample

[wartburggraaf]

We willen graag meer leren over de Color Sample component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

Naam

Color Sample

Doel

Toont een voorbeeld van een kleur.

Ook bekend als

Color Swatch

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Color Sample

[jeffreylauwers]

Amsterdam

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

---

Notities

• Rechthoek kleurvlak
• Aangevuld met naam en hex waarde.
• In Figma staat er soms een tekst in het kleurvlak.

[jeffreylauwers]

Den Haag

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

• Storybook
• Figma huidig
• Figma WIP

---

Screenshots / Varianten

Storybook

Color palette
(Screenshot bevat niet alle kleuren)

---

Notities

• In Storybook vult het kleurvlak zich uit binnen een balk.
• Aangevuld met naam en hsl waarde.

[jeffreylauwers]

DSO

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

Documentatie website

---

Screenshots / Varianten

Documentatie website
(Screenshot bevat niet alle kleuren)

---

Notities

• Vierkant kleurvlak.
• Aangevuld met naam, rgb en hex waarde. Informatie staat in het kleurvlak.

[julezrulez]

In dit voorbeeld zie je ten opzichte van de meeste andere voorbeelden meteen welke tekstkleur je moet gebruiken om aan de contrastregel uit WCAG te voldoen.

[jeffreylauwers]

DUO

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

Documentatie website

---

Screenshots / Varianten

Documentatie website
(Screenshot bevat niet alle kleuren)

---

Notities

• Rechthoeking kleurvlak
• Aangevuld met naam, hex waarde. Informatie staat in het kleurvlak.

[julezrulez]

In dit voorbeeld zie je ten opzichte van de meeste andere voorbeelden meteen welke tekstkleur je moet gebruiken om aan de contrastregel uit WCAG te voldoen.

[jeffreylauwers]

OpenGemeenten

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

Patternlab

---

Screenshots / Varianten

Patternlab
(Screenshot bevat niet alle kleuren)

---

Notities

• Rechthoekig kleurvlak met afgeronde hoeken.
• Omkaderd en aangevuld met naam.

[jeffreylauwers]

Rotterdam

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

• Storybook
• Figma

---

Screenshots / Varianten

Storybook
(Screenshot bevat niet alle kleuren)

Figma
(Screenshot bevat niet alle kleuren)

---

Notities

• In Storybook vult het kleurvlak zich uit binnen een balk.
• In Figma is kleurvlak een vierkant met afgeronde hoeken.
• Aangevuld met naam, hex waarde.

[jeffreylauwers]

RVO

Niet gevonden als component. Maar er worden wel voorbeelden van kleuren getoond voor het design system.

• Documentatie website
• Storybook

---

Screenshots / Varianten

Storybook
(Screenshot bevat niet alle kleuren)

---

Notities

• Kleurvlak als cirkel
• Aangevuld met naam, hex en rgb waarde, aangevuld met CSS variabele.

[jeffreylauwers]

Utrecht

• Documentatie website
• Storybook
• GitHub

---

Screenshots / Varianten

Documentatie website
(Screenshot bevat niet alle kleuren)

Storybook

Default

---

Notities

• Documentatie beschikbaar
• Naast gebruik zoals bij andere organisaties wordt bij Urecht ook de toepassing voor een Legenda en combinatie met een color input component genoemd.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Color sample op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Color Sample op het Candidate bord

[rianrietveld]

@jeffreylauwers at al
We (Marjon en ik) hebben onderzoek gedaan met screen readers naar de constructie

<div class="voorbeeld-theme">
    <svg 
        aria-labelledby=":r0:" 
        role="img" 
        xmlns="http://www.w3.org/2000/svg" height="16" width="16" class="nl-color-sample" style="color: rgb(255, 20, 147);">
        <path d="M0 0H32V32H0Z" fill="currentcolor"></path>
    </svg>
        
    <p class="nl-paragraph" id=":r0:">De kleur "#ff1493".</p>
</div>

Zie: https://candidate-storybook-test-git-refactor-c-118d12-nl-design-system.vercel.app/?path=/docs/componenten-color-sample--documentatie.

Resultaat:

• VoiceOver in Safari leest het goed voor, de SVG en de paragraaf.
• NVDA in Edge leest alleen de kleur voor bij de SVG en slaat de labelledby tekst over, dus dat is eigenlijk perfect.
• JAWS leest het goed voor, de SVG en de paragraaf, net zoals VoiceOver.

Twee keer voorlezen is eigenlijk geen probleem, je ziet ook twee keer een aanwijzing voor de kluer.
Deze constructie wordt dus door screen readers voldoende ondersteund.

Voorwaarde voor deze constructie:

• De p voor de labelledby moet altijd gevuld zijn met de beschrijving van de kleur, anders heeft de SVG geen toegankelijke naam.
• De SVG moet het attribuut img hebben.

[MarjonBakker]

@jeffreylauwers at al We (Marjon en ik) hebben onderzoek gedaan met screen readers naar de constructie

Resultaat:

* NVDA in Edge leest alleen de kleur voor bij de SVG en slaat de labelledby tekst over, dus dat is eigenlijk perfect.

@rianrietveld Ik kan het niet reproduceren dat NVDA iets overslaat.

[jeffreylauwers]

✨ Dit component is nu Candidate ✨

Help je mee hem door de Hall of Fame stappen te krijgen?
Color Sample op het Hall of Fame bord