Farvekontrastkontrol
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
WCAG Compliance
Normal Text
Large Text (18pt+ or 14pt+ bold)
UI Components & Graphics
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
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.
API-dokumentation kommer snart
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.