Barevný kontrast
Rozdíl v jasu mezi textem a pozadím ovlivňuje čitelnost a použitelnost pro všechny uživatele.
Kontrast barev (colour contrast) je jedním z nejdůležitějších prvků přístupného designu. Pokud není rozdíl mezi textem a pozadím dostatečný, mohou mít lidé problém obsah přečíst nebo s ním pracovat – a to nejen ti se zrakovým postižením nebo barvoslepostí, ale třeba i uživatelé s telefonem na přímém slunci nebo večer s nočním filtrem.
Podle pravidel WCAG by měl být kontrastní poměr alespoň 4,5 ∶ 1 pro běžný text a 3 ∶ 1 pro větší písmo. Přesto na mnoha webech najdeme světlé šedé písmo na bílém podkladu, nenápadné odkazy nebo tlačítka, která sice vypadají elegantně, ale v praxi selhávají.
Nejde přitom o okrajový problém. Barvoslepost postihuje přibližně jednoho z dvanácti mužů a jednu ze dvou set žen. A nízký kontrast může ztížit orientaci komukoliv – třeba při únavě očí nebo večer na mobilu.
Pokud byste si chtěli barevné kontrasty počítat sami, můžete vyjít třeba z ukázky v javascriptu:
// Převod zápisu #RRGGBB na tři barevné složky v rozsahu 0—1
function hexToRgb(hex) {
const match = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
if (!match) throw new Error("Invalid hex color: " + hex);
return [
parseInt(match[1], 16) / 255,
parseInt(match[2], 16) / 255,
parseInt(match[3], 16) / 255,
];
}
// Linearizace hodnoty barevné složky
function linearize(c) {
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
}
// Barevný jas
function getLuminance([r, g, b]) {
const [rl, gl, bl] = [linearize(r), linearize(g), linearize(b)];
return 0.2126 * rl + 0.7152 * gl + 0.0722 * bl;
}
// Kontrast dvou barev
function getContrastRatio(hex1, hex2) {
const lum1 = getLuminance(hexToRgb(hex1));
const lum2 = getLuminance(hexToRgb(hex2));
const lighter = Math.max(lum1, lum2);
const darker = Math.min(lum1, lum2);
return ((lighter + 0.05) / (darker + 0.05)).toFixed(2);
}
// Příklad použití:
console.log(getContrastRatio("#000000", "#ffffff")); // 21.00
console.log(getContrastRatio("#777777", "#aaaaaa")); // 1.93
Dobrá zpráva je, že kontrast se dá snadno otestovat i opravit. Existují nástroje pro prohlížeč nebo zabudované kontroly přístupnosti v nástrojích jako Figma nebo Chrome DevTools. Moderní design systémy navíc často nabízejí barevné kombinace, které vyhovují požadavkům WCAG rovnou.
Zohlednit přístupnost neznamená omezit kreativitu. Naopak – jde o způsob, jak rozšířit možnosti designu tak, aby fungoval pro víc lidí a v různých situacích. Když uživatel text nepřečte, nezáleží na tom, jak krásně vypadá.