Verificator de contrast al culorilor
Verificați contrastul dintre culoarea textului și cea a fundalului conform WCAG 2 și APCA. Instrumentul calculează raportul de contrast WCAG 2 pe baza luminanței relative, indică dacă sunt îndeplinite nivelurile AA și AAA pentru text normal și mare și pentru elemente grafice UI, apoi afișează valoarea contrastului de luminozitate APCA și explică la ce este utilă. Creat pentru designerii și dezvoltatorii care construiesc interfețe accesibile.
Întrebări frecvente
Ce înseamnă nivelurile WCAG?
Nivelul AA impune 4.5:1 pentru text normal și 3:1 pentru text mare (criteriul de succes 1.4.3); nivelul AAA impune 7:1 și 4.5:1 (1.4.6). Componentele interfeței și elementele grafice cu semnificație au nevoie de 3:1 față de culorile adiacente (1.4.11). Instrumentul indică dacă sunt îndeplinite fiecare dintre aceste cinci praguri.
Ce se consideră text mare?
WCAG definește textul mare ca având cel puțin 18 puncte în stil normal, aproximativ 24 CSS pixeli, sau cel puțin 14 puncte aldin, aproximativ 18.66 CSS pixeli. Orice text mai mic este considerat normal și are nevoie de un raport mai mare.
De ce nu trece un raport de 4.499:1 nivelul AA?
Pragurile WCAG sunt exacte, așadar un raport care s-ar rotunji la 4.5, dar este sub această valoare, nu trece. Instrumentul compară raportul nerotunjit și îl afișează trunchiat la două zecimale, astfel încât numărul afișat să nu pară niciodată mai bun decât valoarea reală.
Ce este APCA?
Algoritmul de contrast perceptual accesibil este metoda de măsurare a contrastului dezvoltată pentru proiectele WCAG 3. Modelează contrastul de luminozitate percepută, tratează diferit textul și fundalul și returnează o valoare a contrastului de luminozitate, Lc, de la aproximativ -108 la 106. Încă nu face parte din niciun standard WCAG publicat, așadar folosiți rezultatele WCAG 2 pentru conformitate și APCA ca verificare suplimentară.
De ce valoarea APCA este uneori negativă?
APCA ține cont de polaritate: valorile pozitive indică text închis pe fundal deschis, iar cele negative, text deschis pe fundal închis. Recomandările folosesc valoarea absolută, așadar Lc -75 și Lc 75 se încadrează în același nivel.
Cum sunt alese nivelurile de recomandare APCA?
Acestea urmează modul simplu APCA bronze: Lc 90 este recomandat pentru textul din corpul paginii, Lc 75 este minimul pentru acest tip de text, Lc 60 pentru alte texte de conținut, Lc 45 pentru titluri și text mare, Lc 30 pentru text care poate fi citit din priviri, cum sunt substituenții, iar Lc 15 pentru elemente non-text. Dimensiunea și grosimea fontului contează în continuare, așadar tratați nivelurile ca puncte de pornire, nu ca verdict.
Ce versiune APCA este implementată?
Constantele APCA-W3 din versiunea 0.0.98 G, revizia 4g, cu exponentul simplu 2.4 pentru canalele sRGB, limita soft black și limita de contrast redus. Textul negru pe alb oferă aproximativ Lc 106.0, iar textul alb pe negru, aproximativ Lc -107.9, în concordanță cu implementarea de referință.
Ce formate de culoare pot introduce?
Coduri Hex cu sau fără #, nume de culori CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), spații oklch() precum display-p3 și color(), cmyk(). Culorile din afara sRGB sunt mapate mai întâi în sRGB, deoarece ambele formule sunt definite pentru culorile de ecran sRGB.
Cum sunt tratate culorile transparente?
Culoarea textului semitransparent este amestecată cu fundalul înainte de măsurare, așa cum o afișează browserul. Un fundal semitransparent este mai întâi amestecat cu alb. Rezultatul afișează culorile opace ale textului și fundalului care au fost comparate efectiv.
Contează ordinea celor două culori?
Pentru WCAG 2 nu contează, deoarece raportul dintre luminanța mai mare și cea mai mică este același indiferent de ordine. Pentru APCA contează, deoarece textul și fundalul sunt ponderate diferit, așadar introduceți culoarea textului în primul câmp și culoarea fundalului în al doilea.