Operațional
Verificator de contrast de culoare
Publicitate
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
Introduceți mai jos combinațiile de culori pentru a le testa cu ajutorul nostru de verificare a contrastului de culori și pentru a vedea instantaneu dacă îndeplinesc standardele de accesibilitate.
Cum funcționează verificatorul nostru de contrast de culoare
Introdu culorile din prim-plan și fundal folosind valorile hexagonale RGB sau alege-le direct cu Color Picker.
Poți:
- Ajustează Alpha pentru a schimba cât de transparentă este culoarea din prim-plan.
- Folosește sliderul Lightness pentru a face culoarea să pară mai deschisă sau mai închisă.
Instrumentul nostru calculează apoi raportul de contrast și îl compară cu ghidurile WCAG:
- WCAG 2.0 Nivelul AA
- Cel puțin 4,5:1 pentru textul corpului normal
- Cel puțin 3:1 pentru text mare
- WCAG 2.1 (Interfață și grafică)
- Cel puțin 3:1 pentru icoane, margini și alte componente de interfață
- WCAG Nivel AAA
- Cel puțin 7:1 pentru text normal
- Cel puțin 4,5:1 pentru text mare
Text mare înseamnă fie:
- 14 puncte (aproximativ 18,66 px) și îngroșat, sau
- 18 puncte (aproximativ px) sau mai mult
Poți folosi pipeta din Color Picker pentru a prelua culori exacte de pe orice de pe ecran. Face ușor testarea designurilor reale, butoanelor sau fundalurilor.
Pentru linkuri care se bazează doar pe culoare pentru a ieși în evidență, folosește verificatorul nostru de contrast de culoare pentru a te asigura că respectă standardele de accesibilitate și rămân ușor de citit pentru toată lumea.