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 farvekontrastkontrol
Indtast dine forgrunds-- og baggrundsfarver ved hjælp af RGB-hex-værdier, eller vælg dem direkte med Farvevælgeren.
- Juster Alpha for at ændre, hvor gennemsigtig forgrundsfarven er.
- Brug skyderen Lyshed for at få farven til at se lysere eller mørkere ud.
Vores værktøj beregner derefter kontrastforholdet og kontrollerer det i forhold til WCAG retningslinjer:
- WCAG 2.0 niveau AA
- Mindst 4.5:1 for normal brødtekst
- Mindst 3:1 for stor tekst
- WCAG 2.1 (UI og grafik)
- Mindst 3:1 for ikoner, kanter og andre grænsefladekomponenter
- WCAG niveau AAA
- Mindst 7:1 for normal tekst
- Mindst 4.5:1 for stor tekst
Stor tekst betyder enten:
- 14 pt (ca. 18,66 px) og fed, eller
- 18 pt (ca. px) eller større
Du kan bruge pipetten i farvevælgeren til at fange nøjagtige farver fra alt på din skærm.
For at få links, der er afhængige af, at farver alene skiller sig ud, skal du bruge vores farvekontrastkontrol for at være sikker på, at de opfylder tilgængelighedsstandarderne og forbliver lette at læse for alle.