What is the minimum contrast ratio for WCAG AA compliance?

For WCAG AA compliance, normal text requires a minimum contrast ratio of 4.5:1, while large text (18pt or 14pt bold) requires 3:1.

What is the difference between WCAG AA and AAA standards?

WCAG AAA requires higher contrast ratios: 7:1 for normal text and 4.5:1 for large text, compared to AA's 4.5:1 and 3:1 respectively.

How do I fix poor color contrast?

Use our automatic fix feature to adjust either text or background colors while maintaining your design intent, or manually adjust colors using HSL sliders with visual indicators showing optimal zones for AA/AAA compliance.

What are the visual indicators on the adjustment sliders?

The green zones and AA/AAA markers show optimal ranges for achieving WCAG compliance. The direction hints (Lighter/Darker) guide you toward better contrast based on your current color combination.

Can I test custom color combinations?

Yes, you can enter any hex color codes or use the color picker to select custom colors. The URL updates automatically so you can share specific color combinations.

Color Contrast Checker - WCAG AA & AAA Compliance Tool

1.00:1

Kontrast

Fail

Mycket dålig

Normal text

AA (4.5:1)

✖

AAA (7:1)

✖

Stor text

AA (3:1)

✖

AAA (4.5:1)

✖

Textfärg

#FFFFFF

#ffffff

Bakgrundsfärg

#546E7A

#546e7a

Snabba åtgärder

Förhandsgranskningstitel

Den snabba bruna räven hoppar över den lata hunden

Exempel på liten text (12px)

Text

#ffffff

Bakgrund

#546e7a

WCAG-standarder

Level AA

Minsta kontrastförhållande på {/* LOCKED_PATTERN_9d9af93de94845e423615e888dbf354f */} för normal text och 3:1 för stor text. Krävs för de flesta webbplatser.

Level AAA

Förbättrat kontrastförhållande på 7:1 för normal text och {/* LOCKED_PATTERN_9d9af93de94845e423615e888dbf354f */} för stor text. Rekommenderas för optimal tillgänglighet.

Otillräcklig kontrast för alla textstorlekar - uppfyller inte WCAG-standarder.

Färgkontrastkontroll

Beräkna kontrastförhållandet mellan text och bakgrundsfärger.

Välj en färg med färgväljaren för text och bakgrundsfärg eller ange en färg i RGB-hexadecimal format (t.ex. #259 eller #2596BE). Du kan justera skjutreglaget för att välja färg. Webbinnehållstillgänglighetsriktlinjerna (WCAG) har en specifik riktlinje för att avgöra om text är läsbar för seende användare. Dessa kriterier använder en särskild algoritm för att kartlägga färgkombinationer till jämförbara förhållanden. Enligt denna formel anger WCAG att en {/* LOCKED_PATTERN_9d9af93de94845e423615e888dbf354f */} färgkontrast förhållande med text och bakgrund är tillräckligt för vanlig (brödtext), och stor text (18+ pt vanlig, eller 14+ pt fetstil) bör ha minst ett 3:1 färgkontrastförhållande.

Viktiga funktioner

• Beräkning av kontrastförhållande i realtid
• Kontroll av WCAG AA & AAA-efterlevnad
• HSL-reglage för finjustering
• Flera förhandsgranskningsformat

Avancerade verktyg

• Automatisk färgkorrigering
• Text- och bakgrundsexempel
• Färgnamnsdetektion
• Exportera resultat