Share
En av de viktigaste aspekterna av att skapa tillgängliga webbplatser är att du får läsbar text. Och i sin tur skapar läsbar text att du har tillräcklig färgkontrast mellan dina textfärger och dina bakgrundsfärger.
Ta en titt på den lila texten på vit bakgrund från hemsidan för Tuts +. Den här kontrastnivån är bra:
Exempel på ett bra textkontrastförhållande Men om vi gör texten lättare kan vi snabbt nå en punkt där kontrasten är för låg och det blir för svårt att läsa:
Samma textjusterad nu har ett dåligt kontrastförhållande Det här kan vara ett relativt rakt koncept, men att säkerställa en tillräcklig kontrast i praktiken kan faktiskt vara lite knepig. Ibland kan färgkontrast se bra ut i ögat, men i verkligheten kanske det inte är upp till par. Så hur kan vi vara säkra på våra färgkontrastnivåer är tillgänglighetsvänliga? Det är där Chrome Dev Tools kan hjälpa till.
Denna handledning är en del av Web Accessibility: den fullständiga lärarhandboken, där vi har samlat in en rad tutorials, artiklar, kurser och e-böcker, för att hjälpa dig att förstå webbåtkomst från början.
Du kommer att märka i ovanstående skärmdumpar vi ser färgväljaren för Chrome Dev Tools. Om du tittar noga kan du också se att det finns ytterligare information i den färgplockaren, till exempel visning av ett kontrastförhållande, vilket hjälper till att ge feedback om färgval. Det här är en del av de nyligen tillagda tillgänglighetsverktygen i Chrome. Låt oss ta en titt och se hur allt fungerar.
Notera: Det kan hända att du får se några instruktioner på webben som säger att du måste aktivera "Developer Experiments" för att kunna använda dessa kontrastkontrollfunktioner, men det här är inte längre fallet. Funktionen är nu byggd direkt in i både Chrome och Chromium.
Börja med att öppna Chrome / Chrom Dev Dev-verktyg och välj något textelement i HTML-koden. Då, i Styles fliken, leta reda på Färg egendom, och till höger om det klickar du på den lilla färgen swatch för att öppna plockarverktyget.
Välj ett textelement och klicka på den färgade rutan för att starta I det område jag har markerat med en röd fyrkant nedanför ser du kontrastförhållandet på 5,00 detta textelement har fått. Denna poäng kommer genom att detektera bakgrundsfärgets färg och jämföra det med texten i texten.
Du kommer också märka att det finns två gröna ticks bredvid poängen, vilket betyder att kontrastförhållandet ligger inom de accepterade parametrarna för tillgänglighet.
Kryss av godkännande på kontrastförhållande Det här grundläggande förhållandet är användbart, men för att få tillgång till alla färgkontrastverktyg klickar du på pilen nedåt till höger om kontrastresultatet. Det kommer att visa ett verktygstips märkt Visa mer när du svävar över den.
Utöka verktygen för att få mer information om färgkontrast Med detta avsnitt utvidgas får vi ytterligare information. Här ser du de ideala kontrastpoängen du ska försöka uppnå, med högre siffror som representerar starkare kontrast. En poäng på mellan 3,0 och 4,5 representeras som "AA" och anses vara minsta, medan 4,5 eller högre representeras som "AAA" och är idealisk.
Nu ser vi kontrastpoängen att sikta på, och en "säker" linje på färgplockaren Du kommer också märka att när fullfärgskontrastverktygen expanderas visas en rad längst upp på färgväljaren. Detta är delningslinjen mellan textfärger som är minst "AA", och de som inte uppfyller standarder.
Notera: Du kan komma ganska nära linjen och flytta från en "AAA" -betyg till "AA", som ligger över ett poäng på 3,0 men går under 4,5:
Att komma nära linjen är fortfarande okej, men inte idealisk Något över linjen kommer emellertid att bli flaggad med röda varningssymboler för att berätta för färgkombinationen ett problem för tillgängligheten:
Korsa linjen och förlora ditt AA / AAA kontrastbetyg Du kan även flytta alfaskiven, som ligger under nyansskyddet, och "säker" -linjen kommer att ändras för att öka den transparenta transparensen:
Flyttning av alfaskärmen flyttar också "säker" linjen En annan sak att vara medveten om är att sidan av raden du vill att din textfärg ska falla på kan invertera beroende på bakgrundsfärgen. Om texten är på en mörk bakgrund vill du att färgen på din text ska visas ovan linjen. Om texten är på en ljus bakgrund ska färgen falla Nedan linjen.
Nedan ser vi ett exempel på denna inversion, med en mörk bakgrund i den vänstra bilden och en ljus bakgrund i rätt bild. Observera att det också finns en förhandsgranskning av texten och bakgrundsfärgerna tillsammans-leta efter Aa inuti en cirkel, nedanför Visa mer växla:
Till vänster ska ljusfärgad text på en mörk bakgrund ha sin färg ovanför linjen. Till höger ska mörkfärgad text på en ljus bakgrund ha sin färg under linjen. Dessa färgkontrastverktyg i Chrome och Chrom gör det väsentligt lättare att säkerställa läsbarhet under designprocessen. Allt vi behöver göra är en snabb kontroll på var och en av våra textfärger, använd färgplockaren för att tweak vid behov och integrera de nya färgerna i vår kod.
Det är ett steg närmare att göra webben till ett bra ställe för alla!
Accentsconagua