Verificator de contrast de culoare

Verificați contrastul prim-planului/fondului față de WCAG AA și AAA. Vedeți actualizarea raportului pe măsură ce alegeți culori.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Verificați contrastul prim-planului/fondului cu liniile directoare WCAG AA și AAA.
Se rulează în browserul dvs
Gratuit de utilizat

Cum se folosește

Alegeți textul (primul plan) și culorile de fundal.
Citiți raportul de contrast și rezultatele AA/AAA.
Ajustați până când treceți de nivelul țintă.

How this tool works

Alegeți textul (primul plan) și culorile de fundal.
Citiți raportul de contrast și rezultatele AA/AAA.
Ajustați până când treceți de nivelul țintă.

Recommended settings

Utilizați mai întâi opțiunile implicite, apoi ajustați dacă este necesar

Supported formats

Text / on-page input

File size and limits

Previzualizările cu mai multe straturi foarte complexe se pot simți mai lente pe telefoanele mai vechi.

Privacy

Generatoarele de culoare și CSS rulează în întregime în browserul dvs. Previzualizările și conversiile nu vă încarcă niciodată stilurile.

Common use cases

Utilizați Color Contrast Checker ori de câte ori aveți nevoie: verificați contrastul prim-planului/fundal conform recomandărilor WCAG AA și AAA.

Troubleshooting

Previzualizarea arată diferit după lipire

Verificați dacă există CSS concurente pe pagina dvs. (resetări, culori moștenite). Copiați mai întâi regula generată într-o foaie de stil izolată.

Întrebări frecvente

Acest lucru îmi încarcă CSS-ul?

Nu. Generatoarele și convertoarele rulează în browserul dvs. cu previzualizare live.

Am nevoie de un cont?

Nu. Deschideți instrumentul, modificați controalele și copiați CSS-ul.