Mät WCAG-kontrasten mellan två färger

Med Färgkontrast kan designers och frontendutvecklare bedöma färger före godkännande av tillgängligheten. Mät WCAG-kontrasten mellan två färger.

Mät WCAG-kontrasten mellan två färger. Du kan använda det gratis i webbläsaren utan konto och granska resultatet innan du går vidare.

Så använder du

Ange bakgrundsfärgen, till exempel som en hexadecimal kod.
Lägg till text- eller elementfärgen du vill jämföra med bakgrunden.
Kör kontrollen för att få kontrastförhållandet mellan de två färgerna.
Läs WCAG-trösklarna som visas för normal text, stor text och gränssnittselement.
Testa ett annat färgpar om det första resultatet inte uppfyller dina behov.

Exempel

Exemplet jämför en mörk färg med en ljus. Verktyget beräknar kontrastförhållandet och visar relevanta WCAG-trösklar. Kontrollera om förhållandet räcker för normal text, stor text eller gränssnittselement, och testa sedan ett annat par om ditt designsystem tillåter det. Resultatet hjälper dig att bestämma innan publicering.

Indata

#0F172A
#FFFFFF

Gränser och format

Verktyget jämför två färger, inte den verkliga läsbarheten i en bild eller ett foto.
Transparens, gradienter och överlägg representeras inte alltid.
Ett bra förhållande ensamt validerar inte alla tillgänglighetsaspekter på en sida.
Kontrollera färger för hover-, aktiv- och inaktiverat tillstånd separat.
Visade värden bör tolkas utifrån textstorlek och syfte.

Var bearbetningen sker

All kontrastberäkning körs i din webbläsare. Färgkoderna du anger stannar på din enhet och skickas inte någonstans. Resultatet visas direkt efter kontrollen. Du kan rensa fälten eller stänga fliken utan att dessa värden sparas.

Vanliga frågor

Vilket förhållande bör jag sikta på för brödtext?

WCAG-trösklar beror på textstorlek och syfte. För normal text kräver nivå AA vanligtvis högre kontrast än för stor text. Läs vägledningen som visas av verktyget för ditt specifika fall och kontrollera varje textstil separat.

Kan jag använda färgnamn som röd eller blå?

Fältet förväntar sig värden som verktyget kan läsa, särskilt hexadecimala färgkoder. Om ett namn inte känns igen, ersätt det med motsvarande hexadecimala kod och kör kontrollen igen.

Kontrollerar verktyget kontrast på en skärmdump?

Nej, det beräknar kontrast mellan två angivna färger. Det läser inte en bild eller en hel sida. För en mockup, notera färgkoderna som används och testa varje viktigt par separat.