Color Contrast Checker

Zkontrolujte poměr kontrastu WCAG AA a AAA mezi barvami textu a pozadí

Zkusit příklad

Barva textu (popředí)

Barva pozadí

Ukázka velkého textu (18px tučně)

Ukázka normálního textu — takto bude váš text vypadat na zvoleném pozadí.

Poměr kontrastu

14.63:1

Shoda s WCAG

Vyhovuje

Normální AA

Vyhovuje

Normální AAA

Vyhovuje

Velký AA

Vyhovuje

Velký AAA

WCAG AANormální text: 4.5:1, Velký text (18px+ nebo 14px tučně): 3:1

WCAG AAANormální text: 7:1, Velký text (18px+ nebo 14px tučně): 4.5:1

Co je kontrola kontrastu barev?

Kontrola kontrastu barev měří rozdíl svítivosti mezi barvou popředí (zpravidla textu) a barvou pozadí a vyjadřuje výsledek jako poměr. Poměr 1:1 znamená, že barvy jsou totožné; 21:1 je maximum, které představuje černou na bílé nebo naopak. Pokyny pro přístupnost webového obsahu (WCAG) vydané organizací W3C definují minimální poměry kontrastu, které musí text splňovat, aby jej osoby se slabým zrakem nebo poruchami barvocitu mohly přečíst.

Vzorec pro výpočet poměru kontrastu pochází z WCAG 2.x a vychází z relativní svítivosti — míry toho, jak jasná se barva jeví lidskému oku. Relativní svítivost se vypočítá linearizací každého kanálu sRGB (odstraněním gama) a vyvážením kanálů pomocí koeficientů ITU-R BT.709: 0,2126 pro červenou, 0,7152 pro zelenou a 0,0722 pro modrou. Zelená přispívá nejvíce, protože lidské oči jsou na zelené světlo nejcitlivější. Výsledný poměr je (L1 + 0,05) / (L2 + 0,05), kde L1 je svítivost světlejší barvy.

WCAG definují dvě úrovně shody. Úroveň AA vyžaduje poměr kontrastu alespoň 4,5:1 pro normální text a 3:1 pro velký text (18px a více nebo 14px tučně). Úroveň AAA zvyšuje laťku na 7:1 a 4,5:1. WCAG 2.1 také zavedlo kritérium úspěšnosti 1.4.11, které vyžaduje poměr 3:1 pro netextové prvky uživatelského rozhraní, jako jsou okraje, ikony a indikátory zaměření.

Proč používat tento nástroj pro kontrolu kontrastu?

Vizuální kontrola kontrastu je nespolehlivá. Barvy, které vypadají odlišně na vašem kalibrovaném monitoru, mohou splývat na levném laptopu, přímém slunečním světle nebo pro osobu s deuteranopií. Číselný poměr odstraní dohady a poskytne verdikt vyhovuje/nevyhovuje vůči standardu WCAG.

Okamžitý výpočet poměru
Vyberte nebo zadejte dvě barvy a sledujte, jak se poměr kontrastu aktualizuje v reálném čase. Žádný formulář k odeslání, žádné načítání stránky.
🔒
Zpracování zaměřené na soukromí
Výpočet svítivosti probíhá zcela ve vašem prohlížeči. Žádné hodnoty barev neopustí vaše zařízení a žádné cookies ani analytika nesledují vaše volby.
🎯
Verdikty AA a AAA
Výsledky zobrazují stav vyhovuje/nevyhovuje pro WCAG AA i AAA, pro normální i velký text, takže přesně víte, která prahová hodnota je splněna.
📋
Bez nutnosti účtu
Otevřete stránku a začněte testovat. Žádná registrace, žádné limity počtu požadavků. Nástroj funguje offline, jakmile je stránka načtena.

Případy použití nástroje pro kontrolu kontrastu

Frontend vývoj
Před nasazením změny UI vložte barvu textu a pozadí z CSS do nástroje a ověřte, že dvojice splňuje WCAG AA. Tím zachytíte problémy s kontrastem dříve, než se dostanou ke code review nebo automatizovaným auditům.
Předání designu
Designéři mohou ověřit, že každý barevný pár v souboru Figma splňuje požadovanou úroveň WCAG, než předají specifikace vývojářům. Oprava kontrastu ve fázi návrhu je výrazně levnější než oprava po implementaci.
Audit přístupnosti
QA inženýři provádějící audit WCAG mohou namátkově zkontrolovat konkrétní barevné kombinace označené automatizovanými nástroji jako Lighthouse nebo axe. Nástroj potvrdí přesný poměr a která úroveň vyhovuje nebo nevyhovuje.
Tokeny designového systému
Při definování barevných tokenů pro designový systém otestujte každý pár popředí/pozadí, aby paleta tokenů splňovala minimálně úroveň AA. Zdokumentujte poměry spolu s tokeny, aby je navazující týmy mohly důvěřovat.
Testování e-mailových šablon
E-mailoví klienti odstraňují funkce CSS jako průhlednost a režimy prolínání, takže skutečně vykreslené barvy se mohou lišit od zdrojového kódu. Otestujte konečné hodnoty popředí a pozadí, které dorazí do doručené pošty, abyste ověřili čitelnost.
Studium standardů přístupnosti
Studenti, kteří se učí WCAG, mohou experimentovat s různými barevnými páry a okamžitě sledovat, jak se poměr mění. Úprava jednoho kanálu najednou buduje praktické porozumění tomu, jak svítivost souvisí s vnímaným kontrastem.

Požadavky WCAG na poměr kontrastu

Níže uvedená tabulka shrnuje minimální poměry kontrastu požadované WCAG 2.1 pro různé typy obsahu a úrovně shody. Velký text je definován jako 18px (24 CSS pixelů) nebo více při normální tloušťce, nebo 14px (18,66 CSS pixelů) nebo více při tučném písmu.

ÚroveňMin. poměrPlatí proPoznámka
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Svítivost, AA a AAA — vysvětlení

Výpočet poměru kontrastu má tři fáze: výpočet svítivosti pro každou barvu, odvození poměru a porovnání s prahovými hodnotami WCAG.

Relativní svítivost
Jediné číslo od 0 (černá) do 1 (bílá), které vyjadřuje, jak jasná barva vypadá. Zohledňuje nelineární gama křivku sRGB a nestejnou citlivost lidského oka na červenou, zelenou a modrou. Čistá zelená (#00FF00) má svítivost 0,7152, zatímco čistá modrá (#0000FF) pouze 0,0722.
WCAG AA
Základní úroveň přístupnosti vyžadovaná většinou právních předpisů, včetně evropského zákona o přístupnosti (EAA) a Section 508 ve Spojených státech. AA vyžaduje poměr 4,5:1 pro normální text a 3:1 pro velký text. Většina designových systémů cílí na AA jako minimum pro všechny textové prvky.
WCAG AAA
Rozšířená úroveň určená pro obsah, který musí být čitelný pro co nejširší publikum, včetně uživatelů s výrazným zrakovým postižením. AAA vyžaduje 7:1 pro normální text a 4,5:1 pro velký text. Málokteré celé weby dosahují AAA na všech stránkách, ale kritický obsah, jako jsou právní upozornění a zdravotnické informace, na ni často cílí.

Příklady kódu

Výpočet poměrů kontrastu WCAG programově. Každý příklad implementuje vzorec relativní svítivosti z WCAG 2.x a výpočet poměru kontrastu. Pro srovnání jsou testovány stejné páry černá na bílé a indigo na bílém.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Často kladené otázky

Jaký je dobrý poměr kontrastu pro text?
Pro text na webu cílte na alespoň 4,5:1 (WCAG AA). Poměry nad 7:1 splňují WCAG AAA a jsou pohodlnější pro delší čtení. Černá na bílé dosahuje maximálního poměru 21:1, ale velmi tmavá šedá (#1e293b) na bílé stále poskytuje přibližně 12,6:1, což výrazně přesahuje AAA.
Co se v WCAG považuje za velký text?
WCAG definuje velký text jako 18px (24 CSS pixelů) při normální tloušťce nebo 14px (18,66 CSS pixelů) při tučném písmu. Velký text má nižší prahový kontrast, protože větší písmena jsou snáze čitelná. V CSS se 1px rovná 0,75pt, takže 18pt odpovídá 24px.
Je WCAG AA právně vyžadováno?
V mnoha jurisdikcích ano. Evropský zákon o přístupnosti (EAA), který nabývá účinnosti v červnu 2025, odkazuje na WCAG 2.1 AA. Section 508 zákona o rehabilitaci ve Spojených státech vyžaduje, aby federální agentury splňovaly WCAG 2.0 AA. Zákon Americans with Disabilities Act (ADA) byl americkými soudy interpretován jako požadující přístupné webové stránky s WCAG AA jako standardem. Kanada, Austrálie a Spojené království mají obdobné předpisy.
Jak se počítá relativní svítivost?
Každá hodnota kanálu sRGB (0–255) se vydělí 255 a poté linearizuje: hodnoty na úrovni 0,04045 nebo nižší se vydělí 12,92, hodnoty vyšší se transformují vzorcem ((c + 0,055) / 1,055) ^ 2,4. Tři linearizované kanály se vyváží koeficienty ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) a sečtou. Výsledek je číslo mezi 0 a 1.
Proč WCAG používá ve vzorci kontrastu posun 0,05?
Posun 0,05 zabraňuje dělení nulou, když je jedna z barev čistě černá (svítivost = 0). Zohledňuje také okolní světlo a odrazy obrazovky, které mírně zvyšují vnímanou svítivost i nejtmavších pixelů. Bez tohoto posunu by černá na jakékoli tmavé barvě vykazovala nekonečný nebo zavádějící vysoký poměr.
Mohou dvě barvy splnit AA a přesto být špatně čitelné?
Ano. Poměry kontrastu WCAG měří rozdíl svítivosti, nikoli rozdíl odstínu. Sytá červená na syté zelené může technicky splnit prahovou hodnotu poměru a přitom být pro některé čtenáře nepříjemná, zejména pro osoby s poruchou barvocitu červená-zelená. Kombinace barev lišících se jak svítivostí, tak odstínem bývá pohodlnější.
Jaký je rozdíl mezi kontrastem WCAG 2.x a APCA?
WCAG 2.x používá jednoduchý poměr svítivosti, který zachází symetricky s popředím i pozadím. APCA (Advanced Perceptual Contrast Algorithm), navrhovaný pro WCAG 3.0, využívá perceptuální model světlosti, který zohledňuje polaritu: tmavý text na světlém pozadí má jiný vnímaný kontrast než světlý text na tmavém pozadí při stejném rozdílu svítivosti. APCA je stále pracovní návrh a žádnou regulací zatím nenahradil metodu WCAG 2.x.