Operasjonell
Fargekontrastkontroll
Annonse
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
Skriv inn fargekombinasjonene dine nedenfor for å teste dem med vår fargekontrastkontroll og se umiddelbart om de oppfyller tilgjengelighetsstandarder.
Slik fungerer fargekontrastkontrollen vår
Skriv inn forgrunn og bakgrunnsfarger ved hjelp av RGB-hex-verdier, eller velg dem direkte med Fargevelgeren.
- Juster Alpha for å endre hvor gjennomsiktig forgrunnsfargen er.
- Bruk Lyshet-glidebryteren for å få fargen til å se lysere eller mørkere ut.
Verktøyet vårt beregner deretter kontrastforholdet og kontrollerer det mot WCAG-retningslinjene:
- WCAG 2.0 nivå AA
- Minst 4.5:1 for normal brødtekst
- Minst 3:1 for stor tekst
- WCAG 2.1 (UI og grafikk)
- Minst 3:1 for ikoner, rammer og andre grensesnittkomponenter
- WCAG-nivå AAA
- Minst 7:1 for normal tekst
- Minst 4.5:1 for stor tekst
Stor tekst betyr enten:
- 14 pkt (ca. 18,66 px) og fet, eller
- 18 pkt (omtrent px) eller større
Du kan bruke pipet i fargevelgeren for å hente nøyaktige farger fra hva som helst på skjermen.
For lenker som er avhengige av farger alene for å skille seg ut, bruk vår fargekontrastkontroll for å være sikker på at de oppfyller tilgjengelighetsstandarder og forblir enkle å lese for alle.