Färgkontrastkontroll

Alla verktyg
Färgkontrastkontroll
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.

Dela
Relaterade verktyg
Färgblindhetssimulator

Se din bild eller palett som personer med protanopi, deuteranopi, tritanopi eller akromatopsi ser den — körs helt i din webbläsare, inget laddas upp.
Färgkodsomvandlare

Konvertera färger mellan HEX, RGB, RGBA, HSL, HSLA och HSV — välj en färg, justera alfa och kopiera vilket format som helst direkt.
Palettexportör

Klistra in eller importera en uppsättning färger och exportera dem direkt till CSS-variabler, SCSS, Tailwind-config, JSON eller SVG-provlappar — avslutningssteget för vilken palett som helst.
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

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