Accessibility: kleurcontrast

Zorg er steeds voor dat tekst voldoende contrast heeft. Je kan dit makkelijke controleren met een online tool.

Minimale Contrastvereisten

/* ✅ Goed: Voldoende contrast (4.5:1 voor normale tekst) */
.good-contrast {
    color: #333333;           /* Donkergrijs op wit: 12.63:1 ratio */
    background: #ffffff;
}

.good-contrast-alt {
    color: #ffffff;           /* Wit op donkerblauw: 8.59:1 ratio */
    background: #1f2937;
}

/* ❌ Slecht: Onvoldoende contrast */
.poor-contrast {
    color: #cccccc;           /* Lichtgrijs op wit: 1.61:1 ratio */
    background: #ffffff;      /* Voldoet niet aan WCAG AA */
}

.poor-contrast-alt {
    color: #ffd700;           /* Geel op wit: 1.78:1 ratio */
    background: #ffffff;      /* Te laag contrast */
}

/* Grotere tekst heeft lagere contrastvereisten (3:1) */
.large-text {
    font-size: 1.5rem;        /* 24px of groter */
    font-weight: normal;
    color: #666666;           /* 5.74:1 ratio - voldoet aan AA Large */
    background: #ffffff;
}

.bold-large-text {
    font-size: 1.25rem;       /* 20px of groter */
    font-weight: bold;        /* Bold tekst telt als "large" */
    color: #666666;
    background: #ffffff;
}