Hoe gaan ek na of my teks- en agtergrondkleure aan WCAG voldoen?

Voer hekskodes in Tekskleur en Agtergrondkleur in, of gebruik die kiesers. Die Kontrasverhouding verskyn met Slaag of Misluk vir AA- en AAA-normale en -groot teks, plus UI-komponente.

Watter kontrasverhouding vereis WCAG AA?

AA benodig 4,5:1 vir normale teks en 3:1 vir groot teks. AAA benodig 7:1 vir normale teks en 4,5:1 vir groot teks. UI-komponente en grafiese objekte benodig 3:1.

Wat tel as groot teks?

Die hulpmiddel beskou 18pt (24px) gewone teks, of 14pt (18,66px) vet teks, as groot. Kleiner teks moet aan die hoër normale teks-drempels voldoen.

My kleure misluk AA. Hoe maak ek hulle reg?

Gebruik die een-klik Tekskleur regmaak- of Regmaak agtergrond-voorstelle. Hulle pas helderheid aan terwyl dieselfde skakering behou word totdat die paar 4,5:1 bereik.

Watter kleurformate aanvaar dit, en kan ek van die skerm af kies?

Dit aanvaar 3-syfer- en 6-syfer-hekswaardes, soos #abc of #1e293b. 'n Kies kleur vanaf skerm-knoppie verskyn in blaaiers wat die EyeDropper API ondersteun, soos Chromium.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

🌓

Gratis WCAG Kleurkontrastkontroleerder

Kyk of twee kleure voldoen aan WCAG AA- en AAA-kontrasstandaarde vir toeganklikheid. Regstreekse voorskou by verskeie teksgroottes met outomatiese voorstelle wanneer kontras te laag is.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Werk vanlyn sodra gelaai

Tekskleur

Agtergrondkleur

Groot opskrifteks

Medium liggaamsteks (18px) vir lees en inhoud.

Normale liggaamsteks (16px) vir paragrawe.

Klein liggaamsteks (14px) vir onderskrifte en metadata.

14,63:1

Kontrasverhouding

✓WCAG AA — Normale teks

Vereis 4.5:1 · Jy het 14,63:1

✓WCAG AA — Groot teks

Vereis 3.0:1 · Jy het 14,63:1

✓WCAG AAA — Normale teks

Vereis 7.0:1 · Jy het 14,63:1

✓WCAG AAA — Groot teks

Vereis 4.5:1 · Jy het 14,63:1

✓UI-komponente / grafiese voorwerpe

Vereis 3.0:1 · Jy het 14,63:1

Vinnige voorkeure

Gebaseer op WCAG 2.1-kontrasriglyne. Groot teks = 18pt (24px) normaal of 14pt (18.66px) vet. Hex-kodes werk in albei rigtings: tik 'n hex of kies 'n kleur — beide invoere bly gesinkroniseer.

Algemene gebruike

Geskiedkundig-webblaaie vir WCAG-naalevingVerifieer dat jou werf se tekskleure voldoen aan WCAG AA- of AAA-kontrasstandaarde vir toeganklikheid.
Verifieer Handelsmerk-kleurkombinasiesToets jou handelsmerk-kleurpalette-paring om seker te maak dat hulle vir toeganklike UI-ontwerp werk.
Toets Donker-mode-kleurpaletteLigte teks op donker agtergonde kan steeds kontras-mislukking — kontroleer jou donker-mode palletparing.
Kleurkombinasies vir Druk MaterialePlakate, tekens, en drukmateriaal het ook leesbare kontras nodig — veral vir ouer kykers.
Ontwerp toeganklike knopkleurenVerseker dat CTA, aksieknoppe en skakels teen hul agtergronde WCAG verbigaan.

Hoe dit werk

Kontraskontrole loop heeltemal in jou blaaier met die WCAG 2.1-relatiewe-luminansie-algoritme — geen biblioteek, geen bediener nie, net handgeskrewe wiskunde wat presies die spesifikasie volg. Elke resultaat werk intyds by soos jy tik of 'n kleur kies.

1
Heks-toevoer en normalisering
Beide 3-syfer- (#abc) en 6-syfer- (#aabbcc) heks-waardes word aanvaar en na volle RGB-drielinge genormaliseer. Ongeldige toevoer word onmiddellik verwerp eerder as om stilweg na swart te verstek, dus verskyn 'n rooi rand in plaas van 'n misleidende slaagresultaat.
2
WCAG-luminansieberekening
Elke kleur word na relatiewe luminansie omgeskakel met die WCAG 2.1-formule: sRGB-kanaalwaardes word gelineariseer met 'n stuksgewyse gamma-korreksie (deel deur 12.92 onder 0.03928, verhef tot die mag van 2.4 daarbo), dan geweeg as 0.2126R + 0.7152G + 0.0722B.
3
Kontrasverhouding en nakomingskontroles
Die kontrasverhouding word bereken as (ligter + 0.05) / (donkerder + 0.05) en teen al vyf WCAG-drempels gekontroleer: AA gewone teks (4.5:1), AA groot teks (3:1), AAA gewone teks (7:1), AAA groot teks (4.5:1), en UI-komponente (3:1). Resultate werk by met elke sleutelaanslag.
4
Kleurtoon-behoudende regstelvoorstelle
Wanneer die paar WCAG AA druip, deursoek die nutsprogram HSL-ligtheidruimte — stap uitwaarts van die oorspronklike ligtheid in beide rigtings — om die naaste variant van elke kleur te vind wat 4.5:1 slaag terwyl dieselfde kleurtoon en versadiging behou word. Die EyeDropper-API (Chromium) is ook beskikbaar om enige kleur direk vanaf jou skerm te monster.

Verwante gereedskap

👁️

Kleurblindheidsimulator

Kyk hoe jou ontwerp lyk vir mense met kleursiggebreke. Simuleer protanopia, deuteranopia, tritanopia, achromatopsia en ligter anomalieë.

Probeer ditLêers bly plaaslik

📐

Wat Is My Skermresolusie

Sien jou skermresolusie in CSS en werklike piksels, venstergrootte, pikselverhouding, kleurdiepte, HDR, raakondersteuning en ververstempo, en kopieer dit alles.

Probeer dit

🖥️

Doiepikseltoets

Kontroleer jou skerm vir dooie of vassittende piksels met volskerm swart, wit, rooi, groen, blou en grys, plus 'n opsionele vassittendepikselhersteller.