Kontrollera WCAG-kontrastvärdet mellan en text- och bakgrundsfärg — se AA/AAA godkänd/underkänd för normal text, stor text och UI-komponenter, med live-förhandsgranskning och tillgängliga färgförslag.

Textfärg
Ton
Bakgrundsfärg
Ton
Kontrastvärde
--:1
Normal text
Brödtext under 18px (eller under 14px fet)
AA AAA
Stor text
18px+ normal, eller 14px+ fet
AA AAA
UI-komponenter
Ikoner, kanter, formulärkontroller och grafik
AA AAA
Live-förhandsgranskning

The quick brown fox

Stor text läses bekvämt när kontrasten är tillräcklig.

Det här är ett exempelstycke med normal brödtext. God färgkontrast håller ditt innehåll läsbart för alla, inklusive personer med nedsatt syn eller färgblindhet. en exempellänk.

Liten text och bildtexter är svårast att läsa — de behöver mest kontrast.
Exempelknapp Exempelknapp
Förslag

Allt beräknas live i din webbläsare med WCAG 2.x relativ luminansformel — inga uppladdningar, ingen registrering, helt gratis.


Om Färgkontrastkontroll

Kontrastkontrollen mäter WCAG-kontrastförhållandet mellan en textfärg och en bakgrundsfärg och betygsätter sedan paret mot tillgänglighetsnivåerna AA och AAA för normal text, stor text och gränssnittskomponenter. Förhållandet och varje godkänt/underkänt-omdöme uppdateras i realtid när du justerar någon av färgerna.

En realistisk förhandsvisningspanel renderar rubriker, brödtext, finstilt text, en knapp och en länk i din valda kombination, så att du kan bedöma läsbarheten med verkligt innehåll istället för abstrakta kulörer. Om ett par underkänns föreslår verktyget den närmaste tillgängliga textfärgen som når AA-tröskeln 4,5:1, redo att tillämpas med ett klick.

Matematiken följer WCAG 2.x-formeln för relativ luminans och körs helt i din webbläsare — inget laddas upp och kontrollerna är gratis. Du kan även kopiera en kompakt textrapport av förhållandet och betygen att klistra in i en tillgänglighetsgranskning eller en pull request.

Så använder du Färgkontrastkontroll

  1. Ange din textfärg och bakgrundsfärg med väljarna eller genom att skriva in värden.
  2. Läs kontrastförhållandet och AA/AAA-resultaten för normal text, stor text och gränssnittskomponenter.
  3. Granska förhandsvisningen i realtid för att se verkliga rubriker, stycken, knappar och länkar i dina färger.
  4. Om paret underkänns, tillämpa den föreslagna tillgängliga textfärgen eller byt plats på de två färgerna.
  5. Klicka på "Kopiera rapport" för att dela förhållandet och efterlevnadsresultaten.

Vanliga frågor

WCAG AA kräver 4,5:1 för normal text och 3:1 för stor text och gränssnittskomponenter som ikoner och formulärramar. Den striktare AAA-nivån kräver 7:1 för normal text och 4,5:1 för stor text.

Text på 18px eller större med normal vikt, eller 14px och större i fetstil. Eftersom stora glyfer är lättare att urskilja tillåter WCAG dem ett lägre kontrastförhållande på 3:1 på nivå AA.

Ja. Varje kontroll beräknas direkt i din webbläsare med hjälp av WCAG-formeln för relativ luminans, utan registrering, användningsgräns eller kostnad.

Använd den inbyggda förslagsfunktionen: verktyget hittar den närmaste varianten av din textfärg som klarar AA mot den aktuella bakgrunden och låter dig tillämpa den direkt. Om ingen variant av textfärgen klarar testet, justera bakgrunden istället.

Det täcker kriterierna för färgkontrast, som är bland de vanligaste tillgänglighetsbristerna, men inte allt. Du bör fortfarande kontrollera fokustillstånd, informationens oberoende av färg, teckenstorlekar och hur paletten håller under simulering av färgblindhet.

Nej. De två färgerna, förhållandet och förslagen beräknas helt lokalt i din webbläsare — sidan gör inga serveranrop medan du arbetar.


Populära sökningar
kontrollera färgkontrast wcag kontrastförhållande tillgänglig kontrastkontroll kontrastkontroll för text aa aaa kontrasttest kontrollera färgkontrast online
Behöver du hjälp?
Hittade du ett problem med det här verktyget? Berätta för oss.
Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.