1.4.11 Non-tekst contrast: achtergrondkleur knop minimaal 3:1 contrast met aangrenzende kleur?

[FerJo]

Een knop met de volgende eigenschappen:

• zwarte tekst op groene achtergrond: contrastratio: 7.29
• groene achtergrond op witte aangrenzende ondergrond: contrastratio: 2.88

Discussiepunt: Interpretatie 1.4.11, Non-text Contrast (Level AA)

De achtergrond van de knop hoeft niet een contrastratio van minimaal 3:1 te hebben met aangrenzende ondergrond. Dus: het beschreven voorbeeld is conform de richtlijn.

[FerJo]

Screenshot van button is uit: https://buttonbuddy.dev/

[gjccopinga]

Ik ben het eens met deze stelling. In het Understanding document staat deze regel/uitleg die ik hierin leidend vind:

"A button which has a distinguishing indicator such as position, text style, or context does not need a contrasting visual indicator to show that it is a button, although some users are likely to identify a button with an outline that meets contrast requirements more easily."

De positie ervan en/of de tekst zelf geeft vaak wel aan dat het om een interactieve knop gaat. De achtergrondkleur is dus niet essentieel om het geheel te kunnen herkennen als knop. Ook is de tekst zelf afdoende om te weten waar je moet klikken met de muis om de knop te bedienen. Ook daarvoor hoef je niet de hele breedte en of hoogte perse te kunnen 'zien' of herkennen. Bij knoppen is het dus belangrijk dat de tekst op de knop voldoende contrast heeft via SC 1.4.3. Of, als in plaats van tekst een icoon wordt gebruikt (bijvoorbeeld een vergrootglas voor een zoekknop), dan moet het icoontje voldoende contrast hebben ten opzichte van een eventuele achtergrond van de knop. Dat valt dan wel onder 1.4.11. Maar ook dan is de achtergrondkleur van de knop ten opzichte van de achtergrondkleur van de pagina waar de knop staat weer niet van belang.

[FerJo]

@gjccopinga Prima reactie!

Toch vreemd dat regelmatig dingen opduiken als https://buttonbuddy.dev/ die het tegendeel beweren. Ik heb het idee dat men te veel inzoomt op de tekst: "Visual information required to identify user interface components (...)". Dus men denkt waarschijnlijk:

button = user interface component = 3:1

[Aircl0wn]

Het kan zijn dat het gebaseerd is op een verkeerde interpretatie. Dat gebeurt zeker in dit geval nogal eens.
Aan de andere kant probeert iemand misschien ook wel best practices erin te stoppen (al staat het hier als eis..)

[ShadowBB]

Eens met @gjccopinga .

Buttonbuddy.dev schiet denk ik op best practices zoals @Aircl0wn ook inschat. De screenshot die je hier post zou ik adviseren om alsnog een contrast van boven de 3:1 te geven, maar niet afkeuren (ietswat liggende aan de context) aangezien de context duidelijk zal maken dat het om een knop gaat.

Ik denk altijd maar zo. Als ik puur en alleen de tekst kon zien. Zou een gebruiker dit nog steeds kunnen identificeren als een knop en dus voldoet het aan de "Visual information required to identify user interface components".

Volgens mij hebben we een consensus bereikt van "passed" vanuit 4 organisaties. Dat lijkt me genoeg voor een voorlopige tag, maar schaam je niet om het te melden als je het er niet mee eens bent. Deze issue is nog maar 2 dagen jong.

[ShadowBB]

@FerJo Het is gebruikelijk dat de persoon die de issue opent uiteindelijk ook de conclusie schrijft voor op de website. Heb jij hier tijd voor? Zo nee, dan kan ik die taak op mij nemen.

[FerJo]

Conclusie:

Betreft Succescriterium 1.4.11 Non-tekst contrast.
Consensus: De achtergrondkleur van een knop hoeft niet een contrastratio van minimaal 3:1 te hebben met de aangrenzende ondergrondkleur.
Voorwaarde: het moet wel duidelijk zijn, door de positie, tekst/icoon en context, dat het hier om een knop gaat
Advies: het wordt aangeraden om de achtergrondkleur wel te laten voldoen aan de contrastratio van minimaal 3:1.

[rianrietveld]

Gepubliceerd:
https://wcag-audit-discussions.github.io/NL-BE/sc/1.4.11/