Wêreld met die kleur kontrast

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
Alles loop lokaal in jou browser.

Live teks voorbeeld

Grote Hoof (18pt Bold / 24pt Reguleer)

Dit is 'n voorbeeld van die groot heading teks styl.

Normal teks (onder 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elite.

Kontrast verhouding

18.6:1

WCAG 2.1 Volgbaarheid

WCAG AA-voorschriften
Die normele tekst (4.5:1) PASS
Grote Tekste (3.0:1) PASS
WCAG AAA verplichting
Regionale teks (7.0:1) PASS
Groot teks (4.5:1) PASS

WCAG 2.1 Regeringsregels

So maklik kontraststandarde te verifiseer om toeganklike interfaces te bou wat voldoen aan seksie 508, ADA, en WCAG AA of AAA-richtsnoere.

Suggesties motor

Automatisch aanpas kleur incremental langs HSL-koordinaat om die naaste alternatiewe te vind wat die kontrastverhoudingskriteria voldoen.

Volledige kliënt-side

Computations word lokaal uitgevoer in jou browser konteks. Geen kleur, bestande of telemetriese coördinate word na ons servers nie.

Verhoogde kleurwerktuig

HEX RGB HSL kleurverwerter
Konverter kleur en aanpas die ligte coördinate.
Foto kleur Picker
Ek kry kleurpalette uit ontwerp mockups.
CSS kleur verwerter
Konverter tussen CMYK, HSV, RGB, HSL en HEX-formaat.

kleur kontrast seekers

Calculer WCAG kontrast ratio's vir voorgrond en agtergrond kleur en wys gewone teks-grootte resultate.

Invoer
Twee gelykte CSS-kleur en opsiele voorbeeldtekst.
Uitgang
'n kontrastverhouding met WCAG AA en AAA pass of fail-indicatoren.
Real beperkings
Die berekening dek slegs die lysende kontraste; dit certifiseer nie 'n interface of rekening vir font rendering, beweging, fokus of nie-kleurige koers nie.
Privaciteit en data verwerking
twee geldende CSS kleur en optiewe voorbeeldtekst word verwerk in hierdie browser-kaap. Converter ontvang dit nie of bewaar dit nie; sluit of herloading van die bladsy verduidelik die werkingsstand, tenzij die instrument uitdruklik 'n plaaslike download bied nie.

Hoe om hierdie instrument te gebruik

  1. Gee twee geldende CSS-kleur en optiewe voorbeeldtekst in die gereedskapskontrole.
  2. Kies die instellings wat 'n kontrastverhouding met WCAG AA en AAA pass of mislukke-indicatoren beïnvloed, dan het die gereedskap uit.
  3. Kyk 'n kontrast verhouding met WCAG AA en AAA pass of faaltydende indikaaters voordat dit kopieer of downloadeer.

Die algemene mislukingsmodus

Onvalide kleur kan nie gemeten word nie, en transparantie sonder 'n opgeloste agtergrond kan 'n verhouding betekenisloos maak.

Gebruiklike voorbeeld

Vergelyk #f2937 teks op #ffffff om sy verhouding vir normale en groot teks te beoordel.