Påbörjad artikel. Byggs ut kontinuerligt.

Grundkrav

WCAG 2.0 nivå AA kräver kontrastratio på minst 4.5:1 för normal text och 3:1 för stor text. Stor text räknas som minst 18.66px (fetad) eller 24px (normal) och större. WCAG skriver även:

Tillfälligt:
Text eller bilder av text som ingår i en inaktiv användargränssnittskomponent, som är ren dekoration, som inte är synliga för någon, eller som ingår i en bild som innehåller väsentligt annat visuellt innehåll, har inget kontrastkrav.

Logotyper:
Text som är en del av en logotyp eller varumärke har inget minimikrav på kontrast.

Förbättrade kontraststandarder

1.4.6 Kontrast (förbättrad): Den visuella presentationen av text och bilder av text har ett kontrastförhållande på minst 7:1, förutom följande: (Nivå AAA)

Stor text:
Storskalig text och bilder av storskalig text har ett kontrastförhållande på minst 4,5:1;

Logotyper:
Text som är en del av en logotyp eller varumärke har inget minimikrav på kontrast.

Klassiska WebAIMs contrast checker använder jag ofta och det finns många fler, men numera är det även inbyggt i dev console.

Grundläggande koncept

Nyans (hue) — Nyans hänvisar till färgen på själva bilden. Nyans är en grad på färghjulet (från 0 till 360 grader) — 0 (eller 360) är röd, 120 är grön, 240 är blå. Det definieras formellt som ”i vilken grad en stimulans kan beskrivas som lik eller olik stimuli som beskrivs som röd, grön, blå och gul” (källa).

Mättnad (saturation) — Färgmättnad hänvisar till färgintensiteten i en bild. När färgen är helt mättad anses färgen vara dess renaste (äkta) version. Mättnad är ett procentuellt värde: 0 % betyder en grå nyans och 100 % är helfärgen. Rena färger är helt mättade.

Luminans (luminance) — intensiteten av ljus som emitteras från en yta per ytenhet i en given riktning. Detta är mätningen av ljusstyrka, med en skala från vitt till svart. Luma (%) är intensiteten hos den akromatiska signalen som bidrar till vår färguppfattning. Ett mättnadsvärde på 0 indikerar mestadels grått medan 100 % ljusstyrka (eller L = 255) är vitt.

Intensitet (intensity) — Intensitet avser renheten hos en nyans. Den högsta intensiteten eller renheten hos en nyans är nyansen som den visas i spektrumet eller på färghjulet. En nyans som är reducerad i intensitet kallas en ton.

Nyans (tint) — En nyans är ett blandningsresultat av en originalfärg där vitt har lagts till. En nyans är ljusare än den ursprungliga färgen.

Nyans (shade) — En nyans är ett blandningsresultat av en originalfärg där svart har lagts till. En nyans är mörkare än den ursprungliga färgen.

Ton (tone) — Ton är ett resultat av att blanda en ren färg med valfri neutral/gråskala färg, inklusive de två ytterligheterna vit och svart. En ton skapas antingen genom blandning av en färg med grått, eller genom både toning och skuggning.

Chroma — Kvaliteten på en färgs renhet, intensitet eller mättnad. Med andra ord är chroma den upplevda styrkan hos en ytfärg, graden av visuell skillnad från en neutral grå med samma ljushet.

Ljusstyrka (Brightness/Lightness) — Ljusstyrka som i brightness är den relativa ljusheten eller mörkheten för en viss färg, från svart (ingen ljusstyrka) till vitt (full ljusstyrka). Ljuststyrka som i lightness är en procentsats; 0% är svart, 100% är vit.

Färgkontrast (Color Contrast) — Skillnaden i luminans mellan två närliggande färger eller överlagrade färger (förgrund/bakgrund).

Dynamiskt omfång (Dynamic Range) — Förhållandet mellan de största och minsta värdena som en viss kvantitet kan anta. För färgkontrast är detta skillnaden mellan den ljusaste luminansen och den mörkaste luminansen. Det tar tid för ögonen att anpassa sig till olika ljusnivåer, så designers måste ta hänsyn till det dynamiska omfånget för det mänskliga ögat som tillämpas på digitala skärmar.

Optisk bländning (Optical Glare) — Bländning orsakas av ett betydande förhållande mellan luminansen mellan objekt och bländningskällan. Detta kan även gälla digitala och tryckta källor, varvid reflekterat ljusare ljus gör det svårare för det mänskliga ögat att urskilja närliggande föremål. Du kan också tillämpa detta koncept på skärmbländning, som vad som händer när du använder en bärbar dator utomhus.

Färgkontrastförhållande (Color Contrast Ratio) — En egenskap hos ett digitalt displaysystem definierat som förhållandet mellan luminansen för den ljusaste färgen (vit) och den för den mörkaste färgen (svart) som systemet kan producera. Ett högt kontrastförhållande är en önskad aspekt av alla skärmar.

Human Eye Dynamic Range — Det dynamiska omfånget för det mänskliga ögat är cirka 20 stopp, eller 1 000 000:1. Kontrastkänsligheten hos det mänskliga ögat är störst när detaljfrekvensen i en scen är cirka 4 cykler per grad (källa).

Beräkna kontrastratio

Kontrastförhållanden kan variera från 1 till 21 (vanligtvis skrivet 1:1 till 21:1).

Contrast ratio = (L1 + 0,05) / (L2 + 0,05), varvid:

L1 är den relativa luminansen för den ljusare av färgerna, och
L2 är den relativa luminansen för den mörkare av färgerna.

kirilloid har översatt luminansberäkningen till:

function luminance(r, g, b) {
    var a = [r, g, b].map(function (v) {
        v /= 255;
        return v <= 0.03928
            ? v / 12.92
            : Math.pow( (v + 0.055) / 1.055, 2.4 );
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}

Man kan också beräkna med PHP. (även https://dev.to/alvaromontoro/building-your-own-color-contrast-checker-4j7o)

https://medium.muz.li/the-ultimate-ux-guide-to-color-design-4d0a18a706ed

Författare: Erik

Erik har jobbat med webb professionellt sedan 2008. Från 2005 till 2008 studerades webb på ING/JTH och dessförinnan skapades webb på all fritid. Första sajten byggdes någon gång mellan 1996-1998. Visa alla inlägg av Erik