Operationel
Farvekontrastkontrol
Reklame
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Indtast dine farvekombinationer nedenfor for at teste dem med vores farvekontrastkontrol og se med det samme, om de opfylder tilgængelighedsstandarderne.
Sådan fungerer vores farvekontrastkontroller
Indtast dine forgrunds- og baggrundsfarver med RGB-hex-værdier, eller vælg dem direkte med Color Picker.
Du kan:
- Juster Alpha for at ændre, hvor gennemsigtig forgrundsfarven er.
- Brug lyshedsskyderen for at få farven til at se lysere eller mørkere ud.
Vores værktøj beregner derefter kontrastforholdet og tjekker det mod WCAG-retningslinjerne:
- WCAG 2.0 Niveau AA
- Mindst 4,5:1 for normal teksttekst
- Mindst 3:1 for store tekster
- WCAG 2.1 (UI & grafik)
- Mindst 3:1 for ikoner, kanter og andre interfacekomponenter
- WCAG Level AAA
- Mindst 7:1 for almindelig tekst
- Mindst 4,5:1 for stor tekst
Stor tekst betyder enten:
- 14 point (ca. 18,66 px) og fed, eller
- 18 point (omtrent px) eller større
Du kan bruge pipettelen i farvevælgeren til at hente præcise farver fra alt på din skærm. Det gør det nemt at teste rigtige designs, knapper eller baggrunde.
For links, der kun bruger farve for at skille sig ud, brug vores farvekontrasttjekker for at sikre, at de opfylder tilgængelighedsstandarder og forbliver lette at læse for alle.