Contrast Checker beräknar WCAG 2.1-kontrastförhållandet mellan två färger och betygsätter dem mot AA/AAA-trösklarna för både normal och stor text. Live-förhandsvisning visar text renderad i de valda färgerna, och en knapp för att "hämta sidbakgrund" samplar den aktuella sidan.
Tillgänglighet blir alltmer ett krav — WCAG-efterlevnad är ett lagkrav i många jurisdiktioner, och även där det inte är det stöter dålig kontrast bort användare. Contrast Checker berättar direkt om två färger uppfyller WCAG-standarderna. Välj en förgrunds- och bakgrundsfärg via färgväljaren eller klistra in hexvärden; verktyget beräknar kontrastförhållandet enligt den officiella WCAG-luminansformeln och betygsätter det mot fyra trösklar: AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1) och AAA stor (≥4,5:1). Varje tröskel visar en tydlig Pass/Fail-märkning. En live-förhandsvisning renderar stor och normal text i de valda färgerna så att du ser den faktiska visuella effekten. En bekvämlighetsknapp samplar den aktuella sidans body-bakgrund — användbart när du kontrollerar om en färgkombination på en riktig sajt godkänns. Allt körs lokalt i din webbläsare, inga uppladdningar.
Använder den officiella WCAG-luminansformeln för att beräkna kontrastförhållandet. Resultatet är exakt och matchar varje kompatibel tillgänglighetskontroll.
Pass/fail för AA normal (≥4,5:1), AA stor (≥3:1), AAA normal (≥7:1), AAA stor (≥4,5:1) — allt visat som ett rutnät.
Renderar faktisk stor och normal text i dina valda färger så du ser den visuella effekten tillsammans med det numeriska förhållandet.
Ett klick samplar den aktuella sidans beräknade body-bakgrundsfärg — användbart för att testa verkliga kombinationer.
Skriv ett hexvärde eller använd den inbyggda färgväljaren. Värdena synkroniseras i båda riktningarna när du redigerar endera.
Ett klick byter plats på förgrund och bakgrund — användbart vid kontroll av inverterade teman eller hover-tillstånd.
Innan du fastställer en färgpalett, kontrollera varje textfärg mot sin bakgrund för att säkerställa WCAG AA-efterlevnad — undviker omarbete senare.
Använd "hämta sidbakgrund" på en live-sajt, klistra sedan in den faktiska textfärgen — hitta a11y-brister på några minuter utan att öppna Lighthouse.
När ett varumärke väljer en färg som riskerar att underkännas i a11y, använd kontrollverktyget för att hitta närmaste godkända variant (mörkare/ljusare nyans).
Verifiera att färger för hover-, aktiva och inaktiverade tillstånd fortfarande uppfyller kontrastkraven, inte bara standardläget.
Mörka teman misslyckas ofta med kontrast för grå-på-grå-text. Kontrollera dina mörkaste gråtoner mot dina mörkaste bakgrunder för att fånga dessa.
Klicka på Contrast-ikonen i DevSuite Pro-dockan. En panel öppnas med fält för förgrunds- och bakgrundsfärg.
Använd färgväljaren eller klistra in ett hexvärde för vardera. Live-förhandsvisningen uppdateras när du ändrar färger.
Det stora talet (t.ex. 4,8:1) är kontrastförhållandet. Högre är bättre. 3 är absoluta minimum; 4,5 är målet för normal text.
Pass/fail-märken för AA och AAA, normal och stor textstorlek, visar på en blick vad din kombination klarar av.
Vid underkänt resultat, justera färgerna. Mörka förgrunden eller ljusa bakgrunden (eller tvärtom) tills målnivån visar Pass.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
