Hoe maak je een website die rekening houdt met mensen met kleurenblindheid

Hoe maak je een website die rekening houdt met mensen met kleurenblindheid

Onder de projecten die ik nu heb, is er een website die rekening houdt met de visuele en kleur blindheid. Ik was in staat om een aantal artikelen over de productie van de site voor slechtzienden, maar het was niet een hit over de creatie van websites voor mensen met kleurenblindheid, dus ik samengevat wat ik lees in fragmenten in artikelen. Probeer te verwijzen!

PostScript: de manier van een bepaalde notatie is gewijzigd.

Over kleurenblindheid
Het verschil in kleuridentificatie in de mutatie van cellen die de kleur van de ogen herkennen wordt “kleur blindheid” en “kleur blindheid” genoemd. Er zijn verschillende soorten kleurenblindheid, en hier zal ik schrijven over het geval van rood-groene blindheid, waar het moeilijk is om de kleur van de rode en groene lijnen met een grote populatie te onderscheiden.

De moeilijke ymort is

Ik dacht dat het grijs was, maar het was een roze overhemd.
Het is moeilijk onderscheid te maken tussen rauw vlees en gegrild vlees tijdens gegrild vlees.
Het is moeilijk om de routekaart van de trein te begrijpen.
Het is moeilijk om het rode krijt op het bord te zien.
UNO, Puyo Puyo, etc. zijn moeilijk
En zo aan lijkt te worden gegeven.

Hoe ziet het eruit?
Dus hoe ziet het er eigenlijk uit? Vanuit Photoshop CS4-Bekijk > configuratie-instellingen, u nu controleren wat mensen met rood-groene visuele anomalieën, P-type (type 1) en D-type (type 2) zal kijken. P-type (1 type) en D-type (type 2) lijken iets anders te uitzien in de kleur tint.

Hoe kleur wordt gezien door mensen met kleurenblindheid
Het is duidelijk dat de combinatie van rood en groen, die duidelijk wordt onderscheiden, moeilijk te onderscheiden is. Ik denk dat blauw de meest gebruiksvriendelijke kleur is die iedereen kan begrijpen als ik er zo naar kijk. Er lijkt een reden te zijn waarom de kleur van de link van Google en vele andere belangrijke sites blauw is.

In het geval van een website
U controleren hoe uw website eruitziet in het filter colorblind webpagina.

Hoe ziet de website eruit?
Ik controleerde deze site. Omdat ik monochroom + licht blauw gebruik, zie ik niet veel veranderen. Kijk dan op uw site!

Opmerkingen over het ontwerp
Een kleurenschema dat gemakkelijk te begrijpen is
Controleer eerst of er kleurenschema’s zijn die moeilijk te zien zijn op basis van de calculationbelow en selecteer vervolgens een kleur. Op basis van de waarden 0-255 van rood (R), groen (G) en blauw (B).

Lichtheid verschil
Het helderheids verschil wordt berekend door (R x 299 + G x 587 + B x 114)/1000
Het helderheids verschil is beter dan 125 of meer.
Tint verschil
Het kleurverschil is het verschil tussen de RGB-voorgrondkleur en de achtergrondkleur en de som van de
Het kleurverschil heeft de voorkeur boven 500 of meer.
Controleer mijn kleuren, een site die het kleurenschema controleert

Het is ook goed om een voor een te berekenen… “Controleer mijn kleuren” is een must-see site voor mensen. Het controleert het contrast, het helderheids verschil en het tint verschil. Het is handig omdat het ook de klasse en ID weergeeft van de plaats waar NG uitkwam.

Link vindingrijkheid
Tijdens het lezen van de site over mensen met kleur blindheid, zag ik een ervaring van “Ik weet niet waar ik ben in het rood, zelfs als ik ben gecorrigeerd in een rood in mijn notebook.” Dit geldt ook voor de website, ik denk dat er enkele sites die rood gebruiken voor links en de nadruk op het ontwerp van de site, maar dit is heel gevaarlijk. Voor mensen met kleurenblindheid is het rood-bruin, dus donkerrood zal het niet kunnen identificeren met andere tekst.

Eenvoudig te lezen Koppelings kleuren voor mensen met kleurenblindheid
In een goed voorbeeld is blauw, dat gemakkelijk te onderscheiden is voor mensen met kleurenblindheid, gebruikt met een onderstreping. Ik gebruik groen wanneer ik muis over. Groen ziet er oranje-geel uit voor mensen met een kleur blindheid, zodat je zien dat je in een oogopslag over je heen zweeft. Blauw en groen zijn soortgelijke kleuren, dus het is niet onnatuurlijk om deze kleur te gebruiken bij het zweven. Integendeel, donkerrood wordt meestal gebruikt in een slecht voorbeeld, en bruin wordt gebruikt wanneer mouseover. Bovendien, omdat er geen onderstreping, is het moeilijk te begrijpen waar de link is en of het muis over.

Ze zetten een patroon
Veel kleuren worden vaak gebruikt in het grafiek systeem, zoals staafdiagrammen en cirkeldiagrammen. Echter, het is niet gemakkelijk te begrijpen alleen door het plaatsen van soortgelijke kleuren naast hen of het veranderen van de helderheid en verzadiging.

Voeg patronen toe om ze gemakkelijker te identificeren
Blauw en paars. Twee kleuren die moeilijk te identificeren zijn voor mensen met kleur blindheid zijn naast elkaar. Dan, het bedacht. Laten we een eenvoudig patroon toevoegen aan de ene of de andere. Het is OK met de decoratie van de mate dat veel mensen het niet erg zien. Het kan worden underlyed dat het duidelijk een andere grafiek voor mensen met kleur blindheid alleen door deze.

De naam van een kleur weergeven
Ik droeg kleren die anders waren dan wat ik had verwacht. Het lijkt erop dat er iets is. Laten we bedenken dat we niet zo’n situatie op de EG-site kunnen worden.

Kleurstalen en kleur namen weergeven
Kleurstalen worden vaak gevonden bij het kiezen van de kleur van de EC-site. Omdat het moeilijk is om te begrijpen welke kleur het alleen is, is het gemakkelijk te begrijpen of de naam van de kleur op verschillende plaatsen ernaast wordt weergegeven.

Samenvatting
Ik denk dat het afhangt van het type website, met name communitysites en medische systemen met een breed doelpubliek, de site van het service systeem past de helderheid, contrast, Hue hierboven beschreven, laten we ons richten op een site die kan worden bekeken zonder gevoel stress zelfs een beetje door te testen met behulp van de tool. Met slechts een beetje zorg u een site maken die gemakkelijk te gebruiken is voor mensen met kleurenblindheid. Daarna ontdekte ik dat het kleurenschema dat er goed uitziet en het kleurenschema dat voor alle gebruikers gemakkelijk te gebruiken is verschillend zijn. Vanaf nu zou ik graag willen nadenken over dergelijke punten op het moment van branding, wat het podium voorontwerp is.

Bovendien, hoewel we deze keer gefocust zijn op kleur blindheid, is de barrièrevrije Webontwerpgids heel gemakkelijk te begrijpen hoe je een website maken die rekening houdt met mensen met een visuele handicap. U zien hoe de Voice browser leest de pagina, hoe het te beschrijven om voorzichtig te zijn, en een goed en slecht voorbeeld op de voorbeeldpagina. Ik denk dat ik een artikel te maken… Ik dacht, maar omdat er geen proefversie van de Voice browser lijkt te zijn, maak ik er ook een artikel van, hoewel ik niet heb geprobeerd… In dat, lees dan het artikel “Voice browser Experience record” van degenen die daadwerkelijk ervaren de Voice browser:)

Afgezien
Toen ik dit artikel schreef, herinnerde ik me dat ik parttime werkte in een juwelierswinkel in Canada. Een man zei: “Ik wil haar een ketting geven met haar favoriete groene juweel zoon voor haar verjaardag. Het werd bezocht. We verhuisden naar het ketting gebied en introduceerden de groene juwelen Peridot, Prenite, Turquoise en meer. Echter, veel van de dingen die hij wijst als “Dit is goed” is een oranje juweeltje genaamd citrin. 「? Nou, je bent op zoek naar het in het groen, ben je niet? “Is dit niet groen?” Het spijt me, ik heb een handicap in mijn ogen en ik zie de Green niet. ” Ik was verbaasd over het antwoord, maar vroeg om de grootte, prijs en favoriete ontwerp, en vroeg hen om de groene juwelen te verplaatsen naar een andere lade.

Daarna vond ik er een van, en ik besloot het te koesteren. Op dat moment, ik kan niet vergeten de lijnen die hij getweet terwijl staren naar de ketting die nog niet was verpakt.

“Ik weet niet wat kleur groen is, maar het is haar favoriete kleur, dus ik weet zeker dat ze mooi is…”

Met andere woorden, hij glimlachte met een ietwat gebeuren uitdrukking, zeggende: “het is een prachtige kleur die verfrissend en erg kalm is.”

… Ik heb mijn humeur verloren! Vanaf nu wil ik meer over toegankelijkheid nadenken en een website maken! Gelieve commentaar als je iets om voorzichtig over te zijn!

Referentiesite

Wikipedia – kleurenblindheid
Tips voor het ontwerpen van colorblind-gebruikers
Departement oftalmologie, medische universiteit van Shiga
De Japanse Vereniging van oogheelkunde
Delen
Opmerkingen
34 feedback over “Hoe maak je een website die kleur blindheid neemt”
Van Kato:
Oktober 12, 2010 1:37 pm
Ik ben hier.

Vanaf Shiro:
Oktober 12, 2010 2:13 pm
Toen ik student was, sprak ik met mensen die zeiden: “Ik weet niet wat het verschil is tussen roze en licht blauw,” en ik leerde over de pijn van kleur blindheid. Onlangs werd opgemerkt in de blog dat “rood wordt niet herkend in het overschot”.

Het is heel moeilijk, maar als je dit doen, wil je ermee omgaan.

Vanaf stakaya:
Oktober 12, 2010 2:52 pm
De laatste is een prachtig verhaal.

Van HIROSHI TANIKAWA:
Oktober 12, 2010 3:10 pm
Ik geef voorrang aan de beeld kleur van het bedrijf trouwens, maar het is echt een soort site om zich hiervan bewust te zijn. Het is noodzakelijk om kennis te hebben die beide combineert.
Ik ben naar tranen verhuisd.

Vanaf de Spree:
Oktober 12, 2010 5:32 pm
Ik zal me bewust zijn van het maken van een site die gemakkelijk te begrijpen is, zelfs voor mensen met een handicap. Bedankt voor het leuke artikel.

Van Ken:
Oktober 12, 2010 07:48 pm
Ik schaamde me om te zeggen dat ik zo blind was.
Ik dacht er sterk aan dat ik in de toekomst een site zou overwegen.
Bedankt voor het artikel dat altijd nuttig zal zijn.

Van Amber:
Oktober 12, 2010 8:09 pm
Vroeger deed ik onderzoek in dat gebied, maar als je niet expressief wilt zijn, is er een ruwe maar makkelijke manier om te controleren.

Op kleur blindheid
Geeft aan of de inhoud kan worden gegrepen door de grijswaarden conversie van de pagina. (Of het contrast hoog is)
Geeft u instructies op kleurnaam in de tekst? (Druk op de rode knop, enz.)

Over visuele beperking
Is de ALT van een zinvolle img tag altijd een verklaring bijgesloten? (U hoeft geen niet-belangrijke illustraties te dragen.)
u de inhoud begrijpen door de pagina weer te geven zonder CSS en afbeeldingen te laden? (In Firefox is er een menu-item genaamd “gebruik geen Typogrammen”)

Er zijn een heleboel dingen om voorzichtig te zijn, maar je controleren op een flink aantal problemen met alleen deze controle.
Ik zou heel blij zijn als mensen zoals Web Creator box de toegankelijkheid zouden kunnen dekken.

Leave a Reply

Your email address will not be published. Required fields are marked *