Color Contrast
Contrasto dei colori
Il contrasto dei colori è la differenza di luminanza misurata tra il contenuto e lo sfondo vicino. Mostra se il testo chiave e i bordi sono facili da vedere.
Un altro esempio
Il team modifica il testo disattivato finché non è facile da leggere su superfici chiare e scure.
Parti principali
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Usalo quando
Raggiungi il giusto livello di contrasto WCAG per testo, icone chiave, indicatori di focus e bordi dei componenti. Aggiungi un altro indizio quando il colore ha significato.
Non usarlo quando
Una tonalità diversa potrebbe comunque avere un contrasto scarso. Non usare mai il colore come unico segnale di uno stato.
Nome usato nel codice
contrast ratio Prima di spedire
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Contrasto dei colori (Color Contrast). User context: Il team modifica il testo disattivato finché non è facile da leggere su superfici chiare e scure. Design concept to apply: Contrasto dei colori (Color Contrast). Why it fits: Raggiungi il giusto livello di contrasto WCAG per testo, icone chiave, indicatori di focus e bordi dei componenti. Aggiungi un altro indizio quando il colore ha significato. Do not use it when: Una tonalità diversa potrebbe comunque avere un contrasto scarso. Non usare mai il colore come unico segnale di uno stato. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Lo standard copre solo l'ambito elencato. Non sceglie lo stile visivo, la decisione sul prodotto o l'esempio di vocabolario. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Contrasto dei colori (Color Contrast) is used now. Definition: Il contrasto dei colori è la differenza di luminanza misurata tra il contenuto e lo sfondo vicino. Mostra se il testo chiave e i bordi sono facili da vedere. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.