Ingen opplasting, 100% lokalt, ingen konto

WCAG kontrastsjekker

Skriv inn eller velg to farger og se WCAG-kontrastforholdet umiddelbart, med AA/AAA-godkjenningsmerker for normal og stor tekst.

Slik fungerer Kontrastsjekker

Dette verktøyet beregner WCAG-kontrastforholdet mellom to farger og viser om paret oppnår nivå AA eller AAA for normal tekst, stor tekst og ikke-tekstlige grensesnittkomponenter. Alt beregnes lokalt i nettleseren din; fargene du oppgir blir aldri lastet opp.

Skrevet av Bastien Sulyan

Slik bruker du Kontrastsjekker, steg for steg

  1. Angi eller velg forgrunnsfargen (teksten).
  2. Angi eller velg bakgrunnsfargen.
  3. Les kontrastforholdet og AA-/AAA-merkene for normal tekst, stor tekst og ikke-tekstlige grensesnittkomponenter.
  4. Bruk Bytt farger for å sjekke paret motsatt vei.

Vanlige bruksområder

  • Sjekke en merkevares primærfarge mot hvitt eller svart før en knappkomponent lanseres.
  • Bekrefte at dempet grå brødtekst fortsatt oppfyller AA på en lys kortbakgrunn.
  • Bekrefte at en lenkefarge inni et avsnitt når terskelen på 4,5:1 for normal tekst.
  • Teste om en stor, lettere overskrift fortsatt oppfyller den lempeligere terskelen på 3:1 for stor tekst.

Ofte stilte spørsmål

Sender dette verktøyet fargene mine til en server?

Nei, beregningen skjer helt i nettleseren din med JavaScript; ingenting du oppgir blir lastet opp.

Hvilket kontrastforhold trenger jeg for AA eller AAA?

WCAG 2.x krever 4,5:1 for AA ved normal tekst, 7:1 for AAA ved normal tekst, 3:1 for AA ved stor tekst og 4,5:1 for AAA ved stor tekst.

Hva regnes som stor tekst?

Minst 24px (18pt) normal vekt, eller omtrent 18,7px (14pt) fet; alt mindre bruker terskelverdiene for normal tekst.

Hvorfor endres ikke forholdet når forgrunn og bakgrunn byttes?

Formelen for kontrastforholdet er symmetrisk: den sammenligner bare den lyseste og den mørkeste luminansen, ikke hvilken farge som brukes til tekst. Å bytte er likevel nyttig, fordi det viser om paret også fungerer med rollene omvendt, for eksempel mørk tekst på en lys chip mot lys tekst på en mørk chip.

Garanterer en godkjent AA-vurdering at designet mitt er tilgjengelig?

Nei. Kontrast er ett suksesskriterium av mange i WCAG. Fargevalg for personer med fargesynsvansker, synlighet av fokus, tekstforstørrelse og tastaturnavigasjon er egne sjekker; fargeblindhetssimulatoren på dette nettstedet dekker én av dem.

Er dette et offisielt verktøy fra W3C eller WebAIM?

Nei. Det implementerer den offentlige WCAG 2.x-kontrastformelen uavhengig, og er ikke tilknyttet W3C eller noen annen tilgjengelighetsorganisasjon.

Relaterte verktøy

Hold alt lokalt, utforsk komplementære verktøy.

Alle utviklerverktøy