Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
Kas ir krāsu pārveidotājs?
Vienu un to pašu krāsu var pierakstīt vairākos pierakstos: HEX (#3366ff) CSS un dizaina nodošanai, RGB (51, 102, 255) ekrāniem un API, un HSL (tonis, piesātinājums, gaišums), kurā daudz vieglāk domāt par toņa gaišināšanu vai blāvēšanu. Pārveidotājs pārvietojas starp šiem pierakstiem, nemainot pašu krāsu.
Piemērs: #3366FF nozīmē R=0x33=51, G=0x66=102 un B=0xFF=255, tas ir, rgb(51, 102, 255). Ar max=255 un min=51 gaišums ir L=(255+51)/2/255=60%. Dominē zilais kanāls, tāpēc piesātinājums ir 100% un tonis nonāk zilajā sektorā pie 225°, kas dod hsl(225, 100%, 60%). Balts teksts uz šīs zilās sasniedz aptuveni 4,7:1 WCAG kontrastu — nedaudz virs 4,5:1, kas nepieciešams AA līmeņa tekstam.
Kā lietot krāsu pārveidotāju
- Ieraksti vai ielīmē krāsu kā #hex, rgb() vai hsl() vai izvēlies to krāsu aplī.
- Apskati pārveidotās vērtības citos pierakstos un nokopē vajadzīgo.
- Pārslēdzies starp komplementāro un triādes harmoniju, lai izpētītu paleti.
- Ievadi teksta un fona krāsas, lai pārbaudītu WCAG kontrasta attiecību parastam un lielam tekstam.
Biežāk uzdotie jautājumi par krāsu un kontrastu
Kāda kontrasta attiecība nepieciešama pieejamībai?
WCAG 2 AA līmenis prasa vismaz 4,5:1 parastam tekstam un 3:1 lielam tekstam (18pt vai 14pt treknrakstā). AAA līmenis paaugstina to līdz 7:1 un 4,5:1. Pārbaudītājs rāda abus sliekšņus uzreiz.
Ar ko atšķiras HEX, RGB un HSL?
Tie kodē vienu un to pašu krāsu atšķirīgi. HEX ir kompakts un izplatīts CSS, RGB tieši atbilst ekrāna kanāliem, bet HSL apraksta toni, piesātinājumu un gaišumu — to daudz vieglāk mainīt kodā.
Kas ir komplementārās un triādes krāsas?
Komplementārā krāsa atrodas 180° pretī tavējai aplī un rada spēcīgu kontrastu; triādes palete ņem trīs krāsas 120° attālumā — spilgtu, bet līdzsvarotu shēmu.
