Share
Een van de belangrijkste aspecten van het maken van toegankelijke websites is ervoor zorgen dat u leesbare tekst hebt. En op zijn beurt zorgt het maken van leesbare tekst ervoor dat u voldoende kleurcontrast krijgt tussen uw tekstkleuren en uw achtergrondkleuren.
Bekijk bijvoorbeeld de paarse tekst op een witte achtergrond op de startpagina van Tuts +. Dit contrastniveau is allemaal goed:
Voorbeeld van een goede tekstcontrastverhouding Maar als we de tekst lichter maken, kunnen we snel een punt bereiken waarop het contrast te laag is en het te moeilijk wordt om te lezen:
Dezelfde tekst die nu is aangepast, heeft een slechte contrastverhouding Dit kan een relatief eenvoudig concept zijn, maar het waarborgen van voldoende contrast in de praktijk kan zelfs een beetje lastig zijn. Soms ziet het kleurcontrast er misschien goed uit, maar in werkelijkheid is dit misschien niet helemaal hetzelfde. Dus hoe kunnen we er zeker van zijn dat onze kleurcontrastniveaus toegankelijkheidsvriendelijk zijn? Dat is waar Chrome Dev Tools kan helpen.
Deze zelfstudie maakt deel uit van Web Accessibility: de complete leergids, waar we een reeks zelfstudies, artikelen, cursussen en e-boeken hebben verzameld, zodat u de webtoegankelijkheid vanaf het begin beter begrijpt.
In de bovenstaande schermafbeeldingen ziet u de Chrome Pick-up voor Chrome Dev Tools. Als je goed kijkt, kun je ook zien dat er extra informatie in die kleurenkiezer zit, zoals de weergave van een score met een contrastratio, die helpt bij het geven van feedback over kleurkeuzes. Dit maakt deel uit van de onlangs toegevoegde toegankelijkheidshulpmiddelen in Chrome - laten we een kijkje nemen en kijken hoe het allemaal werkt.
Notitie: Mogelijk ziet u enkele instructies op het web waarin staat dat u 'Ontwikkelaarsexperimenten' moet inschakelen om deze functies voor kleurcontrastcontrole te gebruiken, maar dit is niet langer het geval. De functionaliteit is nu ingebouwd in zowel Chrome als Chromium.
Begin met het openen van Chrome / Chromium Dev-hulpprogramma's en het selecteren van een willekeurig tekstelement in uw HTML. Vervolgens in de stijlen tab, zoek de kleur Klik met de rechtermuisknop op het kleine kleurstaal om het gereedschap voor het kiezen te openen.
Selecteer een tekstelement en klik op het gekleurde vierkant om te beginnen In het gebied dat ik heb gemarkeerd met een rood vierkant hieronder, zie je de contrastratio score van 5.00 dit tekstelement is gegeven. Deze score komt door het detecteren van de kleur van het achtergrondelement en het vergelijken met de kleur van de tekst.
U zult ook merken dat er twee groene tikken naast de score staan, wat betekent dat deze contrastverhouding binnen de geaccepteerde parameters voor toegankelijkheid valt.
Het vinkje van goedkeuring krijgen voor de contrastverhouding Deze basisratio-score is handig, maar als u toegang wilt krijgen tot alle tools voor kleurcontrast, klikt u op de naar beneden wijzende pijl rechts van de contrastscore. Er wordt een tooltip weergegeven met het label Laat meer zien als je erover zweeft.
Uitbreiden van de tools voor meer informatie over kleurcontrasten Met deze sectie uitgebreid krijgen we wat extra informatie. Hier ziet u de ideale contrastscores die u zou moeten proberen te bereiken, waarbij hogere getallen een sterker contrast vertegenwoordigen. Een score tussen 3,0 en 4,5 wordt weergegeven als "AA" en wordt als het minimum beschouwd, terwijl 4,5 of hoger wordt weergegeven als "AAA" en is ideaal.
Nu zien we de contrastscores om naar te streven en een "veilige" lijn op de kleurenkiezer U zult ook opmerken dat wanneer de gereedschappen voor volledige kleurcontrasten zijn uitgevouwen, er een lijn langs de bovenkant van de kleurenkiezer verschijnt. Dit is de scheidingslijn tussen tekstkleuren die ten minste een "AA" -beoordeling hebben en die niet aan de normen voldoen.
Notitie: je kunt behoorlijk dicht bij de lijn komen en van een "AAA" rating naar "AA" gaan, waarbij je boven een score van 3,0 blijft maar onder de 4,5 gaat:
Dicht bij de lijn komen is nog steeds oké, maar niet ideaal Alles boven de regel wordt echter gemarkeerd met rode waarschuwingssymbolen om aan te geven dat de kleurencombinatie een probleem vormt voor de toegankelijkheid:
Overschrijd de lijn en verliest uw AA / AAA-contrastwaarde U kunt ook de schuifregelaar voor alpha verplaatsen, die zich onder de huisslider bevindt, en de 'veilige' regel verschuift om rekening te houden met de verhoogde transparantie:
Als u de schuifregelaar voor alpha verplaatst, wordt ook de "veilige" lijn verplaatst Een ander ding om op te letten is dat de kant van de lijn waar je je tekstkleur op wilt laten vallen, kan omkeren afhankelijk van de kleur van je achtergrond. Als uw tekst een donkere achtergrond heeft, wilt u dat de kleur van uw tekst wordt weergegeven bovenstaande de lijn. Als uw tekst op een lichte achtergrond staat, zou de kleur ervan moeten verminderen beneden de lijn.
Hieronder zien we een voorbeeld van deze inversie, met een donkere achtergrond in de linker afbeelding en een lichte achtergrond in de juiste afbeelding. Merk op dat er ook een voorvertoning van de tekst- en achtergrondkleuren bij elkaar is - zoek naar de Aa in een cirkel, onder de Laat meer zien schakelaar:
Aan de linkerkant moet lichtgekleurde tekst op een donkere achtergrond zijn kleur boven de lijn hebben. Aan de rechterkant moet donker gekleurde tekst op een lichte achtergrond zijn kleur onder de lijn hebben. Met deze tools voor kleurcontrastcontrole in Chrome en Chromium is het aanzienlijk eenvoudiger om de leesbaarheid tijdens het ontwerpproces te waarborgen. Het enige wat we moeten doen is een snelle controle van elk van onze tekstkleuren, de kleurenkiezer gebruiken om het waar nodig aan te passen en vervolgens de nieuwe kleuren integreren in onze code.
Dat is een stap dichter bij het internet een geweldige plek maken voor iedereen!
Accentsconagua