Je ziet kleur anders

Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Drie oplossingen die niet genoeg zijn:

• Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
• De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
• Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De richtlijnen vereisen voor deze onderdelen een contrastverhouding van ten minste 3:1 tegen alle aangrenzende kleuren. Het kan dus zijn dat een contrast op meerdere plekken gemeten moet worden.

Formulierelementen

Formulierelementen, zoals invoervelden, keuzerondjes en selectievakjes moeten genoeg contrast hebben. Zorg voor een duidelijke rand of een achtergrondkleur met voldoende contrast. Ook de verschillende statussen van deze elementen moeten genoeg contrast hebben. Het moet duidelijk zijn of een keuzerondje of selectievakje is geselecteerd of juist niet.

Iconen

Informatieve iconen en iconen die ook worden gebruik als link of knop moeten genoeg contrast hebben.

Grafieken en diagrammen

Ook onderdelen in grafieken en diagrammen moeten genoeg contrast hebben. Denk hierbij aan de lijnen in een grafiek en de onderdelen in een diagram.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

• 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
• 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Open dit onderwerp op een eigen pagina

Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

Schrijf dus niet:

• Gebruik de ronde knop om je gegevens te verzenden. (vorm)
• Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
• Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

Maar zeg wel:

• Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

Open dit onderwerp op een eigen pagina

Kleur kan helpen om eenvoudig informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden, maar het mag niet de enige manier zijn. Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden.

Gebruik ook andere manieren, zoals met tekst of een icoon.

Open dit onderwerp op een eigen pagina

Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

Dit raakt vooral:

• Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
• Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
• Bezoekers die met een schakelaar of met hun stem werken.

De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

Open dit onderwerp op een eigen pagina