Selector de culori și verificare contrast
Alege o culoare cu selectorul sau scrie-o în orice format. Vezi-o ca HEX, RGB, HSL, HSV și CMYK, obține nuanțe mai deschise, mai închise și culori asortate și verifică dacă textul în două culori respectă recomandările de contrast WCAG pentru accesibilitate.
Culori
Despre Selector de culori și verificare contrast
Alege o culoare cu selectorul sau scrie-o în orice format. Vezi-o ca HEX, RGB, HSL, HSV și CMYK, obține nuanțe mai deschise, mai închise și culori asortate și verifică dacă textul în două culori respectă recomandările de contrast WCAG pentru accesibilitate.
Face parte din secțiunea „Fișiere, imagini și design” a SmartCalcy. Rulează în browser, fără cont, folosește valuta și unitățile tale (le poți schimba în partea de sus a paginii) și oferă estimări doar cu titlu informativ, deci verifică ghidurile oficiale înainte să te bazezi pe un rezultat.
Cum folosești Selector de culori și verificare contrast
Ce calculează și când să-l folosești
Alege și convertește culori între HEX, RGB, HSL, HSV și CMYK, sugerează nuanțe mai deschise, mai închise și culori asortate și verifică contrastul textului conform recomandărilor de accesibilitate WCAG.
Cum se folosește, pas cu pas
- Alege o culoare cu selectorul sau scrie-o ca HEX, RGB, HSL sau ca nume de culoare.
- Alege o culoare de fundal ca să verifici contrastul.
- Copiază orice format cu un singur clic.
- Folosește nuanțele deschise, închise și culorile asortate pentru o paletă.
Ce înseamnă fiecare câmp
- Culoare – Implicit #2443C8, albastrul SmartCalcy.
- Fundal – Implicit alb.
Cum citești rezultatele
- Raport de contrast – De la 1:1 la 21:1, cu rezultate AA și AAA pentru text normal și mare.
- Formate – HEX, RGB, HSL, HSV și CMYK.
- Nuanțe deschise și închise – Variante mai deschise și mai închise.
- Culori asortate – Complementare, analoage și triadice.
Formula
Raport de contrast = (L1 + 0,05) ÷ (L2 + 0,05), unde L1 și L2 sunt luminanțele relative ale culorii mai deschise și ale celei mai închise. WCAG AA necesită 4,5:1 pentru text normal și 3:1 pentru text mare; AAA necesită 7:1 și 4,5:1.
Un exemplu rezolvat
Cu culorile inițiale, #2443C8 pe alb are un raport de contrast de 7,74:1, care trece de AAA pentru toate mărimile de text.
Ipoteze și limite
- Valorile CMYK sunt o conversie simplă, nu un profil de tipar cu gestionarea culorilor.
- Rezultatele de contrast urmează formula WCAG 2.
Greșeli frecvente
- Verificarea contrastului doar pe text mare și folosirea culorii pentru text mic.
- Bazarea doar pe culoare pentru a transmite un sens.
Întrebări frecvente
De ce raport de contrast am nevoie?
Cel puțin 4,5:1 pentru text normal și 3:1 pentru text mare, ca să respecți WCAG AA.
Textul mare are o mărime anume?
Da: cel puțin 24 px sau aproximativ 18,7 px îngroșat.
Pot scrie numele unei culori?
Da, orice nume de culoare CSS, precum teal sau tomato, funcționează.
Instrumente similare
| Nivel | Text normal | Text mare |
|---|---|---|
| AA | Trece | Trece |
| AAA | Trece | Trece |
Formate
- HEX
- RGB
- HSL
- HSV
- CMYK