De kleuren van uw merk hebben een sterke emotionele impact, maar hoe komen ze over op sitebezoekers die slechtziend of kleurenblind zijn of te maken krijgen met omgevingsfactoren die de zichtbaarheid moeilijk maken?
Kleur- en contrastniveaus zijn cruciaal voor communicatie, en het precies goed krijgen van deze details is van cruciaal belang voor de toegankelijkheidsgerichte ontwerper.'
Kleurperceptiestoornissen komen vaker voor dan je zou denken. In dit bericht zullen we het hebben over hoe mensen met een beperking, zoals slechtziendheid, dyslexie en kleurenblindheid, omgaan met internet.
Inhoudsopgave
Hoe gebruik ik een kleurenchecker om de toegankelijkheid van mijn website te verbeteren?
Dit gedeelte is eigenlijk vrij eenvoudig, hoewel het wel enige inspanning vergt. U zult de online Contrast Checker-tool van WebAIM moeten gebruiken. WebAIM is een non-profitorganisatie gevestigd aan de Utah State University met als missie het wereldwijd verbeteren van de webtoegankelijkheid.
Voer eenvoudig uw voorgrondkleur (bijvoorbeeld de kleur van uw tekst of pictogrammen) en achtergrondkleur in als hexadecimale waarden (ook wel hexadecimale waarden genoemd), zoals gespecificeerd in HTML of CSS, en de contrastverhoudingscontrole zal u informeren of de verhouding voldoende is. Houd er rekening mee dat de minimale contrastverhouding die u moet nastreven 4.5 op 1 is. Zwarte tekst op een witte achtergrond heeft een contrastverhouding van 21 op 1, dus u heeft veel speelruimte.
5 hulpmiddelen voor het maken van een webkleurenpalet dat iedereen kan zien
1. WebAIM Kleurcontrastcontrole
Voer de hexadecimale kleuren in voor de voorgrond en achtergrond. De uitvoer toont AA- en AAA-naleving voor normale en grote tekst, samen met een voorbeeldzin. Met schuifregelaars kun je dingen veranderen totdat je een goede combinatie vindt.
Sterke punten
- Eenvoudig hulpmiddel met een interface die prettig is voor de ogen.
- Dit is een leuke, eenvoudige tool voor beginners, en niet alleen voor ontwerpers.
Zwakke punten
- Ik kan niet meer dan twee kleuren vergelijken, slechts twee.
- De schuifregelaar voor helderheid is geen goede manier om kleuren te kiezen. Het is moeilijk te zeggen hoe aantrekkelijk de kleuren zijn op dit eenvoudige scherm.
2. Contrastcontrole voor WCAG
Voer de hexadecimale kleuren in voor de voorgrond en achtergrond. Toont AA- en AAA-conformiteit voor normale en grote tekst naast een voorbeeld van Lorem Ipsum-tekst. Je zou ook een foto kunnen uploaden. Er wordt automatisch een 9-kleurenpalet voor u gekozen. Vervolgens kunt u elke kleur vergelijken als voorgrond- of achtergrondkleur.
Sterke punten
- Eenvoudige tool met een gebruiksvriendelijke interface.
- De mogelijkheid hebben om paletten van afbeeldingen te maken.
Zwakke punten
- Het palet wordt automatisch gekozen en u kunt het verder wijzigen met de kleurkiezer, maar deze wijzigingen worden niet terug in het palet opgeslagen. U moet de informatie kopiëren en in een nieuw document plakken.
3. Kleurenkubus
Voer de kleuren voor het palet in, elk op een eigen regel. De uitvoer toont voorbeeldletters met contrastverhoudingen vergeleken met AA-standaarden voor kleine en grote lettertypen. Drie kolommen tonen het contrast met een witte achtergrond, een zwarte achtergrond en een reeks merkkleuren die 'meest leesbaar van beschikbaar' zijn.
Sterke punten
- Aangenaam voor de ogen De gebruikersinterface (UI) is overzichtelijk en de status Pass/Fail/Edge is gemakkelijk te zien.
Zwakke punten
- Voldoet niet aan de normen van AAA.
- Doet niet elke mogelijke kleurencombinatie, en het is in eerste instantie niet duidelijk dat dit het geval is.
4.) Contrastraster met acht vormen
Paletkleuren invoeren. Ook kunt u elke kleur een naam geven. De app maakt een tafel met alle mogelijke kleurencombinaties. Er zijn drie maten tegels. Er zijn visuele aanwijzingen voor AA en AAA pass/fail/edge en effectieve contrastverhouding. Kolommen en rijen kunnen in de app worden verplaatst door middel van slepen en neerzetten. Gegevens in tabelvorm kunnen worden opgeslagen, geëxporteerd en gedeeld.
Sterke punten
- Er zijn veel handige functies die helpen bij de analyse van hele paletten.
Zwakke punten
- Het is moeilijker te leren dan andere hulpmiddelen die gemakkelijker te gebruiken zijn.
- Niet de juiste manier om slechts twee kleuren te vergelijken.
- Niet goed om uit te zoeken hoe kleuren bij elkaar passen.
- Een beetje overweldigend om naar te kijken, maar er wordt veel informatie getoond.
5. Kleurveilig
Typ de achtergrondkleur. Kies de familie, grootte en dikte van het lettertype. Kies AA of AAA als standaard. Toont de geselecteerde kleur en de hexadecimale code, evenals een voorbeeld en de effectieve contrastverhouding. De grote thumbnails van mogelijke voorgrondkleuren met voldoende contrast zijn het beste. Je kunt ervoor kiezen om ze allemaal te bekijken of alleen bepaalde kleurgroepen (groen, blauw, paars, enz.)
Sterke punten
- Met een interface die prettig is voor de ogen, is het gemakkelijk om een combinatie van kleuren te vinden die er goed uitziet en goed werkt.
- Dit is een handig hulpmiddel als u nog geen merkkleurenpalet heeft of als u iets wilt toevoegen aan een kleurenpalet dat u al voor internet heeft.
Zwakke punten
- U kunt alleen de voorgrond- en achtergrondkleuren tegelijk vergelijken.
- U moet kleuren kopiëren en in een apart document plakken als u ze wilt opslaan.
- Ga erop uit en maak dingen voor iedereen!
Als u eenmaal weet hoe u deze hulpmiddelen moet gebruiken, zult u merken dat u er meer dan één nodig heeft voor een project. Misschien is Color Cube wel de beste manier om een klant te laten zien wat je hebt geleerd over toegankelijkheid. Misschien gebruikt u de tool van WebAIM de hele tijd om snelle controles uit te voeren.
Conclusie
Met behulp van de tips, richtlijnen en hulpmiddelen waar we het zojuist over hadden, kunt u uw website contrastrijke kleuren en labels geven. Dit maakt het voor mensen met slechtziendheid, dyslexie en kleurenblindheid gemakkelijker om uw website en inhoud te lezen. Wees niet verbaasd als uw algemene publiek het ook gemakkelijker vindt om uw website te gebruiken.
