Carrousel-bolletjes: actief = blauw, inactief = grijs

Vijf bolletjes onder een carrousel. Het derde is blauw. De rest grijs.

In grijstinten: vijf grijze bolletjes. Welke is actief? Onmogelijk te zeggen.

/* Niet doen: alleen kleur verschilt */
.dot { background-color: #CCC; width: 12px; height: 12px; border-radius: 50%; }
.dot--actief { background-color: #0066CC; }

/* Wel doen: kleur + formaat + rand */
.dot--actief {
  background-color: #0066CC;
  width: 16px;
  height: 16px;
  border: 2px solid #003D7A;
}

Drie manieren om het actieve bolletje te onderscheiden zonder alleen kleur:

1. Groter formaat
2. Dikkere rand
3. Andere vorm (vierkant, ster, gevuld vs. leeg)

Het mooiste: combineer grootte en rand. Dan is het verschil in grijstinten direct zichtbaar.

Advies: als je carrousel vijf bolletjes nodig heeft om navigatie te bieden, is je carrousel misschien te lang. Maar dat is een UX-discussie voor een andere post.