Perché WCAG richiede 4.5:1 di contrasto?
È lo standard AA affinché gli utenti ipovedenti leggano senza ausili tecnici.
Selettore colori
Scegli colori e converti tra HEX, RGB, HSL
Rapporto di contrasto
⬜ ⬛
Colore complementare & Colori analoghi
Selettore colori
HEX o RGB in CSS?
HEX è più conciso e comune. Usa rgba() per la trasparenza.
Come implementare i colori dark mode?
Usa proprietà CSS personalizzate con @media (prefers-color-scheme: dark).
Codici colore: HEX, RGB e HSL
HEX, RGB e HSL sono tre modi per rappresentare i colori. HEX è più comune sul web, RGB usa valori rosso-verde-blu, HSL usa tonalità -saturazione-luminosità .
Cos'è il rapporto di contrasto WCAG?
Lo standard WCAG AA richiede un rapporto di contrasto di almeno 4.5:1 affinché gli utenti ipovedenti possano leggere il testo.
HSL: Il modello di colore intuitivo
HSL usa Tonalità (0-360°), Saturazione (0-100%) e Luminosità (0-100%) per descrivere i colori intuitivamente.
Colori complementari e analoghi
I complementari si oppongono a 180° sulla ruota dei colori. Gli analoghi creano palette armoniose.
Gestione colori con CSS Custom Properties
Le variabili CSS centralizzano la gestione dei colori e facilitano i temi e il dark mode.
Domande frequenti
HEX o RGB in CSS?
HEX è più conciso e comune. Usa rgba() per la trasparenza.
Perché WCAG richiede 4.5:1 di contrasto?
È lo standard AA affinché gli utenti ipovedenti leggano senza ausili tecnici.
Come implementare i colori dark mode?
Usa proprietà CSS personalizzate con @media (prefers-color-scheme: dark).