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:
- Groter formaat
- Dikkere rand
- 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.
