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 dvs. de culori pentru a le testa cu ajutorul verificatorului nostru de contrast de culoare și pentru a vedea instantaneu dacă îndeplinesc standardele de accesibilitate.
Cum funcționează Verificatorul nostru de contrast de culoare
Introduceți culorile prim-planului și fundal folosind valori hexadecimale RGB sau alegeți-le direct cu Selectorul de culori.
- Ajustați Alfa pentru a schimba cât de transparentă este culoarea primului plan.
- Folosiți glisorul Luminozitate pentru a face culoarea să pară mai deschisă sau mai întunecată.
Instrumentul nostru calculează apoi raportul de contrast și îl verifică în raport cu regulile WCAG:
- WCAG 2.0 Nivel AA
- Cel puțin 4.5:1 pentru textul normal
- Cel puțin 3:1 pentru text mare
- WCAG 2.1 (UI și grafică)
- Cel puțin 3:1 pentru pictograme, chenare și alte componente ale interfeței
- Nivel AAA WCAG
- Cel puțin 7:1 pentru text normal
- Cel puțin 4.5:1 pentru text mare
Text mare înseamnă:
- 14 pt (aproximativ 18,66 px) și aldine sau
- 18 pt (aproximativ px) sau mai mare
Puteți folosi picuratorul din Selectorul de culori pentru a obține culorile exacte din orice de pe ecran.
Pentru link-urile care se bazează doar pe culoare pentru a ieși în evidență, utilizați verificatorul de contrast de culoare pentru a vă asigura că îndeplinesc standardele de accesibilitate și sunt ușor de citit pentru toată lumea.