Idag är det allt vanligare att sidor har möjlighet att sätta dem i mörkt läge, eller direkt basera sin estetik på svarta eller högkontrastfärger, men de allra flesta människor fortsätter att använda rena färger för att implementera denna typ av stilar till din webb.
Med ren färg hänvisar vi till de som inte har någon blandning av grått i sin konstitution, det vill säga när de har maximal mättnad, som vit (#fff) eller svart (#000).
Enligt nyare studier har man upptäckt att skillnaden i kontrast mellan dessa kan orsaka visuell trötthet, och som designers måste vi försöka minska denna skada så mycket som möjligt.
Så mycket som dessa färger genererar mycket kontrast mellan dem och visuellt kan vi tycka att det är korrekt, vitt har 100% ljusstyrka och svart 0%, denna skillnad gör att ögonen måste arbeta mer för att anpassa sig till kontrasten och sedan långa stunder framför datorn kan generera spänningar i våra ögon och kan överstimulera vår syn.
Så vad ska vi göra?
Istället för att använda vitt på svart eller vice versa, rekommenderas det att använda färgvarianter som inte matchar tonen, det vill säga istället för att använda rent svart (#000) för bakgrunden kan vi använda en mörkgrå ton, till exempel ( #121212), och istället för att använda rent vit (#fff) för texten kan du använda en ljusgrå nyans (#ececec).
Vi ska inte bara vara försiktiga med dessa två färger, att använda för mättade toner ovanpå för mörka toner kan också orsaka konflikter, så vi måste alltid se till att färgerna inte är för “neon” eller “fluorescerande”.
På så sätt kommer vi att uppnå att kontrasten inte blir för hög och att användaren kan spendera mer tid framför skärmen.
Kontrast balanserade bättre än hög kontrast
Självklart vet vi att en hög kontrast mellan färgerna på din sida förbättrar läsbarheten och tillgängligheten, men vi har också sett att för mycket kontrast i slutändan kan orsaka alla problem som vi försöker undvika med detta.
Därför måste vi alltid upprätthålla balansen mellan tonerna och när vi har några tvivel kan vi kontrollera det med en kontrastkorrigerare som Contrast Checker – WebAIM.
Jag hoppas att du har funnit det användbart!