Palette di Colori ad Alto Contrasto, con Rapporti Verificati

Palette di Colori ad Alto Contrasto

Palette di Colori ad Alto Contrasto con Rapporti WCAG | We.Inc

Cinque palette originali ad alto contrasto con ogni coppia di testo e pulsante verificata secondo WCAG 2.2, più un tester per regolare i colori e copiare il CSS.

Una palette ad alto contrasto è un insieme di colori del brand in cui il testo resta facile da leggere sul suo sfondo. WCAG 2.2 lo misura come un rapporto da 1:1 a 21:1. Il testo normale richiede almeno 4.5:1 per il livello AA e 7:1 per AAA; il testo grande richiede 3:1 e 4.5:1. Le palette qui elencano ogni coppia.

Minimi di contrasto WCAG 2.2

La maggior parte dei siti di palette mostra bei campioni affiancati, il che non dice nulla sulla leggibilità del testo messo sopra. Ogni palette qui sotto assegna a ciascun colore un compito (sfondo, testo, testo secondario, accento, testo sull'accento) e verifica le coppie che useresti davvero insieme su una pagina.

Domande frequenti

Quale rapporto di contrasto si considera alto contrasto?

Non esiste una soglia ufficiale unica chiamata alto contrasto. Il livello AA di WCAG chiede 4.5:1 per il testo normale e il livello AAA chiede 7:1, quindi molti designer considerano 7:1 per il testo normale come obiettivo di alto contrasto.

Quale dimensione si considera testo grande?

WCAG considera grande il testo di almeno 18 punti, o 14 punti in grassetto. La spiegazione del W3C li colloca intorno a 24px e 18.5px in pixel CSS.

Posso arrotondare 4.47 a 4.5?

No. Il W3C dice che il rapporto non va arrotondato, quindi una coppia a 4.499:1 non raggiunge 4.5:1. Per questo motivo il tester tronca i valori.

Anche pulsanti e icone hanno bisogno di contrasto?

Sì. Il criterio di successo 1.4.11 di WCAG 2.2 chiede almeno 3:1 tra le parti dei controlli e la grafica significativa e i colori adiacenti.

Il mio logo deve superare la verifica?

No. Il testo che fa parte di un logo o di un nome di brand non ha requisiti di contrasto secondo 1.4.3. Tutto il resto della pagina intorno invece sì.

Perché cinque ruoli e non cinque campioni

Adattare una palette al tuo brand

Le cinque palette e i loro rapporti

I rapporti sono calcolati con la formula WCAG 2.2 e mostrati troncati a due decimali.

Ogni coppia verificata nelle cinque palette

Usa una palette nel tuo CSS

Inchiostro su carta come custom properties CSS

Dai un nome alle variabili in base al ruolo, non al colore, così cambiare palette in seguito richiede una modifica per riga.

La formula del contrasto in JavaScript

Lo stesso calcolo eseguito dal tester, scritto a partire dalla definizione W3C di luminanza relativa.

Tester di palette

Scegli una palette, poi modifica qualsiasi colore. Ogni coppia viene ricontrollata mentre scrivi.

Palette di partenza

Inchiostro su carta

Turno di notte

Registro del bosco

Blu porto

Argilla calda

Sfondo

Testo normale

Testo secondario

Testo sull'accento

Contrasto di ogni coppia in questa palette

{a} su {b}

Superato

Non superato

Non è un colore esadecimale

Orari di apertura

Aperto da martedì a sabato, dalle 9 alle 5. Accesso libero senza appuntamento prima di mezzogiorno.

Chiuso nei giorni festivi.

Prenota una visita

Copia le variabili CSS

Copiato.

Copia non riuscita. Seleziona il codice e copialo a mano.

Tutte le {n} coppie raggiungono AA per il testo normale.

{k} coppie su {n} non arrivano a 4.5:1 per il testo normale.

Tutto viene calcolato nel tuo browser.

Inizia gratis · Nessuna carta di credito richiesta

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito