Salt la conținut
Pandus
ro Schimbați limba
Meniu

Verificare contrast pentru paleta de culori (până la 12 culori)

Verificare contrast paletă

Până la 12 culori ca hex, rgb(), hsl() sau nume de culoare, cu un nume opțional înainte de două puncte: „Primary: #2f47d9”. Merg și variabilele CSS, precum „--brand: #2f47d9;”.

Culori citite

    Culoarea textului pe culoarea fundalului, după formula WCAG 2.x. O culoare semitransparentă se amestecă mai întâi cu fundalul; un fundal semitransparent se amestecă cu alb. Verificarea rulează în browserul tău; culorile nu sunt trimise nicăieri.

    Matricea are nevoie de JavaScript. Fără el poți citi totuși regulile de contrast în textul de sub instrument.

    Un verificator obișnuit de contrast răspunde la o întrebare pentru o pereche. Un brand are o duzină de culori și zeci de perechi. Introdu paleta, până la 12 culori, iar tabelul arată raportul de contrast WCAG al fiecărei perechi: care perechi sunt sigure pentru text și care merg doar pentru text mare, pictograme și chenare. Calculul rulează în browserul tău; culorile nu sunt trimise nicăieri.

    Cum introduci culorile

    O culoare pe linie sau separate prin punct și virgulă. Un nume înainte de două puncte este opțional: Primary: #2f47d9. Acceptăm hex (și cu alfa), rgb(), rgba(), hsl(), hsla(), nume de culori precum navy și variabile CSS copiate din foaia de stil, de exemplu --brand-500: #2f47d9;. O linie pe care verificatorul nu o poate citi apare sub câmp, ca o greșeală de scriere să nu piardă tacit o culoare. Culorile semitransparente se amestecă mai întâi cu fundalul.

    Cum citești matricea

    Rândurile sunt culorile textului, coloanele sunt fundalurile. Fiecare celulă arată o miniatură a perechii, raportul și cel mai înalt nivel atins:

    Marcaj Raport Pentru ce e bună perechea
    AAA de la 7 : 1 Text de orice mărime la nivelul îmbunătățit (1.4.6)
    AA de la 4,5 : 1 Text de orice mărime (1.4.3), pictograme și chenare
    AA text mare și interfață de la 3 : 1 Text mare (24 px sau 18,66 px aldin), pictograme, chenare de câmpuri, indicatori de focus (1.4.3, 1.4.11)
    Nu trece sub 3 : 1 Doar decor; logourile și controalele dezactivate sunt exceptate

    Raportul folosește formula WCAG 2.x și este tăiat, nu rotunjit, la două zecimale: 4,49 nu este 4,5. Fiecare celulă are și un text pentru cititoarele de ecran („Ink pe Paper: 16,1 : 1, AAA”), iar tabelul are antete de rând și de coloană, deci poate fi citit celulă cu celulă de la tastatură.

    Filtru și export

    Alege nivelul de la care o pereche se consideră reușită și bifează „Arată în matrice doar perechile care trec” ca să ascunzi restul. Lista de sub matrice arată perechile care trec, cele mai bune primele. Copiază ca variabile CSS îți dă paleta ca proprietăți personalizate, cu perechile care trec într-un comentariu; Copiază ca tabel Markdown îți dă perechile care trec pentru o pagină de design system sau un pull request.

    Ce nu poate spune matricea

    • Stările elementelor. Culorile la trecerea mouse-ului, focus, apăsare, legătură vizitată și stare dezactivată sunt perechi separate; adaugă-le pe rânduri proprii.
    • Fundalurile neuniforme. Textul pe o fotografie sau pe un degradeu se verifică în cel mai deschis și în cel mai închis loc, în verificatorul de contrast, care poate prelua culori și dintr-o imagine.
    • Sensul transmis doar prin culoare. O eroare roșie și un succes verde de aceeași luminozitate arată la fel pentru multe persoane. WCAG cere și un alt indiciu, de exemplu o pictogramă sau text (1.4.1 Utilizarea culorii).
    • Contrastul din paginile tale reale. O paletă care trece poate fi folosită greșit. Testează pagina publicată cu verificatorul WCAG.

    Este un calcul automat, nu un audit complet, și nu este consultanță juridică.

    Cum construiești o paletă care trece

    Pornește de la două ancore: o cerneală închisă pentru text și o hârtie deschisă pentru fundaluri. Verifică culoarea brandului față de ambele, pentru că cele mai multe culori de brand trec doar de o parte. Pregătește pentru fiecare culoare o nuanță mai închisă pentru text pe alb și una mai deschisă pentru text pe fundal închis. Păstrează o nuanță de 3 : 1 pentru chenare și pictograme, fiindcă contrastul elementelor non-text se aplică chenarelor câmpurilor și inelelor de focus. Contează nu ce pereche e permisă în teorie, ci ce perechi atinge tema în practică.

    Conform EAA și legii germane BFSG, standardul EN 301 549 preia contrastul WCAG de nivel AA, deci proiectează pentru 4,5 : 1 și 3 : 1. AAA nu este cerut. Pandus verifică culorile pe care paginile tale le folosesc cu adevărat, pe fiecare pagină, în fiecare săptămână.

    Întrebări frecvente

    Câte culori pot introduce?

    Până la 12. Cu 12 culori matricea are 132 de perechi. Dacă introduci mai multe, se folosesc primele 12, iar verificatorul spune câte au fost lăsate deoparte.

    Ce formulă folosește matricea?

    Raportul de contrast WCAG 2.x, (L1 + 0,05) / (L2 + 0,05), calculat pe luminanța relativă a celor două culori și tăiat la două zecimale. La această formulă trimit criteriile WCAG 1.4.3, 1.4.6 și 1.4.11.

    Culorile mele sunt trimise pe un server?

    Nu. Matricea se calculează în browserul tău, nimic despre paletă nu este salvat sau trimis.

    De ce diferă o pereche în cele două direcții?

    La culorile opace nu diferă: A pe B are același raport ca B pe A. Matricea arată totuși ambele rânduri, ca să găsești repede o culoare de text. La culorile semitransparente direcțiile diferă, pentru că culoarea textului se amestecă cu fundalul.

    O paletă care trece face site-ul meu accesibil?

    Nu. Arată doar că aceste perechi au suficient contrast. Dacă paginile le folosesc corect și tot restul din WCAG trebuie verificate în continuare.