Operacional
Inicia la sessió / Registra't
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Comprovador de contrast de color
Anunci
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
Introduïu les vostres combinacions de colors a continuació per provar-les amb el nostre verificador de contrast de colors i veure a l'instant si compleixen els estàndards d'accessibilitat.
Com funciona el nostre verificador de contrast de colors
Introduïu els vostres colors de primer pla i fons amb valors hexadecimals RGB o trieu-los directament amb el Selector de colors.
- Ajusteu Alfa per canviar la transparència del color de primer pla.
- Utilitzeu el control lliscant Lluminositat per fer que el color sembli més clar o més fosc.
A continuació, la nostra eina calcula la relació de contrast i la compara amb les directrius WCAG:
- WCAG 2.0 Nivell AA
- Almenys 4.5:1 per al text del cos normal
- Com a mínim 3:1 per a text gran
- WCAG 2.1 (UI i gràfics)
- Com a mínim 3:1 per a icones, vores i altres components de la interfície
- Nivell AAA WCAG
- Com a mínim 7:1 per a text normal
- Com a mínim 4.5:1 per a text gran
Text gran significa:
- 14 pt (uns 18,66 px) i negreta, o
- 18 pt (aproximadament px) o més
Podeu utilitzar el comptagotes del Selector de colors per agafar els colors exactes de qualsevol cosa de la pantalla.
Per als enllaços que només depenen del color per destacar, utilitzeu el nostre controlador de contrast de color per assegurar-vos que compleixen els estàndards d'accessibilitat i que siguin fàcils de llegir per a tothom.