Hoppa till innehållet
Kom igång

Kontroll av färgkontrast

Do4U kontrollerar kontrasten i dina varumärkes- och webbplatsfärger. Du anger dina färger, en per rad, och säger vad varje färg används till: text, bakgrund, accent (till exempel en knapp) eller ram. Koden beräknar kontrastförhållandet för varje par med WCAG-formeln och visar vilka nivåer det når: AA och AAA för normal och stor text, och 3:1 för ramar, ikoner och knappytor. Värdena avrundas inte uppåt. För varje par som inte klarar kraven får du den närmaste färgen som klarar dem, en gång mörkare och en gång ljusare, i samma nyans. Do4U bygger också en justerad palett och kontrollerar den igen som helhet. Du exporterar paletten som CSS custom properties, SCSS-variabler eller JSON, och exporten görs i din webbläsare. Allt körs i kod, utan AI, och det är gratis.

Testa nu Priser

Gratis och utan konto: Kalkylator för kontrastförhållande →

Vem det är till för

För designer, utvecklare, byråer och webbplatsägare som väljer varumärkesfärger eller bygger en stilguide och vill ha text och knappar som alla kan läsa.

Typiska användningar

  • Kontrollera en ny varumärkespalett innan designarbetet börjar
  • Hitta en grå nyans för sekundär text som fortfarande klarar AA
  • Kontrollera knapp-, länk- och ramfärger mot sidans bakgrund
  • Exportera de justerade färgerna som CSS-variabler till din stilmall

Exempel

Inmatning

#1a1a1a text #777777 text Secondary #ffffff background #cccccc border

Resultat

#1a1a1a på #ffffff: 17.4:1, klarar AA och AAA #777777 på #ffffff: 4.47:1, klarar inte AA för normal text (klarar för stor text). Mörkare: #767676 → 4.54:1. Ljusare: inte möjligt #cccccc på #ffffff: 1.6:1, klarar inte icke-textkontrasten på 3:1. Mörkare: #949494 → 3.03:1 Export (justerad): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Ett fast exempel, förkortat. Riktiga resultat är AI-genererade: kontrollera dem.

Pris och gränser

Pris
gratis, upp till 30 kontroller per dag
Tillgängligt med
Gratis, Med paket
Inmatningsgräns
Upp till 3 000 tecken per fil

Integritet

Behandlas på våra egna servrar i EU (Polen). Inmatningar och resultat raderas efter 7 dagar (Gratis) eller 30 dagar (paket), eller direkt efter att du har sett resultatet om du väljer att inte spara dem. Bilder raderas direkt efter bearbetningen.

I API:et

Verktygsnamn: contrast_check. Skapa ett jobb med POST /api/v1/jobs och hämta resultatet med GET /api/v1/jobs/{id}. Du hittar din API-nyckel i ditt konto.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Fullständig API-dokumentation →

Frågor och svar

Hur beräknas kontrastförhållandet?

Med formeln i WCAG 2.2: först den relativa luminansen för varje färg, sedan (L1 + 0.05) / (L2 + 0.05), där L1 är den ljusare färgen. Resultatet ligger mellan 1:1 och 21:1. Värdena jämförs utan avrundning, så 4.49:1 når inte 4.5:1, och visningen avrundar aldrig uppåt.

Vilka par kontrolleras?

Text kontrolleras på varje bakgrund och på accentfärger, mot 4.5:1 och 7:1 för normal text och 3:1 och 4.5:1 för stor text. Accent- och ramfärger kontrolleras på bakgrunden mot 3:1 för icke-textkontrast. En färg utan roll jämförs med alla andra färger.

Hur hittas de föreslagna färgerna?

Bara ljusheten ändras, i färgrymden OKLCH; nyansen förblir densamma. Do4U letar efter den närmaste färgen som klarar kraven, en gång mörkare och en gång ljusare, och kontrollerar den igen som hexkod. Om ingen färg kan klara kraven mot en bakgrund säger verktyget det.

Sparas min text?

Bara så länge det behövs: 7 dagar med Free, 30 dagar med ett paket – eller inte alls om du väljer att inte spara den. Behandlingen sker på våra egna servrar i EU (Polen).

Kan jag använda resultatet direkt?

Resultaten är AI-genererade. Läs igenom dem innan du publicerar eller skickar dem.

Relaterade verktyg

  • Tillgänglighetskontroll

    Kontrollerar en sida efter vanliga hinder och förklarar hur du åtgärdar dem.

  • Designfeedback från en skärmbild

    Ladda upp en skärmbild av en sida eller app och få numrerade, konkreta iakttagelser om knappstorlek, kontrast, text i bilder, hierarki och avstånd, var och en med en ram på bilden. En AI-bedömning, inte en mätning.

  • Alternativtexter

    Korta bildbeskrivningar för skärmläsare och sökmotorer.

Alla verktyg →