Tècnic de contrast de color

Evaluate the contrast ratio of text and background colors based on WCAG 2.1 guidelines. Instantly generate accessible color adjustments.

HEX/RGB/HSL
HEX/RGB/HSL
Tot funciona localment en el seu navegador.

Previsió de text en viu

Caps grans (18pt Bold / 24pt regular)

Aquesta és una previsió del gran estil de text de títol.

Text normal (menys de 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ratio de contrast

18.6:1

WCAG 2.1 Estat de conformitat

Requisits de WCAG AA
Text normal (4.5:1) PASS
Text de gran magnitud (3.0:1) PASS
Requisits de WCAG AAA
Text normal (7.0:1) PASS
Gran text (4.5:1) PASS

WCAG 2.1 Guia

Facilitat de verificació dels estàndards de contrast per construir interfícies accessibles que compleixin amb les directrius de Secció 508, ADA i WCAG AA o AAA.

El motor de les suggeriments

Ajustar automàticament els colors incrementalment al llarg de les coordenades HSL per trobar les alternatives més properes que compleixen els criteris de relació de contrast.

Completa el client

Les computacions s'executen localment dins del context del navegador. No es transmeten colors, arxius o coordinats de telèmetria als nostres servidors.

Tools de color relacionats

HEX RGB HSL Convertidor de color
Convertir colors i ajustar les coordines de llum.
Imatge Color Picker
Extraure paletes de color de mockups de disseny.
Convertir el color de CSS
Convertir entre els formats CMYK, HSV, RGB, HSL i HEX.

Color Contrast de control

Calcula les ràtios de contrast WCAG per a colors d'avantguarda i fons i mostra els resultats comuns en mida de text.

Entrada
Dos colors CSS vàlids i text de previsió opcional.
Exposició
Una relació de contrast amb els indicadors WCAG AA i AAA passats o fallits.
Les limitacions reals
El càlcul només cobreix el contrast de la lluminància; no certifica una interfície o compte per a renderització de fonts, moviment, focus o cues no colorides.
Privacitat i tractament de dades
Dos colors CSS vàlids i text de previsió opcional es processen en aquesta taula del navegador. Converter no el rep ni l'emmagatzema; tancar o rellotjar la pàgina aclarirà l'estat de treball llevat que l'eina ofereix explícitament una descàrrega local.

Com utilitzar aquesta eina

  1. Proporciona dos colors CSS vàlids i text de previsió opcional en els controls d'eines.
  2. Selecciona les configuracions que afecten una relació de contrast amb els indicadors WCAG AA i AAA passats o fallades, després executa l'eina.
  3. Revisa una relació de contrast amb WCAG AA i AAA passes o no indicadors abans de copiar o descarregar-lo.

Modes comuns d'insuccions

Els colors invalidats no es poden mesurar, i la transparència sense un fons resolt pot fer que una proporció sigui sense sentit.

Exemple útil

Compareix el text #0f210 en #fffx per revisar la seva relació entre text normal i gran.