Instrument gratuit: Accesibilitate

Verificare contrast culori

Comparați aici o culoare de text cu o culoare de fundal după WCAG 2.2 sau introduceți adresa unei pagini pentru a găsi fiecare text sub contrastul minim, cu culorile măsurate și cea mai apropiată culoare care trece.

Calculator de contrast

Introduceți o culoare pentru text și o culoare de fundal. Totul se calculează în browserul dumneavoastră.

Textul normal de 16 pixeli arată așa.

Text mare de 24 de pixeli

Conturul unui buton

Raport de contrast4.54:1

Rezultatele WCAG 2.2 pentru aceste culori
Text normal, AAWCAG 1.4.3, necesită 4.5:1Reușit
Text mare, AAWCAG 1.4.3, necesită 3:1Reușit
Text normal, AAAWCAG 1.4.6, necesită 7:1Eșuat
Text mare, AAAWCAG 1.4.6, necesită 4.5:1Reușit
Pictograme, borduri și câmpuri de formularWCAG 1.4.11, necesită 3:1Reușit

Cele mai apropiate culori de text care trec pe acest fundal

Textul mare înseamnă cel puțin 24 de pixeli sau 18,66 pixeli îngroșat. Rapoartele sunt rotunjite în jos, așa că 4.499:1 apare ca 4.49:1 și nu trece, așa cum intenționează WCAG.

Sau scanați o pagină pentru a găsi textul cu contrast scăzut

Gratuit. Verifică adresa introdusă în aproximativ 20 de secunde.

Ce verifică acest instrument

  • Raportul WCAG al oricăror două culori

    Calculatorul folosește formula luminanței relative din definițiile WCAG 2.2 și arată rezultatul pentru text normal, text mare și componente de interfață, la nivelurile AA și AAA. Rulează în browserul dumneavoastră.

  • O culoare care trece, calculată

    Când o pereche nu trece, găsește cea mai apropiată culoare de text cu aceeași nuanță care atinge 4.5:1 sau 7:1, astfel încât să modificați cât mai puțin designul.

  • Fiecare text cu contrast scăzut de pe o pagină

    Scanarea paginii rulează regula color-contrast din axe-core într-un browser Chrome real și listează fiecare element cu erori, cu culoarea textului, culoarea fundalului, dimensiunea fontului și raportul.

  • Grupate pe perechi de culori

    Erorile sunt grupate după culoarea textului și a fundalului, pentru că o singură modificare a unei culori a temei remediază de obicei toate elementele care o folosesc.

  • Pragul corect pentru textul mare

    Textul de cel puțin 24 de pixeli sau de 18,66 pixeli îngroșat are nevoie de 3:1 în loc de 4.5:1. Scanarea aplică fiecărui element pragul corect, pe baza dimensiunii și grosimii calculate.

  • Ce nu a putut măsura și de ce

    Textul de peste imagini, gradienți sau elemente suprapuse este listat separat, cu motivul, ca să știți exact ce trebuie verificat vizual.

Ce nu poate verifica

  • Să măsoare textul de peste fotografii, gradienți sau video. Un program nu poate ști ce parte a unei imagini se află în spatele fiecărei litere, așa că aceste texte sunt listate pentru a le verifica dumneavoastră.
  • Să verifice stările hover, focus sau alte stări. Scanarea vede pagina așa cum se încarcă; verificați acele culori cu calculatorul.
  • Să scaneze pictogramele, bordurile și câmpurile de formular de pe pagină pentru WCAG 1.4.11. Calculatorul arată rezultatul la 3:1 pentru orice pereche introduceți.
  • Să citească textul care face parte dintr-o imagine, cum ar fi un banner cu textul inclus în imagine.
  • Să testeze mai mult decât pagina pe care o introduceți. Scanarea gratuită completă testează până la cinci pagini-cheie.

De ce contează

Contrastul scăzut este cea mai frecventă eroare de accesibilitate de pe web. Analiza WebAIM din 2026 a primului milion de pagini principale a găsit text cu contrast scăzut pe 83,9% dintre ele, cu o medie de 34 de apariții pe pagină.

Textul șters este greu de citit pentru persoanele cu vedere slabă sau cu deficiențe de vedere a culorilor și pentru oricine folosește telefonul în plin soare. Criteriul de succes 1.4.3 din WCAG 2.2, de nivel AA, stabilește minimul la 4.5:1 pentru textul normal și la 3:1 pentru textul mare.

Este și una dintre cele mai ieftine probleme de remediat: pe majoritatea site-urilor, câteva culori ale temei provoacă aproape toate erorile, iar modificarea lor remediază toate paginile deodată.

Cum să citiți rezultatele

Raport de contrast
De la 1:1 (aceeași culoare de două ori) la 21:1 (negru pe alb). Rapoartele sunt rotunjite în jos, așa că o pereche care arată 4.49:1 nu atinge minimul de 4.5:1.
Text normal, AA (4.5:1)
Minimul pentru textul de bază, linkuri, etichete și textul butoanelor conform WCAG 1.4.3.
Text mare, AA (3:1)
Pentru textul de cel puțin 24 de pixeli sau de 18,66 pixeli îngroșat. WCAG definește textul mare ca 18 puncte sau 14 puncte îngroșat.
AAA (7:1 și 4.5:1)
Nivelul îmbunătățit din WCAG 1.4.6. Nu este necesar pentru conformitatea AA, dar ajută mai mulți cititori.
Pictograme, borduri și câmpuri de formular (3:1)
WCAG 1.4.11 cere 3:1 față de culorile alăturate pentru părțile controalelor și ale graficelor pe care oamenii trebuie să le vadă pentru a le folosi.
Text cu erori
Fiecare element pe care scanarea l-a măsurat sub pragul său, cu selectorul, culorile, dimensiunea și raportul. Deschideți unul pentru a vedea markupul și, dacă este disponibilă, o captură de ecran.
De verificat vizual
Textul pe care axe-core nu l-a putut măsura, cu motivul, de exemplu o imagine sau un gradient în spatele lui.

Cum remediați cele mai frecvente probleme

  • Text gri pe alb

    #767676 este aproximativ cel mai deschis gri care atinge 4.5:1 pe alb (4.54:1). Griurile mai deschise, cum ar fi #999999 (2.84:1), sunt o cauză frecventă a erorilor din subsoluri, legende, textele substituent (placeholder) și prețuri.

  • Text alb pe un buton în culoarea mărcii

    Dacă textul alb pe culoarea mărcii nu trece, închideți cu câteva nuanțe fundalul butonului sau folosiți text închis la culoare. Verificați și culorile pentru hover și focus, care devin adesea mai deschise.

  • Textul substituent din formulare

    Textul substituent (placeholder) este tot text și are nevoie de 4.5:1. Și mai bine, folosiți o etichetă vizibilă deasupra câmpului, astfel încât textul substituent să nu fie singura instrucțiune.

  • Text peste imagini și slidere

    Puneți textul pe un fundal uniform sau semitransparent ori adăugați imaginii un strat întunecat, apoi verificați cea mai deschisă parte a imaginii aflată în spatele textului.

  • Etichete de reducere și text mărunt

    Textul din controalele dezactivate este exceptat de la 1.4.3, dar etichetele de reducere, prețurile și mențiunile legale scrise mărunt nu sunt. Acestea sunt adesea cele mai șterse texte de pe paginile unui magazin.

Contrast scăzut al culorilor: de ce contează și cum se remediază pe Shopify, WooCommerce și orice site

Întrebări despre acest instrument

Ce raport de contrast cere WCAG?

Pentru nivelul AA, 4.5:1 pentru textul normal și 3:1 pentru textul mare (criteriul de succes 1.4.3), precum și 3:1 pentru componentele de interfață și graficele cu semnificație (1.4.11). Nivelul AAA cere 7:1 și 4.5:1 (1.4.6).

Ce înseamnă text mare?

WCAG definește textul la scară mare ca text de cel puțin 18 puncte sau 14 puncte îngroșat. În pixeli CSS, asta înseamnă aproximativ 24px sau 18,66px îngroșat.

Trebuie ca logourile să respecte contrastul minim?

Nu. WCAG 1.4.3 exceptează logotipurile și textul care face parte dintr-un logo sau dintr-un nume de marcă, precum și textul pur decorativ și textul din controalele inactive.

De ce listează scanarea textul de peste o imagine pentru verificare?

axe-core măsoară culori uniforme. Când în spatele textului se află o imagine, un gradient sau alt element, nu poate ști ce culori se întâlnesc, așa că raportează elementul pentru a fi verificat de o persoană, în loc să ghicească.

Am nevoie de contrast AAA?

Nivelul AAA nu este necesar pentru conformitatea de nivel AA, iar W3C nu recomandă impunerea nivelului AAA pentru site-uri întregi. Atingerea raportului de 7:1 pentru textul de bază rămâne totuși o bună practică acolo unde designul permite.

Face APCA parte din WCAG?

Nu. APCA este o altă metodă de calcul al contrastului, discutată pentru WCAG 3, care este încă o versiune preliminară. Conformitatea se măsoară astăzi cu raportul WCAG 2 pe care îl calculează acest instrument.

Surse

Instrumente similare

Raport de remediere a accesibilității ($174, plată unică) pornește de la scanarea gratuită completă și adaugă mai multe pagini, modificarea de făcut pentru fiecare constatare, un PDF și retestări pentru verificarea remedierilor.

Raport de remediere a accesibilității: detalii