Provozní

Kontrola kontrastu barev

Inzerát

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

✓ AA Pass
✓ AAA Pass

Large Text (18pt+ or 14pt+ bold)

✓ AA Pass
✓ AAA Pass

UI Components & Graphics

✓ AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray
Níže zadejte své barevné kombinace, otestujte je pomocí našeho nástroje pro kontrolu kontrastu barev a okamžitě uvidíte, zda splňují standardy přístupnosti.

Jak funguje náš kontrolor barevného kontrastu

Zadejte barvy popředí a pozadí pomocí RGB hexadecimálních hodnot, nebo je vyberte přímo pomocí Color Pickeru.

 Můžeš:

  • Upravte alfa variantu, abyste změnili průhlednost barvy popředí.
  • Použijte posuvník Světlost, aby barva vypadala světle nebo tmavěji.

Náš nástroj pak vypočíta kontrastní poměr a ověří jej podle pokynů WCAG:

  • WCAG 2.0 Úroveň AA
  • Alespoň 4,5:1 pro běžný text těla
  • Alespoň 3:1 pro velký text
  • WCAG 2.1 (UI a grafika)
  • Alespoň 3:1 pro ikony, okraje a další komponenty rozhraní
  • WCAG úroveň AAA
  • Alespoň 7:1 pro běžný text
  • Alespoň poměr 4,5:1 pro velký text

Velký text znamená buď:

  • 14 pt (asi 18,66 px) a tučně, nebo
  • 18 pt (asi px) nebo více

Můžete použít kapátko v Color Pickeru k získání přesných barev z čehokoli na obrazovce. Usnadňuje testování skutečných návrhů, tlačítek nebo pozadí.

Pro odkazy, které vyniknou pouze barvou, použijte náš kontrolor barevného kontrastu, abyste se ujistili, že splňují standardy přístupnosti a zůstanou snadno čitelné pro všechny.

 
 

Související nástroje