Färgkontrastkontroll

Kontrollera förgrunds-/bakgrundskontrasten mot WCAG AA och AAA. Se förhållandets uppdatering när du väljer färger.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Kontrollera förgrunds-/bakgrundskontrasten mot WCAG AA- och AAA-riktlinjerna.
Körs i din webbläsare
Gratis att använda

Så använder du

Välj text (förgrund) och bakgrundsfärger.
Läs av kontrastförhållandet och AA/AAA-resultaten.
Justera tills du klarar din målnivå.

How this tool works

Välj text (förgrund) och bakgrundsfärger.
Läs av kontrastförhållandet och AA/AAA-resultaten.
Justera tills du klarar din målnivå.

Recommended settings

Använd först standardalternativen och justera sedan om det behövs

Supported formats

Text / on-page input

File size and limits

Mycket komplexa förhandsvisningar i flera lager kan kännas långsammare på äldre telefoner.

Privacy

Färg- och CSS-generatorer körs helt i din webbläsare. Förhandsvisningar och konverteringar laddar aldrig upp dina stilar.

Common use cases

Använd Color Contrast Checker när du behöver: Kontrollera förgrunds-/bakgrundskontrasten mot WCAG AA- och AAA-riktlinjerna.

Troubleshooting

Förhandsgranskningen ser annorlunda ut efter inklistring

Kontrollera om det finns konkurrerande CSS på din sida (återställningar, ärvda färger). Kopiera den genererade regeln till en isolerad stilmall först.

FAQ

Laddar detta upp min CSS?

Nej. Generatorer och omvandlare körs i din webbläsare med liveförhandsvisning.

Behöver jag ett konto?

Nej. Öppna verktyget, justera kontrollerna och kopiera CSS.