Kontrola kontrastu
Zkontrolujte kontrast dvojic barev podle WCAG včetně verdiktů AA a AAA a návrhů oprav.
Související nástroje
Kontrola kontrastu
Vložte dvojice barvy textu a pozadí, jednu na řádek — #7a1f2b on #ffffff, #333, #eee nebo rgb(0, 0, 0) #fff — a u každé okamžitě dostanete kontrastní poměr podle WCAG 2 spolu s verdiktem vyhovuje či nevyhovuje pro každou úroveň. Poměr sahá od 1 : 1 (žádný kontrast) po 21 : 1 (černá na bílé) a počítá se z relativního jasu přesně podle definice ve směrnicích, takže čísla sedí s auditními nástroji i inspektorem prohlížeče.
WCAG zná dvě úrovně. AA, na kterou se odkazuje většina předpisů a smluv, vyžaduje 4,5 : 1 pro běžný text a 3 : 1 pro velký text. Přísnější AAA chce 7 : 1 a 4,5 : 1. Text se počítá jako velký od 18 pt (zhruba 24 px) v běžném řezu, nebo od 14 pt (zhruba 18,7 px) v tučném — proto nadpis může projít s poměrem, u kterého odstavec neprojde. Přehled vypíše všechny čtyři kontroly pro každou dvojici; kompaktní výstup dá jeden řádek na dvojici a čte se rychleji, když procházíte celou paletu najednou.
Když dvojice nesplňuje AA pro běžný text, zapněte „Navrhnout opravu“ a nástroj barvu textu po malých krocích světlosti ztmavuje nebo zesvětluje — odstín zůstává — dokud nedosáhne 4,5 : 1, a vypíše nejbližší vyhovující hex připravený k vložení do stylů.
Všechno běží ve vašem prohlížeči; nezveřejněné firemní palety neopustí vaše zařízení. Barvy zapíšete jako hex se 3 nebo 6 znaky s mřížkou i bez ní, jako rgb() či rgba(), nebo běžným anglickým názvem CSS — základních 16 plus oblíbené rozšířené. Kompletní seznam 148 názvů nástroj záměrně nenese, exotická jména proto pište jako hex. Řádek, který není dvojicí barev, se klidně označí a zbytek se zpracuje dál.