Verificator de contrast de culoare
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
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.
Documentația API va fi disponibilă în curând
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.
