Kleurcontrast controleren

De verhouding vergelijkt de relatieve helderheid van de voorgrond- en achtergrondkleuren met behulp van de WCAG-contrastformule. De schaal loopt van 1:1 voor identieke luminantie tot 21:1 voor het sterkste zwart-witverschil. De berekening maakt gebruik van de ingevoerde kleurwaarden en houdt dus niet automatisch rekening met transparantie, kleurverlopen, achtergrondafbeeldingen, schaduwen, anti-aliasing, weergaveomstandigheden of een andere kleur die in een interactieve staat wordt weergegeven. Test de daadwerkelijk weergegeven kleuren voor de normale, zweef-, focus-, actieve, uitgeschakelde en bezochte staten wanneer ze verschillen.

Voor gewone tekst gebruikt WCAG AA een minimumverhouding van 4,5:1 en AAA gebruikt 7:1. Voor grote tekst worden lagere drempelwaarden gebruikt omdat grotere, voldoende vetgedrukte tekens gemakkelijker te onderscheiden zijn: 3:1 voor AA en 4,5:1 voor AAA. Of tekst als groot wordt gekwalificeerd, hangt af van de weergegeven grootte en het gewicht, en niet alleen van een ontwerplabel. Een paar kan daarom slagen voor een grote kop en niet voor de hoofdtekst. Controleer de vereiste die overeenkomt met het echte typografie- en conformiteitsdoel.

Ja. Tekstcontrast is slechts een onderdeel van de toegankelijkheid van kleuren. Visuele informatie die nodig is om bedieningselementen van de gebruikersinterface, componentstatussen, grafische objecten en toetsenbordfocusindicatoren te identificeren, heeft doorgaans een contrast van ten minste 3:1 nodig ten opzichte van aangrenzende kleuren onder WCAG niet-tekstcontrastrichtlijnen. Decoratieve elementen en inactieve bedieningselementen hebben verschillende overwegingen. Test randen, pictogrammen, grafieken, geselecteerde statussen, validatieberichten en focuscontouren in context. Een tekstpaar dat AA passeert, bewijst niet dat elk interactief of grafisch element op hetzelfde scherm toegankelijk is.

Voer de effectieve voor- en achtergrondkleuren in op het punt waar tekst of een essentiële afbeelding verschijnt. Semi-transparante lagen versmelten met wat zich erachter bevindt, en verlopen of foto's creëren verschillende contrastverhoudingen voor hetzelfde element. Bemonster het zwakste relevante gebied en test vervolgens andere waarschijnlijke posities en responsieve gewassen. Als het contrast afhankelijk is van een schaduw, omtrek of overlay, neem dan het daadwerkelijk weergegeven effect op in de handmatige beoordeling. Geef de voorkeur aan een stabiele, stevige achtergrond achter belangrijke tekst wanneer de onderliggende afbeelding kan veranderen.

Nee. Contrast is een meetbare vereiste. Toegankelijk ontwerp heeft ook leesbare letters, voldoende spatiëring, semantische structuur, labels, toetsenbordbediening, zichtbare focus, betekenisvolle alternatieven, bruikbare zoom en reflow, gecontroleerde bewegingen en instructies nodig die niet alleen afhankelijk zijn van kleur. Kleurparen kunnen wiskundig passeren, maar zijn nog steeds moeilijk in dunne lettertypen, kleine formaten, verblinding, verschillen in kleurzicht of compacte lay-outs. Gebruik het resultaat als één controle in een bredere beoordeling en test de daadwerkelijke interface met representatieve inhoud en statussen.