Verificator de contrast: raport WCAG AA și AAA – Gratuit
Gratuit, fără înregistrare, funcționează în browser. Verifică contrastul WCAG dintre text și fundal, cu rezultate AA și AAA pentru text, text mare și butoane. Dacă nu trece, alege o culoare apropiată.
Textul mare arată așa
Textul normal arată așa. Un vulpoi maro sare peste câinele leneș, iar sub el stă un text mic, precum o legendă.
Text mic: legendă de 14px.
Buton- Text normal, AA: TreceText de bază, cel puțin 4.5:1
- Text normal, AAA: TreceÎmbunătățit, cel puțin 7:1
- Text mare, AA: Trece18pt+, sau 14pt+ aldin, cel puțin 3:1
- Text mare, AAA: TreceÎmbunătățit, cel puțin 4.5:1
- Pictograme și controale, AA: TreceButoane, borduri, linii de grafic: 3:1
Folosește formula de contrast WCAG 2. Rapoartele nu se rotunjesc niciodată în sus, deci 4.49:1 nu înseamnă 4.5:1. Verificarea se face pe dispozitivul tău.
De ce să folosești Verificator de contrast al culorilor
- 100% gratuit
- Folosește-l oricât de des vrei. Fără înregistrare, fără filigran, nimic de instalat.
- Privat prin design
- Ce scrii rămâne în browser și nu ne este trimis niciodată.
- Funcționează pe orice dispozitiv
- Rulează în browser pe Windows, Mac, Linux, Android și iPhone. Nu e nevoie de aplicație.
Cum să folosești Verificator de contrast al culorilor
- Introdu Culoarea textului și Fundalul ca HEX, rgb(), hsl() sau un nume precum navy, ori alege-le din mostre. Folosește Inversează ca să le schimbi între ele.
- Citește raportul de contrast și cele cinci rezultate: text normal AA și AAA, text mare AA și AAA, și pictograme și controale.
- Verifică previzualizarea live ca să vezi titluri, text, text mic și un buton în culorile tale.
- Dacă un nivel nu trece, apasă una dintre Cele mai apropiate culori care trec. Păstrează nuanța și schimbă doar cât de deschis sau închis este textul.
Întrebări frecvente
Ce raport de contrast am nevoie?
WCAG AA cere 4.5:1 pentru text normal și 3:1 pentru text mare și elemente de interfață, precum butoane, borduri și pictograme. AAA cere 7:1 pentru text normal și 4.5:1 pentru text mare.
Ce înseamnă text mare?
Cel puțin 18 pt (24px) regular sau 14 pt (aproximativ 18.7px) bold.
Cum se calculează raportul de contrast?
Cu formula WCAG 2: se calculează luminanța relativă a fiecărei culori, apoi se împarte cea mai deschisă plus 0.05 la cea mai închisă plus 0.05. Rezultatul variază de la 1:1 (fără contrast) la 21:1 (negru pe alb).
De ce nu trece 4.49:1?
WCAG spune că rapoartele nu trebuie rotunjite în sus, deci orice sub 4.5:1 nu îndeplinește AA pentru text normal. Acest instrument nu rotunjește niciodată un raport în sus.
Cum repar o culoare care nu trece?
La Cele mai apropiate culori care trec, instrumentul sugerează o culoare a textului pentru AA și una pentru AAA. Fiecare păstrează nuanța și saturația și schimbă doar luminozitatea, deci culoarea ta de brand rămâne recognoscibilă. Apasă una ca să o folosești.
Acceptă culori de text transparente?
Da. O culoare de text transparentă, precum rgba(26, 20, 70, 0.6), este amestecată cu fundalul înainte de a măsura contrastul. Transparența fundalului este ignorată, fiind tratat ca solid.
Butoanele și pictogramele au nevoie de contrast?
Da. WCAG 2.1 cere 3:1 între elementele de interfață (borduri de butoane, câmpuri de formular, pictograme, linii de grafic) și culorile de lângă ele. Rezultatul Pictograme și controale verifică asta.
Înseamnă că site-ul meu este accesibil dacă trece?
Înseamnă că această pereche de culori respectă regula de contrast WCAG. Accesibilitatea acoperă mult mai mult, precum dimensiunea textului, stările de focus, textul alternativ și utilizarea de la tastatură, așa că tratează asta ca o verificare dintre multe.
Este Verificator de contrast al culorilor gratuit?
Da. Se folosește gratuit, fără înregistrare și fără nimic de instalat.
Ghiduri de ajutor și tutoriale (în engleză)
- The 60-30-10 Color Rule for Websites and Slides (Free)The 60-30-10 rule splits a design into a dominant colour, a secondary and an accent. Use it on web pages and slides with HEX codes and a free palette generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Color Theory Basics: The Wheel and Color Schemes (Free)The colour wheel, hue, saturation and lightness, and complementary, analogous, triadic and monochromatic schemes, with HEX examples from a free tool.
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
Unelte similare
- Convertor de culori HEX în RGBConvertește HEX în RGB sau RGB în HEX pe măsură ce scrii: lipește un cod de culoare în orice format și primești HEX, RGB, HSL, HSV și CMYK deodată, fiecare cu un buton de copiere. Setează opacitatea pentru HEX de 8 cifre și rgba() și vezi cât de lizibil este textul alb sau negru pe culoare.
- Generator de palete de culoriGenerează o paletă de cinci culori cu bara de spațiu, blochează ce-ți place sau pornește de la culoarea ta. Exportă în CSS, Tailwind, JSON sau HEX.
- Găsitor de nume de culoriLipește un cod HEX, RGB sau HSL, sau alege o culoare, și vezi cele mai apropiate nume CSS, cel mai apropiat primul. Răsfoiește și filtrează cele 148 de culori.