NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Zorg Helder

Accessible healthcare theme: all text meets WCAG AAA (contrast 7:1 or higher), 18 px base size, large tap targets, a visible focus ring and messages that never rely on colour alone. Friendly and clear for GP practices, pharmacies and home care.

View full screen ↗
Spoed buiten kantoortijd: 0900 123 4567 Thema 12 · Zorg Helder · WCAG 2.2 AAA voor tekst

Gezondheidscentrum De LindeHuisartsen · Apotheek · Fysiotherapie · Zwolle-Zuid

Waar kunnen we u mee helpen?

Duidelijk, vriendelijk en voor iedereen te lezen. Grote letters, rustige kleuren en knoppen die u niet hoeft te zoeken.

Openingstijden
Maandag tot donderdag08:00 tot 17:00
Vrijdag08:00 tot 16:30
WeekendHuisartsenpost Isala, 0900 333 1122

Griepprik 2026

Zaterdag 18 oktober, 09:00 tot 13:00 uur in sporthal De Pas. U krijgt een uitnodiging per post. Neem die en uw identiteitsbewijs mee.

Geplaatst 2 oktober 2026

Kleur en contrast

Achtergrond#FFFFFF
Oppervlak#EEF4F6
Tekst#0E1E2E16,9 : 1 AAA
Gedempt#3A4A5A9,1 : 1 AAA
Lijn#6A77854,6 : 1 vlak
Accent · zeegroen#00585E8,2 : 1 AAA
Accent 2 · focus#FFD45C11,9 : 1 met tekst
Signaal · spoed#A3141E7,8 : 1 AAA

Letter

Chillax 600

Plus Jakarta Sans, 18 px, regelafstand 1,6. Lopende tekst nooit kleiner dan 16 px.

40 · 28 · 22 · 18 · 16

Labels

Klaar Wachtlijst Vervallen

Formulier en knoppen

Past bij huisartsen en gezondheidscentra · apotheken · thuiszorg en wijkteams · gemeenten · patiëntenverenigingen

How to use it

  1. Paste the HTML where the themes should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. No JavaScript needed.
<!-- Zorg Helder · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tzh"><div class="tzh__in">
  <div class="tzh__bar">
    <span class="tzh__bar-l"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>Spoed buiten kantoortijd: <b>0900 123 4567</b></span>
    <span class="tzh__bar-r">Thema 12 · Zorg Helder · WCAG 2.2 AAA voor tekst</span>
  </div>
  <div class="tzh__grid">
    <div class="tzh__site">
      <p class="tzh__org"><span class="tzh__logo" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 21c-5-3-8-6.5-8-10.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 8 2.5c0 4-3 7.5-8 10.5z"/></svg></span>Gezondheidscentrum De Linde<small>Huisartsen · Apotheek · Fysiotherapie · Zwolle-Zuid</small></p>
      <h3 class="tzh__name">Waar kunnen we u mee helpen?</h3>
      <p class="tzh__mood">Duidelijk, vriendelijk en voor iedereen te lezen. Grote letters, rustige kleuren en knoppen die u niet hoeft te zoeken.</p>
      <div class="tzh__tasks">
        <button class="tzh__task" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h3"/></svg><span><b>Afspraak maken</b><small>Online of bel 038 123 4500</small></span></button>
        <button class="tzh__task" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="3.5" width="14" height="17" rx="2"/><path d="M9 8h6M9 12h6M9 16h3"/></svg><span><b>Herhaalrecept</b><small>Voor 11:00 aangevraagd, morgen klaar</small></span></button>
        <button class="tzh__task tzh__task--sos" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.2v.1"/></svg><span><b>Spoed</b><small>Bel direct 038 123 4599</small></span></button>
      </div>
      <table class="tzh__hours">
        <caption>Openingstijden</caption>
        <tr><th scope="row">Maandag tot donderdag</th><td>08:00 tot 17:00</td></tr>
        <tr><th scope="row">Vrijdag</th><td>08:00 tot 16:30</td></tr>
        <tr><th scope="row">Weekend</th><td>Huisartsenpost Isala, 0900 333 1122</td></tr>
      </table>
      <div class="tzh__news">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.1"/></svg>
        <div><p class="tzh__news-t">Griepprik 2026</p><p class="tzh__news-b">Zaterdag 18 oktober, 09:00 tot 13:00 uur in sporthal De Pas. U krijgt een uitnodiging per post. Neem die en uw identiteitsbewijs mee.</p><p class="tzh__news-d">Geplaatst 2 oktober 2026</p></div>
      </div>
    </div>
    <div class="tzh__sys">
      <p class="tzh__lbl">Kleur en contrast</p>
      <table class="tzh__pal">
        <tr><td><i style="--c:#FFFFFF"></i></td><th scope="row">Achtergrond</th><td>#FFFFFF</td><td></td></tr>
        <tr><td><i style="--c:#EEF4F6"></i></td><th scope="row">Oppervlak</th><td>#EEF4F6</td><td></td></tr>
        <tr><td><i style="--c:#0E1E2E"></i></td><th scope="row">Tekst</th><td>#0E1E2E</td><td><span class="tzh__ratio">16,9 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#3A4A5A"></i></td><th scope="row">Gedempt</th><td>#3A4A5A</td><td><span class="tzh__ratio">9,1 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#6A7785"></i></td><th scope="row">Lijn</th><td>#6A7785</td><td><span class="tzh__ratio tzh__ratio--ui">4,6 : 1 vlak</span></td></tr>
        <tr><td><i style="--c:#00585E"></i></td><th scope="row">Accent · zeegroen</th><td>#00585E</td><td><span class="tzh__ratio">8,2 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#FFD45C"></i></td><th scope="row">Accent 2 · focus</th><td>#FFD45C</td><td><span class="tzh__ratio">11,9 : 1 met tekst</span></td></tr>
        <tr><td><i style="--c:#A3141E"></i></td><th scope="row">Signaal · spoed</th><td>#A3141E</td><td><span class="tzh__ratio">7,8 : 1 AAA</span></td></tr>
      </table>
      <div class="tzh__two">
        <div>
          <p class="tzh__lbl">Letter</p>
          <p class="tzh__t1">Chillax 600</p>
          <p class="tzh__t2">Plus Jakarta Sans, 18 px, regelafstand 1,6. Lopende tekst nooit kleiner dan 16 px.</p>
          <p class="tzh__t3">40 · 28 · 22 · 18 · 16</p>
        </div>
        <div>
          <p class="tzh__lbl">Labels</p>
          <div class="tzh__badges">
            <span class="tzh__bdg tzh__bdg--ok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Klaar</span>
            <span class="tzh__bdg tzh__bdg--warn"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Wachtlijst</span>
            <span class="tzh__bdg tzh__bdg--err"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>Vervallen</span>
          </div>
        </div>
      </div>
      <p class="tzh__lbl">Formulier en knoppen</p>
      <div class="tzh__form">
        <label class="tzh__field"><span>Geboortedatum</span><input class="tzh__input" type="text" value="12-03-1951"></label>
        <label class="tzh__field"><span>Uw huisarts</span><select class="tzh__sel"><option>Dokter A. el Amrani</option><option>Dokter M. de Groot</option></select></label>
        <label class="tzh__field tzh__field--err"><span>BSN</span><input class="tzh__input" type="text" value="12345" aria-invalid="true"><em><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v5M12 15.8v.1"/></svg>Een BSN heeft 9 cijfers.</em></label>
      </div>
      <div class="tzh__btns">
        <button class="tzh__btn tzh__btn--p" type="button">Afspraak bevestigen</button>
        <button class="tzh__btn tzh__btn--s" type="button">Wijzigen</button>
        <button class="tzh__btn tzh__btn--g" type="button">Terug</button>
        <button class="tzh__btn tzh__btn--p is-focus" type="button">Focus</button>
      </div>
    </div>
  </div>
  <p class="tzh__fit"><b>Past bij</b> huisartsen en gezondheidscentra · apotheken · thuiszorg en wijkteams · gemeenten · patiëntenverenigingen</p>
</div></div>
</div>

More themes

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →