Färgkontrastkontroll

Kontrollera kontrasten för vanlig och stor text mellan förgrunds- och bakgrundsfärger.

Färgkontrastkontroll

Ett resultat i webbläsaren för planering och referens.

FörgrundBakgrund

CSS / HEX

GUIDE

Vad du bör kontrollera innan du använder det

När det här verktyget är användbart

Använd detta innan du publicerar förgrunds- och bakgrundsfärger för brödtext, etiketter eller knappar. Ange två HEX-färger för att se deras kontrastförhållande och resultaten för trösklarna för normaltext och stor text.

Hur resultatet beräknas

Beräkningen lineariserar sRGB-kanalerna, härleder relativ luminans och dividerar den ljusare luminansen plus 0.05 med den mörkare luminansen plus 0.05. Den jämför förhållandet med texttrösklarna 3:1, 4.5:1 och 7:1.

Exempel och tolkning

Att ange förgrund #111111 på bakgrund #FFFFFF ger en hög kvot. Kontrollera först AA normal för liten brödtext; för en kombination avsedd för stora rubriker, läs även AA large-resultatet.

Omfattning och begränsningar

Att få en ratio är inte detsamma som att klara en tillgänglighetsgranskning. Testa verklig textstorlek och vikt, interaktiva tillstånd, text ovanpå bilder och all information som endast kommuniceras med färg.

Vanliga fragor

Hur flyttar jag en färg från färgkontrastkontrollen till en annan app?

Använd kopieringsknappen under resultatet för att kopiera CSS-, HEX- eller HSL-text. Bekräfta att målappen tolkar samma färgformat.

Kommer en skärmfärg från färgkontrastkontrollen att matcha utskrift?

Inte automatiskt. Emissiva RGB-skärmar och reflekterande papper och bläck använder olika färgrymder och blandningsmodeller, så utskriftsprofiler och provtryck behövs fortfarande.

Kan jag godkänna en design token enbart med färgkontrastkontrollen?

Använd den som kandidat, och testa sedan riktig bakgrund, mörkt läge, interaktiva tillstånd och textkontrast innan du namnger och godkänner en token.