ImageColorPicker.com

Kontrola kontrastu farieb

Testuj pomer kontrastu medzi popredím a pozadím, aby si zabezpečil prístupnosť.

Skontroluj svoje farby

Testuj farebné kombinácie, aby si sa uistil, že spĺňajú štandardy prístupnosti WCAG pre čitateľnosť textu.

5.73 k 1
Kontrast
AA
Výsledok pre text
Dobré

Porovnané: #000000 na #B6765B

Text

16px, Regular (400)

Počíta sa ako bežný text.

  • AA (WCAG 1.4.3): najmenej 4.5:1

    Vyhovuje

  • AAA (WCAG 1.4.6): najmenej 7:1

    Chýba 1.27

    Neprešlo

Komponenty rozhrania a grafika

Ikony, orámovania vstupov, indikátory fokusu a ďalšie časti, ktoré musíš vidieť, aby si mohol používať rozhranie.

  • AA (WCAG 1.4.11): najmenej 3:1

    Vyhovuje
5.73 ku 1. Text: spĺňa AA, nespĺňa AAA. UI komponenty: vyhovuje.
Ako sa to kontroluje
Porovnávané farby (po zmiešaní)
Text #000000 na pozadí #B6765B
Relatívna luminancia
Text 0.0000, pozadie 0.2365
Vzorec
(L1 + 0.05) / (L2 + 0.05) kde L1 je luminancia svetlejšej farby a L2 luminancia tmavšej.
Presný pomer
5.7314 ku 1, zobrazené ako 5.73 ku 1. Zobrazená hodnota je orezaná, nie zaokrúhlená, takže nikdy nevyzerá lepšie, než v skutočnosti je. Presná hodnota sa porovnáva s požiadavkou.

Veľkosť textu: 16px, Regular (400)

Počíta sa ako bežný text. Veľký text má aspoň 24px (18pt), alebo aspoň 18.67px (14pt) keď je tučný (hrúbka 700 alebo viac). Veľkosti sa zobrazujú odrezané, nie zaokrúhlené.

Počíta sa ako bežný text. Veľký text má aspoň 24px (18pt), alebo aspoň 18.67px (14pt) keď je tučný (hrúbka 700 alebo viac). Veľkosti sa zobrazujú odrezané, nie zaokrúhlené.

Aa
Náhľad názvu

Rýchla hnedá líška preskočí lenivého psa

Príklad malého textu (12px)

Text
#000000
Pozadie
#b6765b

Štandardy WCAG

Úroveň AA

Minimálny pomer kontrastu 4.5:1 pre normálny text a 3:1 pre veľký text. Požadované pre väčšinu webových stránok.

Úroveň AAA

Zvýšený pomer kontrastu 7:1 pre normálny text a 4.5:1 pre veľký text. Odporúčané pre optimálnu prístupnosť.

Kontrola kontrastu farieb

Vypočítaj pomer kontrastu textu a farieb pozadia.

Vyberte farbu pomocou výberu farby pre text a farbu pozadia alebo zadajte farbu vo formáte RGB hexadecimálny (napr. #259 alebo #2596BE). Môžete nastaviť posúvač na výber farby. Smernice pre prístupnosť webového obsahu (WCAG) majú špecifické smernice na zistenie, či je text čitateľný pre vidiacich používateľov. Toto kritérium používa konkrétny algoritmus na mapovanie farebných kombinácií do porovnateľných pomerov. Pomocou tohto vzorca WCAG uvádza, že 4.5:1 pomer kontrastu textu a jeho pozadia je dostatočný pre normálny (telo) text a veľký text (18+ pt normálny alebo 14+ pt tučný) by mal mať aspoň 3:1 pomer kontrastu.

Kľúčové funkcie

  • Výpočet kontrastného pomeru v reálnom čase
  • Kontrola súladu s WCAG AA & AAA
  • HSL posuvníky pre jemné doladenie
  • Viacero formátov náhľadu

Pokročilé nástroje

  • Automatická oprava farieb
  • Ukážky textu a pozadia
  • Detekcia názvu farby
  • Export výsledkov

Často kladené otázky

Pre súlad s WCAG AA potrebuje bežný text kontrastný pomer aspoň 4,5:1, zatiaľ čo veľký text (18 pt alebo 14 pt tučné) potrebuje 3:1.

WCAG AAA vyžaduje vyššie kontrastné pomery: 7:1 pre bežný text a 4,5:1 pre veľký text, oproti 4,5:1 a 3:1 pre AA.

Použi našu funkciu automatickej opravy, ktorá upraví farbu textu alebo pozadia a zachová zámer tvojho dizajnu, alebo farby uprav ručne pomocou HSL posuvníkov s vizuálnymi indikátormi, ktoré ukazujú optimálne zóny pre súlad s AA/AAA.

Zelené zóny a značky AA/AAA ukazujú optimálne rozsahy pre súlad s WCAG. Smerové nápovedy (Svetlejšie/Tmavšie) ťa navedú k lepšiemu kontrastu podľa tvojej aktuálnej kombinácie farieb.

Áno, môžeš zadať ľubovoľný hex kód farby alebo použiť farebný výber na výber vlastných farieb. URL sa automaticky aktualizuje, takže môžeš zdieľať konkrétne kombinácie farieb.