@amsterdam/design-system-css 0.1.6 → 0.1.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.6",
+  "version": "0.1.8",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -19,11 +19,11 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.5",
-    "sass": "1.68.0"
+    "@amsterdam/design-system-tokens": "0.1.7",
+    "sass": "1.69.5"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.536"
+    "@utrecht/components": "2.0.0"
   },
-  "gitHead": "58764d2cd6d59d20fd0e3215f32461c6c580df1b"
+  "gitHead": "703538926459edf62102d1fe7b6bd15ab511865d"
 }

package/src/accordion/README.md

@@ -14,7 +14,7 @@ Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen
 Je kunt door een accordion navigeren met je toetsenbord:
 
 | key                  | element                                                                                                                      |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
 | Enter of Space       | Open of sluit de accordionsectie die de focus heeft                                                                          |
 | Tab                  | Ga naar het volgende element dat focus kan hebben                                                                            |
 | Shift + Tab          | Ga naar het volgende element dat focus kan hebben                                                                            |

package/src/accordion/accordion.scss

@@ -11,6 +11,10 @@
   margin-inline: 0;
 }
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-accordion__button {
   background-color: transparent;
   border: 0;
@@ -26,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 
@@ -46,6 +50,8 @@
       transition: none;
     }
   }
+
+  @include reset;
 }
 
 .amsterdam-accordion__button[aria-expanded="true"] svg {

package/src/alert/README.md

@@ -0,0 +1,18 @@
+# Alert
+
+Met een Alert breng je de gebruiker op de hoogte van een belangrijke of tijdgevoelige boodschap. De taak van de gebruiker wordt niet onderbroken.
+
+## Specificaties
+
+### Kleurdefinities
+
+- Geel: informatie
+- Rood: fout
+- Groen: goed
+
+## Richtlijnen
+
+- Standaard heeft het element geen sluiten knop. Optioneel kan deze toegevoegd worden.
+- Optioneel kan een icoon worden weggelaten. Een geel Alert heeft nooit een icoon.
+- Optioneel kan een titel worden weggelaten.
+- Aangeraden wordt om een Alert in ieder geval van een paragraaf text te voorzien en deze eventueel te ondersteunen met een link, opsomming of knop.

package/src/alert/alert.scss

@@ -0,0 +1,69 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-alert {
+  align-items: flex-start;
+  background-color: var(--amsterdam-alert-background-color);
+  border: var(--amsterdam-alert-border);
+  display: flex;
+  flex-direction: row;
+  gap: var(--amsterdam-alert-gap);
+  justify-content: space-between;
+  padding-block-end: var(--amsterdam-alert-padding-block-end);
+  padding-block-start: var(--amsterdam-alert-padding-block-start);
+  padding-inline-end: var(--amsterdam-alert-padding-inline-end);
+  padding-inline-start: var(--amsterdam-alert-padding-inline-start);
+}
+
+.amsterdam-alert__content {
+  flex: auto;
+}
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-alert__title {
+  color: var(--amsterdam-alert-title-color);
+  font-family: var(--amsterdam-alert-title-font-family);
+  font-size: var(--amsterdam-alert-title-narrow-font-size);
+  font-weight: var(--amsterdam-alert-title-font-weight);
+  line-height: var(--amsterdam-alert-title-line-height);
+
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
+    font-size: var(--amsterdam-alert-title-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-alert--error {
+  background-color: var(--amsterdam-alert-error-background-color);
+  border-color: var(--amsterdam-alert-error-border-color);
+}
+
+.amsterdam-alert--success {
+  background-color: var(--amsterdam-alert-success-background-color);
+  border-color: var(--amsterdam-alert-success-border-color);
+}
+
+/* todo: move to action button component */
+.amsterdam-alert__close {
+  background-color: var(--amsterdam-alert-close-background-color);
+  border: 0;
+  cursor: pointer;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-alert__close svg {
+  fill: var(--amsterdam-alert-close-fill);
+}
+
+.amsterdam-alert__close:hover svg {
+  fill: var(--amsterdam-alert-close-hover-fill);
+}

package/src/aspect-ratio/README.md

@@ -0,0 +1,18 @@
+# Aspect Ratio
+
+Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een element aan de breedte.
+
+Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
+
+| _keyword_ | verhouding |
+| :-------- | ---------: |
+| `2x-wide` |       32:9 |
+| `x-wide`  |       16:9 |
+| `wide`    |        5:4 |
+| `square`  |        1:1 |
+| `tall`    |        4:5 |
+| `x-tall`  |       9:16 |
+
+## Richtlijnen
+
+- Gebruik dit component om plaatjes, videos en andere elementen een vaste beeldverhouding te geven, zodat ze consistent schalen.

package/src/aspect-ratio/aspect-ratio.scss

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-aspect-ratio {
+  overflow: hidden;
+  position: relative;
+}
+
+.amsterdam-aspect-ratio--x-tall {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
+}
+
+.amsterdam-aspect-ratio--tall {
+  aspect-ratio: var(--amsterdam-aspect-ratio-tall);
+}
+
+.amsterdam-aspect-ratio--square {
+  aspect-ratio: var(--amsterdam-aspect-ratio-square);
+}
+
+.amsterdam-aspect-ratio--wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-wide);
+}
+
+.amsterdam-aspect-ratio--x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
+}
+
+.amsterdam-aspect-ratio--2x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
+}

package/src/blockquote/blockquote.scss

@@ -7,13 +7,13 @@
 
 @mixin reset {
   box-sizing: border-box;
-  break-after: avoid;
-  break-inside: avoid;
   margin-block: 0;
   margin-inline: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-blockquote {
+  break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
   font-size: var(--amsterdam-blockquote-narrow-font-size);
@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 

package/src/breadcrumb/breadcrumb.scss

@@ -9,14 +9,16 @@
   box-sizing: border-box;
   margin-block: 0;
   padding-inline: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
   font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }
@@ -57,9 +59,7 @@
     text-transform: capitalize;
   }
 
-  &:focus,
-  &:hover,
-  &:active {
+  &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
     text-decoration: underline;
     text-decoration-thickness: 2px;

package/src/button/button.scss

@@ -6,12 +6,18 @@
 @import "../../node_modules/@utrecht/components/button/css";
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
+
+  @include reset;
 }
 
 .amsterdam-button--secondary {
@@ -27,16 +33,7 @@
   }
 }
 
-// Specificity hack to be able to style secondary button focus state
-// This isn't currently possible with the Utrecht component
-// We should really pull this component in our own repo...
-.amsterdam-button--secondary.amsterdam-button--secondary {
-  &:focus {
-    color: var(--amsterdam-button-secondary-focus-color);
-  }
-}
-
-.amsterdam-button--secondary:focus:not(:disabled, [aria-disabled="true"]) {
+.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
   box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
 }
 
@@ -46,6 +43,6 @@
   }
 }
 
-.amsterdam-button--tertiary:focus:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-tertiary-focus-box-shadow);
+.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
+  box-shadow: none;
 }

package/src/card/README.md

@@ -0,0 +1,12 @@
+# Card
+
+Gebruik een card op een overzichtspagina om te verwijzen naar een detailpagina, zoals een nieuwsbericht, een vacature of een zoekresultaat. De card bevat meestal de titel, introductie en afbeelding van de content. De link is verplicht.
+
+## Schermlezers
+
+Met een schermlezer kun je onder andere navigeren via headings en links in een document. De titel van een card is een link in een heading, zodat je van beide navigatiemanieren gebruik kunt maken. Een schermlezer leest eerst de titel op, daarna de rest van de inhoud.
+
+## Richtlijnen
+
+- De titel van een card is een link in een heading. Hier gelden dezelfde richtlijnen voor als voor reguliere [links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) en [headings](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+- Een card heeft meer inhoud nodig dan alleen een titel. Vul dit aan met tekstuele en/of visuele inhoud. Als dit lastig is, kijk dan of een [top task link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-top-task-link--docs) of [reguliere link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) beter past.

package/src/card/card.scss

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-card {
+  display: grid;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-card-outline-offset);
+  position: relative;
+  touch-action: manipulation;
+
+  /* Set native outline on card if card has focus visible within */
+  &:has(:focus-visible) {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 1px;
+  }
+
+  /*
+    Remove link focus outline only if :has is supported,
+    which means the outline on the whole card is set
+  */
+  &:has(:focus-visible) a:focus {
+    outline: none;
+  }
+
+  /*
+    This trick, together with position: relative on the outer wrapper, makes the whole card clickable.
+    Taken from https://inclusive-components.design/cards/
+  */
+  a::after {
+    content: "";
+    display: block;
+    inset: 0;
+    position: absolute;
+  }
+}
+
+.amsterdam-card__heading-group {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+.amsterdam-card__link {
+  color: var(--amsterdam-card-link-color);
+  text-decoration: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+
+  &:hover {
+    color: var(--amsterdam-card-link-hover-color);
+    text-decoration: underline;
+  }
+}

package/src/checkbox/README.md

@@ -24,4 +24,4 @@ Een label:
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
 
-<!-- TODO: Checkbox is an interactive element, reference the general interactive elements docs when they're merged -->
+Checkbox is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.

package/src/checkbox/checkbox.scss

@@ -34,11 +34,15 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-checkbox__label {
   color: var(--amsterdam-checkbox-color);
   cursor: pointer;
@@ -61,9 +65,11 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
+
+  @include reset;
 }
 
 // Default checked

package/src/footer/footer.scss

@@ -7,23 +7,4 @@
 
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
-  padding-block: 2.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-footer__top {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}
-
-.amsterdam-footer__column {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
-}
-
-.amsterdam-footer__bottom {
-  padding-block: 0.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
 }

package/src/form-label/README.md

@@ -1,3 +1,3 @@
-# Form label
+# Form Label
 
 Een label element gebruik je om een formulierelement te beschrijven. Koppel een formulierelement (zoals een `input` of `textarea`) altijd aan een label.

package/src/form-label/form-label.scss

@@ -5,6 +5,10 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
@@ -12,7 +16,9 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
+
+  @include reset;
 }

package/src/grid/README.grid-cell.md

@@ -0,0 +1,14 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
+
+## Gebruik
+
+Verdeel hiermee een grid in cellen.
+Geef aan hoeveel kolommen van het grid de cel beslaat.
+Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
+In elke cel plaats je vervolgens de gewenste inhoud.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/README.grid.md

@@ -0,0 +1,17 @@
+# Grid
+
+Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
+
+Meerdere instanties van dit component zijn dus mogelijk op een pagina.
+Visueel moeten ze wel allemaal op elkaar aansluiten.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/grid-cell.scss

@@ -5,14 +5,42 @@
 
 @import "../../utils/breakpoint";
 
-@media screen and (width > $amsterdam-breakpoint) {
+.amsterdam-grid-cell--full-width {
+  grid-column: 1 / -1;
+}
+
+// The order of the following declaration blocks ensures the intended specificity.
+
+@for $i from 1 through 12 {
+  .amsterdam-grid-cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-grid-cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid-column-start-#{$i} {
+    .amsterdam-grid-cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid-cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
+  }
+}
 
-    .amsterdam-grid-column-span-#{$i} {
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid-cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
+
+    .amsterdam-grid-cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
   }
 }

package/src/grid/grid.scss

@@ -0,0 +1,65 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-grid {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
+  display: grid;
+  gap: var(--amsterdam-grid-gap);
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  padding-inline: var(--amsterdam-grid-padding-inline);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  }
+}
+
+.amsterdam-grid--density-high {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+}
+
+.amsterdam-grid--padding-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+}

package/src/heading/heading.scss

@@ -8,6 +8,7 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-heading {
@@ -24,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -33,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -42,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -51,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }

package/src/highlight/README.md

@@ -0,0 +1,15 @@
+# Highlight
+
+Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
+
+## Richtlijnen
+
+Raadpleeg [dit overzicht op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) om na te gaan of je zwarte of witte tekst kunt gebruiken op de achtergrondkleur van je keuze.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
+
+## Referenties
+
+- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)